import { Link } from 'react-router-dom';
import { Archive, RotateCcw, FolderOpen } from 'lucide-react';
import StatusPill from '@/components/workshop/StatusPill';
import OriginBadge from '@/components/workshop/OriginBadge';
export default function CustomerCard({ customer, counts, onToggle }) {
  const archived = customer.record_state === 'archived';
  const returning = (counts?.projects || 0) > 0 || (counts?.covers || 0) > 0;
  return <Link to={`/customers/${customer.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">{customer.customer_number}</p><h2 className="mt-1 text-lg font-semibold text-white">{customer.full_name}</h2>{customer.preferred_name && customer.preferred_name !== customer.full_name && <p className="text-xs text-slate-500">Prefers {customer.preferred_name}</p>}</div><div className="flex flex-col items-end gap-1"><StatusPill tone={archived ? 'slate' : 'green'}>{archived ? 'Archived' : 'Active'}</StatusPill>{returning && <StatusPill tone="cyan">Returning</StatusPill>}<OriginBadge record={customer} /></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">Email</dt><dd className="truncate">{customer.email || '—'}</dd><dt className="text-slate-500">Phone</dt><dd>{customer.phone || '—'}</dd><dt className="text-slate-500">Funding</dt><dd>{customer.funding_method || '—'}</dd><dt className="text-slate-500">Location</dt><dd className="truncate">{customer.address || '—'}</dd></dl><div className="mt-4 flex flex-wrap gap-2 text-xs">{[['Limb profiles', counts?.limbs], ['Projects', counts?.projects], ['Orders', counts?.orders], ['Covers', counts?.covers]].map(([l, v]) => <span key={l} className="rounded-md border border-white/10 bg-white/5 px-2 py-1 text-slate-300">{l}: <span className="font-semibold text-violet-300">{v || 0}</span></span>)}</div><div className="mt-4 flex items-center gap-2"><span className="btn-primary flex-1 text-center text-sm"><FolderOpen />Open Customer</span>{onToggle && <button onClick={(e) => { e.preventDefault(); onToggle(customer); }} className="icon-btn" aria-label={archived ? 'Restore customer' : 'Archive customer'}>{archived ? <RotateCcw /> : <Archive />}</button>}</div></Link>;
}