import { Link } from 'react-router-dom';
import { Archive, RotateCcw } from 'lucide-react';
import StatusPill from '@/components/workshop/StatusPill';
import OriginBadge from '@/components/workshop/OriginBadge';
import { Image } from '@/components/ui/image';
export default function CompletedCoverCard({ cover, customer, project, onToggle }) {
  const archived = cover.record_state === 'archived';
  const tone = cover.inspection_result === 'Passed' && cover.fit_review_result === 'Good fit' ? 'green' : cover.inspection_result === 'Failed' || cover.fit_review_result === 'Refit required' ? 'red' : archived ? 'slate' : 'amber';
  return <Link to={`/completed-covers/${cover.uuid}`} className="panel block overflow-hidden transition hover:border-shire-purple/40"><div className="aspect-video w-full bg-shire-viewport">{cover.preview_image_url ? <Image src={cover.preview_image_url} fittingType="fit" className="h-full w-full" /> : <div className="flex h-full items-center justify-center text-xs text-slate-600">No preview</div>}</div><div className="p-5"><div className="flex items-start justify-between gap-3"><div><p className="text-xs font-semibold text-violet-400">{cover.cover_reference}</p><h2 className="mt-1 font-semibold text-white">{cover.design_name || 'Untitled design'}</h2><p className="text-xs text-slate-500">{customer?.full_name} · {project?.project_id}</p></div><div className="flex flex-col items-end gap-1"><StatusPill tone={tone}>{archived ? 'Archived' : cover.inspection_result || 'Pending'}</StatusPill><OriginBadge record={cover} /></div></div><dl className="mt-3 grid grid-cols-2 gap-x-4 gap-y-1 text-sm text-slate-400"><dt className="text-slate-500">Material</dt><dd>{cover.material || '—'}</dd><dt className="text-slate-500">Colour</dt><dd>{cover.main_colour || '—'}</dd><dt className="text-slate-500">Completed</dt><dd>{cover.completion_date || '—'}</dd><dt className="text-slate-500">Delivered</dt><dd>{cover.delivery_date || '—'}</dd></dl><div className="mt-4 flex items-center gap-2"><span className="btn-secondary flex-1 text-center text-sm">Open cover</span>{onToggle && <button onClick={(e) => { e.preventDefault(); onToggle(cover); }} className="icon-btn" aria-label={archived ? 'Restore cover' : 'Archive cover'}>{archived ? <RotateCcw /> : <Archive />}</button>}</div></div></Link>;
}