import React, { useState } from 'react'; import { Check, ChevronDown, LoaderCircle } from 'lucide-react';
const stages=['Validate captured frames','Remove background','Filter depth noise','Generate point-cloud segments','Align segments','Refine registration','Remove duplicate points','Estimate normals','Reconstruct surface','Remove unsupported fragments','Fill selected holes','Smooth surface','Reduce polygon count','Restore verified scale','Analyse mesh','Generate preview'];
export default function Processing(){const [logs,setLogs]=useState(false);return <div className="mx-auto max-w-4xl"><p className="text-xs uppercase tracking-[.28em] text-purple-300">Real processing stages</p><h2 className="mt-2 text-3xl font-semibold">Processing Pipeline</h2><p className="mt-2 text-sm text-zinc-500">A completed capture progresses through every stage reported by SHiRE Scan Bridge. It is never labelled printable before analysis finishes.</p><div className="mt-6 space-y-2">{stages.map((s,i)=><div key={s} className="flex items-center gap-4 rounded-xl border border-white/10 bg-[#111114] px-4 py-3"><span className="w-6 text-xs text-zinc-600">{i+1}</span>{i===0?<LoaderCircle className="animate-spin text-purple-300" size={18}/>:<span className="h-4 w-4 rounded-full border border-zinc-700"/>}<span className="flex-1 text-sm">{s}</span><span className={`text-xs uppercase tracking-wider ${i===0?'text-purple-300':'text-zinc-600'}`}>{i===0?'Pending bridge':'Pending'}</span></div>)}</div><button onClick={()=>setLogs(!logs)} className="mt-4 flex w-full items-center justify-between rounded-xl border border-white/10 p-4 text-sm">Processing logs <ChevronDown size={17}/></button>{logs&&<pre className="mt-2 overflow-auto rounded-xl bg-black p-4 text-xs text-zinc-500">No processing job has been started by the bridge.</pre>}</div>}