import { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { X, ChevronRight } from 'lucide-react';
import { customerService } from '@/services/customerService';
import { componentService } from '@/services/componentService';
import { dimensionService } from '@/services/dimensionService';
import { dimensionAnalysis } from '@/services/dimensionAnalysis';
export default function StartWorkflowDialog({ onClose }) {
  const navigate = useNavigate();
  const [step, setStep] = useState(0);
  const [customers, setCustomers] = useState([]);
  const [limbs, setLimbs] = useState([]);
  const [prostheses, setProstheses] = useState([]);
  const [components, setComponents] = useState([]);
  const [sel, setSel] = useState({});
  useEffect(() => { customerService.list().then(c => setCustomers(c.filter(x => x.record_state === 'active'))); componentService.list().then(c => setComponents(c.filter(x => x.record_state === 'active' && x.category !== 'Socket'))); }, []);
  const pickCustomer = async (uuid) => { setSel({ ...sel, customer_uuid: uuid }); const h = await customerService.history(uuid); setLimbs(h.limbs.filter(x => x.record_state === 'active')); setProstheses(h.prostheses.filter(x => x.record_state === 'active')); setStep(1); };
  const start = async () => { const component = components.find(c => c.uuid === sel.component_uuid); const tasks = await dimensionAnalysis.buildWorkflow(component); const session = await dimensionService.createSession('component_envelope', { customer_uuid: sel.customer_uuid, limb_profile_uuid: sel.limb_uuid, component_uuid: sel.component_uuid }, 'Ray'); navigate(`/measurements/${session.uuid}`); };
  const steps = [
    { label: 'Select customer', render: () => customers.map(c => <button key={c.uuid} className="choice-card w-full" onClick={() => pickCustomer(c.uuid)}><span>{c.full_name}</span></button>) },
    { label: 'Select limb profile', render: () => limbs.length === 0 ? <p className="text-sm text-slate-400">No limb profiles found for this customer.</p> : limbs.map(l => <button key={l.uuid} className="choice-card w-full" onClick={() => { setSel({ ...sel, limb_uuid: l.uuid }); setStep(2); }}><span>{l.profile_name} — {l.configuration}</span></button>) },
    { label: 'Select prosthesis', render: () => prostheses.length === 0 ? <p className="text-sm text-slate-400">No prostheses found. Continue to component selection.</p> : prostheses.map(p => <button key={p.uuid} className="choice-card w-full" onClick={() => { setSel({ ...sel, prosthesis_uuid: p.uuid }); setStep(3); }}><span>{p.name} — {p.manufacturer} {p.model}</span></button>) },
    { label: 'Select component', render: () => components.map(c => <button key={c.uuid} className={`choice-card w-full ${sel.component_uuid === c.uuid ? 'border-violet-400/50' : ''}`} onClick={() => setSel({ ...sel, component_uuid: c.uuid })}><span>{c.manufacturer} {c.model} {c.variant || ''}</span></button>) },
  ];
  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4"><div className="panel w-full max-w-2xl p-6"><div className="mb-4 flex items-center justify-between"><h2 className="text-xl font-semibold text-white">Start dimension workflow</h2><button className="icon-btn" onClick={onClose}><X /></button></div><p className="mb-4 text-sm text-slate-400">{steps[step].label}</p><div className="max-h-96 space-y-2 overflow-y-auto">{steps[step].render()}</div><div className="mt-4 flex justify-between">{step > 0 && <button className="btn-secondary" onClick={() => setStep(step - 1)}>Back</button>}{step < 3 && step > 0 && <button className="btn-primary" onClick={() => setStep(step + 1)}>Continue<ChevronRight /></button>}{step === 3 && <button className="btn-primary" disabled={!sel.component_uuid} onClick={start}>Start workflow<ChevronRight /></button>}</div></div></div>
  );
}