import { useEffect, useMemo, useState } from 'react';
import { Search } from 'lucide-react';
import { Link } from 'react-router-dom';
import { Truck } from 'lucide-react';
import PageHeader from '@/components/workshop/PageHeader';
import StatusPill from '@/components/workshop/StatusPill';
import LoadingPanel from '@/components/workshop/LoadingPanel';
import { shipmentService } from '@/services/shipmentService';
import { orderService } from '@/services/orderService';
import { customerService } from '@/services/customerService';
export default function Shipping() {
  const [shipments, setShipments] = useState(null);
  const [orders, setOrders] = useState([]);
  const [customers, setCustomers] = useState([]);
  const [search, setSearch] = useState('');
  useEffect(() => { Promise.all([shipmentService.list(), orderService.list(), customerService.list()]).then(([s, o, c]) => { setShipments(s); setOrders(o); setCustomers(c); }); }, []);
  const ord = (uuid) => orders.find((o) => o.uuid === uuid);
  const cust = (uuid) => customers.find((c) => c.uuid === uuid);
  const shown = useMemo(() => {
    if (!shipments) return [];
    let list = shipments.filter((s) => s.record_state !== 'archived');
    if (search.trim()) { const t = search.toLowerCase(); list = list.filter((s) => (s.shipment_reference || '').toLowerCase().includes(t) || (s.tracking_number || '').toLowerCase().includes(t) || (cust(s.customer_uuid)?.full_name || '').toLowerCase().includes(t)); }
    return list;
  }, [shipments, search, customers]);
  if (!shipments) return <LoadingPanel />;
  return <><PageHeader eyebrow="Dispatch register" title="Shipping" description="Shipments linked to orders and completed covers." /><div className="mb-5"><label className="relative block max-w-md"><Search className="absolute left-3 top-3 h-4 w-4 text-slate-500" /><input className="workshop-input mt-0 pl-10" placeholder="Search tracking number, reference or customer" value={search} onChange={(e) => setSearch(e.target.value)} /></label></div><div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">{shown.map((s) => <Link key={s.uuid} to={`/orders/${s.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">{s.shipment_reference}</p><h2 className="mt-1 font-semibold text-white">{s.recipient || cust(s.customer_uuid)?.full_name || 'Unknown'}</h2><p className="text-xs text-slate-500">{ord(s.order_uuid)?.order_number}</p></div><StatusPill tone={s.status === 'Delivered' ? 'green' : 'amber'}>{s.status}</StatusPill></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">Carrier</dt><dd>{s.carrier || '—'}</dd><dt className="text-slate-500">Tracking</dt><dd className="truncate">{s.tracking_number || '—'}</dd><dt className="text-slate-500">Dispatched</dt><dd>{s.dispatch_date || '—'}</dd><dt className="text-slate-500">Delivered</dt><dd>{s.delivered_date || '—'}</dd></dl><span className="mt-4 inline-flex items-center gap-1 btn-secondary text-sm"><Truck />Open order</span></Link>)}</div>{shown.length === 0 && <p className="mt-8 text-center text-sm text-slate-500">No shipments recorded.</p>}</>;
}