import { Link } from 'react-router-dom';
import { Archive, RotateCcw } from 'lucide-react';
import StatusPill from '@/components/workshop/StatusPill';
import OriginBadge from '@/components/workshop/OriginBadge';
export default function ManufacturingJobCard({ job, order, project, onToggle }) {
  const archived = job.record_state === 'archived';
  const tone = job.status === 'Complete' || job.status === 'Passed' ? 'green' : job.status === 'Print failed' || job.status === 'Failed' || job.status === 'Reprint required' ? 'red' : archived ? 'slate' : 'amber';
  return <Link to={`/manufacturing/${job.uuid}`} className="panel block p-5 transition hover:border-shire-purple/40"><div className="flex items-start justify-between gap-3"><div><p className="text-xs font-semibold text-violet-400">{job.job_reference}</p><h2 className="mt-1 font-semibold text-white">{project?.project_id || 'Project'}</h2><p className="text-xs text-slate-500">{order?.order_number || 'No order linked'}</p></div><div className="flex flex-col items-end gap-1"><StatusPill tone={tone}>{archived ? 'Archived' : job.status}</StatusPill><OriginBadge record={job} /></div></div><dl className="mt-4 grid grid-cols-2 gap-x-4 gap-y-1 text-sm text-slate-400"><dt className="text-slate-500">Printer</dt><dd>{job.printer || '—'}</dd><dt className="text-slate-500">Material</dt><dd>{job.material || '—'}</dd><dt className="text-slate-500">Started</dt><dd>{job.started_date || '—'}</dd><dt className="text-slate-500">Completed</dt><dd>{job.completed_date || '—'}</dd></dl><div className="mt-4 flex items-center gap-2"><span className="btn-secondary flex-1 text-center text-sm">Open job</span>{onToggle && <button onClick={(e) => { e.preventDefault(); onToggle(job); }} className="icon-btn" aria-label={archived ? 'Restore job' : 'Archive job'}>{archived ? <RotateCcw /> : <Archive />}</button>}</div></Link>;
}