import {useEffect,useState} from 'react';
const graduationYears=Array.from({length:51},(_,index)=>2000+index);import {Link,useNavigate} from 'react-router-dom';import api from '../api/client';import {useAuth} from '../context/AuthContext';import {AuthCard} from './LoginPage';
export default function SignupPage(){const{user,setUser}=useAuth();const nav=useNavigate();const[countries,setCountries]=useState([]);const[campuses,setCampuses]=useState([]);const[busy,setBusy]=useState(false);const[error,setError]=useState('');const[form,setForm]=useState({first_name:'',last_name:'',email:'',country:'',campus:'',member_type:'CURRENT',graduation_year:null,profession:'',employer:'',job_title:''});useEffect(()=>{api.get('/core/countries/').then(r=>setCountries(r.data.results||r.data));api.get('/core/campuses/').then(r=>setCampuses(r.data.results||r.data));if(user)setForm(f=>({...f,...Object.fromEntries(Object.keys(f).map(k=>[k,user[k]??f[k]]))}))},[user]);async function save(e){e.preventDefault();setBusy(true);setError('');try{const payload={...form,country:Number(form.country),campus:Number(form.campus),graduation_year:form.graduation_year?Number(form.graduation_year):null};const{data}=await api.patch('/auth/me/',payload);setUser(data);nav('/portal')}catch(e){const errors=e.response?.data;const first=errors&&Object.entries(errors)[0];setError(first?`${first[0].replaceAll('_',' ')}: ${Array.isArray(first[1])?first[1][0]:first[1]}`:'Unable to complete registration. Please check your details.')}finally{setBusy(false)}}if(!user)return <AuthCard title="Start with your phone" text="Verify your mobile number first so we can securely find or create your profile."><Link className="btn primary" to="/login">Verify phone number</Link></AuthCard>;return <AuthCard title={user.first_name?'Complete your member profile':'Create your member profile'} text={user.first_name?'We found your record. Confirm the pre-filled details and add anything missing.':'Your number is verified. Add the essentials to create your member record.'}><form onSubmit={save} className="grid-form"><label>First name<input required value={form.first_name} onChange={e=>setForm({...form,first_name:e.target.value})}/></label><label>Last name<input required value={form.last_name} onChange={e=>setForm({...form,last_name:e.target.value})}/></label><label>Email (optional)<input type="email" value={form.email} onChange={e=>setForm({...form,email:e.target.value})}/></label><label>Member category<select value={form.member_type} onChange={e=>setForm({...form,member_type:e.target.value})}><option value="CURRENT">Current student</option><option value="ALUMNI">Alumni</option></select></label><label>Country<select required value={form.country} onChange={e=>setForm({...form,country:e.target.value,campus:''})}><option value="">Select country</option>{countries.map(c=><option key={c.id} value={c.id}>{c.name}</option>)}</select></label><label>Campus<select required value={form.campus} onChange={e=>setForm({...form,campus:e.target.value})}><option value="">Select campus</option>{campuses.filter(c=>!form.country||String(c.country)===String(form.country)).map(c=><option key={c.id} value={c.id}>{c.name} - {c.institution}</option>)}</select></label><label>Graduation year<select required value={form.graduation_year||''} onChange={e=>setForm({...form,graduation_year:e.target.value})}><option value="">Select graduation year</option>{graduationYears.map(year=><option key={year} value={year}>{year}</option>)}</select></label><label>Profession<input value={form.profession} onChange={e=>setForm({...form,profession:e.target.value})}/></label>{error&&<p className="notice error span2">{error}</p>}<button className="btn primary span2" disabled={busy}>{busy?'Saving...':'Complete registration'}</button></form></AuthCard>}

