import { useState } from 'react';
import NewCustomerStep from '@/components/newcover/NewCustomerStep';
import NewLimbStep from '@/components/newcover/NewLimbStep';
import { configurations, methods, boundary } from '@/components/newcover/wizardConfig';
export default function WizardStep({ step, data, setData, customers, limbs, components }) { const [customerSearch,setCustomerSearch]=useState(''); const select=(key,options)=><div className="grid gap-3">{options.map(o=><label key={o.uuid||o} className="choice-card"><input type="radio" name={key} checked={data[key]===(o.uuid||o)} onChange={()=>setData({...data,[key]:o.uuid||o})}/><span>{o.full_name||o.profile_name||o}</span></label>)}</div>; if(step===1){const shown=customers.filter(c=>`${c.full_name} ${c.email} ${c.phone} ${c.customer_number}`.toLowerCase().includes(customerSearch.toLowerCase()));return <><label className="mb-4 block text-sm text-slate-300">Search returning customers<input className="workshop-input" placeholder="Name, email, phone or customer number" value={customerSearch} onChange={e=>setCustomerSearch(e.target.value)}/></label>{select('customer_uuid',shown)}<button className="btn-secondary mt-4" onClick={()=>setData({...data,customer_uuid:'new'})}>New customer</button>{data.customer_uuid==='new'&&<NewCustomerStep value={data.newCustomer||{}} onChange={v=>setData({...data,newCustomer:v})}/>}</>} if(step===2)return <>{select('limb_profile_uuid',limbs)}<button className="btn-secondary mt-4" onClick={()=>setData({...data,limb_profile_uuid:'new'})}>New limb profile</button>{data.limb_profile_uuid==='new'&&<NewLimbStep customerUuid={data.customer_uuid} value={data.newLimb||{}} onChange={v=>setData({...data,newLimb:v})}/>}</>; if(step===3)return select('prosthesis_configuration',configurations); if(step===4)return <div className="grid gap-3">{components.map(c=><label className="choice-card" key={c.uuid}><input type="checkbox" checked={(data.component_uuids||[]).includes(c.uuid)} onChange={e=>setData({...data,component_uuids:e.target.checked?[...(data.component_uuids||[]),c.uuid]:(data.component_uuids||[]).filter(x=>x!==c.uuid)})}/><span>{c.manufacturer} {c.model}</span></label>)}</div>; if(step===5)return select('measurement_method',methods); if(step>=6&&step<=8){const keys=['cover_boundaries','sensitive_area_summary','design_preferences'];const labels=['Where the cover begins/ends, exposed areas, access, opening direction and panel arrangement','Scars, pinch areas, raised tissue, sore areas, skin folds and no-contact zones','Style, colours, finish, ventilation and personalisation'];return <label className="text-sm text-slate-300">{labels[step-6]}<textarea className="workshop-input min-h-40" value={data[keys[step-6]]||''} onChange={e=>setData({...data,[keys[step-6]]:e.target.value})}/></label>} if(step===9)return <div className="space-y-3 text-sm text-slate-300"><p>Customer: {data.customer_uuid}</p><p>Limb profile: {data.limb_profile_uuid}</p><p>Configuration: {data.prosthesis_configuration||'Missing'}</p><p>Measurement method: {data.measurement_method||'Missing'}</p><div className="rounded-xl bg-amber-400/10 p-4 text-amber-100">{boundary}</div></div>; return <div className="space-y-4"><label className="text-sm text-slate-300">Due date<input type="date" className="workshop-input" value={data.due_date||''} onChange={e=>setData({...data,due_date:e.target.value})}/></label><label className="choice-card"><input type="checkbox" checked={!!data.safety_boundary_accepted} onChange={e=>setData({...data,safety_boundary_accepted:e.target.checked})}/><span>I confirm the cosmetic, non-load-bearing boundary and manual review requirement.</span></label></div> }