"use client";
import { useState } from "react";import { ArrowRight, Loader2 } from "lucide-react";
type Mode="registration"|"support";
const countries=["United States","Nigeria","United Kingdom","Canada","Ghana","South Africa","Cameroon","Other"];
export function PublicForm({mode}:{mode:Mode}){const[loading,setLoading]=useState(false);const[message,setMessage]=useState("");const[amount,setAmount]=useState(100);const[custom,setCustom]=useState("");async function submit(e:React.FormEvent<HTMLFormElement>){e.preventDefault();setLoading(true);setMessage("");const data=Object.fromEntries(new FormData(e.currentTarget));if(mode==="support")data.amount=custom||String(amount);try{const res=await fetch(mode==="registration"?"/api/register":"/api/support",{method:"POST",headers:{"content-type":"application/json"},body:JSON.stringify(data)});const out=await res.json() as {error?:string,url?:string,reference?:string};if(!res.ok)throw new Error(out.error||"Please review your information and try again.");if(out.url)window.location.href=out.url;else window.location.href=`/confirmation?reference=${encodeURIComponent(out.reference||"")}`;}catch(err){setMessage(err instanceof Error?err.message:"Something went wrong.");setLoading(false)}}return <form onSubmit={submit}>{mode==="support"&&<><div className="amounts">{[50,100,250,500,1000].map(n=><button type="button" className={amount===n&&!custom?"selected":""} key={n} onClick={()=>{setAmount(n);setCustom("")}}>${n.toLocaleString()}</button>)}<button type="button" className={custom?"selected":""} onClick={()=>setCustom("1")}>Custom</button></div>{custom&&<div className="field full"><label htmlFor="custom">Custom amount (USD)</label><input id="custom" type="number" min="1" step="0.01" value={custom} onChange={e=>setCustom(e.target.value)} required/></div>}</>}
<div className="form-grid"><div className="field"><label htmlFor="firstName">First name *</label><input id="firstName" name="firstName" minLength={2} required autoComplete="given-name"/></div><div className="field"><label htmlFor="lastName">Last name *</label><input id="lastName" name="lastName" minLength={2} required autoComplete="family-name"/></div><div className="field"><label htmlFor="email">Email address *</label><input id="email" name="email" type="email" required autoComplete="email"/></div><div className="field"><label htmlFor="phone">Phone number *</label><input id="phone" name="phone" type="tel" required autoComplete="tel" placeholder="Include country code"/></div><div className="field"><label htmlFor="country">Country *</label><select id="country" name="country" required defaultValue=""><option value="" disabled>Select country</option>{countries.map(x=><option key={x}>{x}</option>)}</select></div>{mode==="registration"?<><div className="field"><label htmlFor="city">City *</label><input id="city" name="city" required/></div><div className="field"><label htmlFor="state">State / Province</label><input id="state" name="state"/></div><div className="field"><label htmlFor="attendanceType">Attendance type *</label><select id="attendanceType" name="attendanceType"><option value="in-person">In person</option><option value="online">Online</option></select></div><div className="field"><label htmlFor="attendeeCount">Number of attendees</label><input id="attendeeCount" name="attendeeCount" type="number" min="1" max="10" defaultValue="1"/></div><div className="field"><label htmlFor="church">Church / Organization</label><input id="church" name="church"/></div><div className="field"><label htmlFor="role">Role / Position</label><input id="role" name="role"/></div><div className="field"><label htmlFor="ageRange">Age range</label><select id="ageRange" name="ageRange" defaultValue=""><option value="">Prefer not to say</option><option>Under 18</option><option>18–25</option><option>26–35</option><option>36–50</option><option>51–65</option><option>65+</option></select></div><div className="field"><label htmlFor="source">How did you hear about us?</label><select id="source" name="source" defaultValue=""><option value="">Select one</option><option>Church announcement</option><option>Facebook / Instagram</option><option>Friend or family</option><option>Email</option><option>Other</option></select></div><div className="field full"><label htmlFor="notes">Special notes</label><textarea id="notes" name="notes" placeholder="Accessibility, accommodation or other helpful information"/></div><label className="check full"><input type="checkbox" name="consent" required/><span>I confirm that the information is accurate and agree to the privacy policy. *</span></label><label className="check full"><input type="checkbox" name="communicationConsent"/><span>I would like to receive conference updates by email, SMS or WhatsApp.</span></label></>:<div className="field full"><label htmlFor="message">Optional message</label><textarea id="message" name="message" placeholder="Share a brief message with the conference team"/></div>}</div>{message&&<div className="status error" role="alert">{message}</div>}<button className="btn btn-red submit-btn" disabled={loading}>{loading?<><Loader2 className="animate-spin"/>Please wait</>:<>{mode==="registration"?"Complete registration":"Continue securely to Stripe"}<ArrowRight/></>}</button></form>}
