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 OrderCard({ order, customer, project, onToggle }) {
  const archived = order.record_state === 'archived';
  const cancelled = !!order.cancel_reason;
  const tone = archived || cancelled ? 'slate' : order.production_status === 'Complete' || order.shipping_status === 'Delivered' ? 'green' : order.payment_status === 'Paid' ? 'green' : 'amber';
  return <Link to={`/orders/${order.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">{order.order_number}</p><h2 className="mt-1 font-semibold text-white">{customer?.full_name || 'Unknown customer'}</h2><p className="text-xs text-slate-500">{project?.project_id} · Rev {order.cover_revision || project?.revision}</p></div><div className="flex flex-col items-end gap-1"><StatusPill tone={tone}>{cancelled ? 'Cancelled' : archived ? 'Archived' : order.production_status}</StatusPill><OriginBadge record={order} /></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">Payment</dt><dd>{order.payment_status || 'Unpaid'}</dd><dt className="text-slate-500">Funding</dt><dd>{order.funding_approval_status || 'Not requested'}</dd><dt className="text-slate-500">Shipping</dt><dd>{order.shipping_status || 'Not started'}</dd><dt className="text-slate-500">Due</dt><dd>{order.due_date || '—'}</dd></dl><div className="mt-4 flex items-center gap-2"><span className="btn-secondary flex-1 text-center text-sm">Open order</span>{onToggle && <button onClick={(e) => { e.preventDefault(); onToggle(order); }} className="icon-btn" aria-label={archived ? 'Restore order' : 'Archive order'}>{archived ? <RotateCcw /> : <Archive />}</button>}</div></Link>;
}