// flow-shipments.jsx — Shipments list view

const { SHIPMENTS: SHIPMENTS_LIST } = window.FLOW_DATA;

const FILTER_DEFS = [
  { key: 'status', label: 'Status', options: [
    { v: 'all', l: 'All' },
    { v: 'in_transit', l: 'In transit' },
    { v: 'delayed', l: 'Delayed' },
    { v: 'blocked', l: 'Blocked' },
    { v: 'delivered', l: 'Delivered' },
    { v: 'planned', l: 'Planned' },
  ]},
  { key: 'origin', label: 'Origin', options: [
    { v: 'all', l: 'All countries' },
    { v: 'TUR', l: 'Turkey' },
    { v: 'DEU', l: 'Germany' },
    { v: 'IND', l: 'India' },
    { v: 'CHN', l: 'China' },
    { v: 'NLD', l: 'Netherlands' },
    { v: 'FRA', l: 'France' },
    { v: 'ITA', l: 'Italy' },
    { v: 'POL', l: 'Poland' },
    { v: 'GRC', l: 'Greece' },
  ]},
  { key: 'adr', label: 'ADR', options: [
    { v: 'all', l: 'Any' },
    { v: 'yes', l: 'ADR only' },
    { v: 'no',  l: 'Non-ADR' },
  ]},
  { key: 'risk', label: 'Risk', options: [
    { v: 'all', l: 'Any risk' },
    { v: 'high', l: 'At-risk' },
    { v: 'crit', l: 'Critical' },
  ]},
];

const ShipmentRow = ({ s, selected, onSelect, onOpen, onCheck }) => {
  const eta = s.delivery.etaShift || '—';
  const etaTone = !s.delivery.etaShift ? '' :
    s.delivery.etaShift === 'on time' ? 'var(--success)' :
    s.delivery.etaShift.startsWith('+1d') || s.delivery.etaShift.startsWith('+2d') ? 'var(--danger-700)' :
    'var(--warning-700)';

  const gateOk = Object.values(s.gates).every((g) => g === 'pass' || g === 'na');
  const gateChip = gateOk
    ? <span className="badge badge-success"><I.check size={11}/>5/5</span>
    : Object.values(s.gates).includes('fail')
    ? <span className="badge badge-danger"><I.x size={11}/>fail</span>
    : <span className="badge badge-warning">warn</span>;

  const ftChip = s.freeTimeRisk === 'crit' ? <span className="badge badge-danger"><span className="dot"/>91%</span>
    : s.freeTimeRisk === 'high' ? <span className="badge badge-warning"><span className="dot"/>72%</span>
    : <span className="badge badge-neutral">—</span>;

  return (
    <tr className={selected ? 'selected' : ''} onClick={() => onOpen?.(s)} style={{ cursor: 'pointer' }}>
      <td onClick={(e) => { e.stopPropagation(); onCheck?.(s); }} style={{ width: 32 }}>
        <input type="checkbox" checked={selected} readOnly style={{ accentColor: 'hsl(220 70% 35%)' }} />
      </td>
      <td style={{ width: 150 }}>
        <div className="col gap-1">
          <div className="mono fw-600 text-sm">{s.id}</div>
          {s.mrn && <div className="mono text-xs text-muted ellipsis" style={{ maxWidth: 140 }}>MRN {s.mrn}</div>}
        </div>
      </td>
      <td>
        <div className="row gap-2" style={{ alignItems: 'center', minWidth: 0 }}>
          <CountryFlag code={s.lane.fromCC} />
          <div className="col" style={{ minWidth: 0 }}>
            <div className="text-sm fw-500 ellipsis">{s.lane.from}</div>
            <div className="text-xs text-muted">→ {s.lane.to}</div>
          </div>
          <CountryFlag code={s.lane.toCC} />
        </div>
      </td>
      <td><StatusBadge status={s.status} /></td>
      <td className="text-sm mono num">{s.pickup.actual?.slice(5,16) || s.pickup.planned?.slice(5,16)}</td>
      <td className="text-sm mono num">{s.delivery.planned?.slice(5,16)}</td>
      <td className="text-sm" style={{ color: etaTone || 'inherit', fontWeight: etaTone ? 600 : 400 }}>{eta}</td>
      <td>
        <div className="col" style={{ minWidth: 0 }}>
          <div className="text-sm ellipsis" style={{ maxWidth: 160 }}>{s.carrier}</div>
          <div className="text-xs text-muted mono">{s.vehicle}</div>
        </div>
      </td>
      <td>
        {s.adr.is
          ? <span className="badge badge-warning">ADR {s.adr.classes.join(',')}</span>
          : <span className="text-xs text-muted">—</span>}
      </td>
      <td>{gateChip}</td>
      <td>{ftChip}</td>
      <td style={{ width: 28, textAlign: 'right' }} onClick={(e) => e.stopPropagation()}>
        <button className="btn btn-ghost btn-icon btn-sm"><I.more size={14} /></button>
      </td>
    </tr>
  );
};

const ShipmentsList = ({ onOpen }) => {
  const [filters, setFilters] = useState({ status: 'all', origin: 'all', adr: 'all', risk: 'all' });
  const [search, setSearch] = useState('');
  const [selected, setSelected] = useState(new Set());

  const filtered = useMemo(() => SHIPMENTS_LIST.filter((s) => {
    if (filters.status !== 'all' && s.status !== filters.status) return false;
    if (filters.origin !== 'all' && s.lane.fromCC !== filters.origin) return false;
    if (filters.adr === 'yes' && !s.adr.is) return false;
    if (filters.adr === 'no'  && s.adr.is) return false;
    if (filters.risk === 'high' && !['high','crit'].includes(s.freeTimeRisk)) return false;
    if (filters.risk === 'crit' && s.freeTimeRisk !== 'crit') return false;
    if (search) {
      const q = search.toLowerCase();
      const hay = [s.id, s.mrn, s.lane.from, s.lane.to, s.carrier].filter(Boolean).join(' ').toLowerCase();
      if (!hay.includes(q)) return false;
    }
    return true;
  }), [filters, search]);

  const toggleAll = () => {
    if (selected.size === filtered.length) setSelected(new Set());
    else setSelected(new Set(filtered.map((s) => s.id)));
  };
  const toggleOne = (s) => {
    const n = new Set(selected);
    n.has(s.id) ? n.delete(s.id) : n.add(s.id);
    setSelected(n);
  };

  return (
    <div className="col" style={{ padding: '20px 24px', gap: 16, height: '100%', minHeight: 0 }}>
      <SectionHeader
        title="Shipments"
        subtitle={`${SHIPMENTS_LIST.length} active · 12 delivered this week · 2 blocked`}
        right={
          <div className="row gap-2">
            <div className="row gap-1" style={{ background: 'var(--surface-2)', borderRadius: 8, padding: 2, border: '1px solid var(--border)' }}>
              <button className="btn btn-xs btn-ghost" style={{ background: 'white', boxShadow: 'var(--shadow-sm)' }}>List</button>
              <button className="btn btn-xs btn-ghost">Map</button>
              <button className="btn btn-xs btn-ghost">Kanban</button>
            </div>
            <button className="btn btn-sm"><I.download size={14}/>Export CSV</button>
            <button className="btn btn-sm btn-primary"><I.plus size={14}/>New shipment</button>
          </div>
        }
      />

      {/* Filter bar */}
      <Card style={{ padding: 12 }}>
        <div className="row gap-3" style={{ alignItems: 'center', flexWrap: 'wrap' }}>
          <div className="row gap-2" style={{ alignItems: 'center', height: 34, padding: '0 10px', borderRadius: 8, border: '1px solid var(--border-strong)', background: 'var(--surface-solid)', flex: '1 1 320px', maxWidth: 420 }}>
            <I.search size={15} className="text-muted" />
            <input className="flex-1" style={{ border: 0, outline: 0, font: 'inherit', background: 'transparent' }}
                   placeholder="Shipment #, MRN, container, supplier…" value={search} onChange={(e) => setSearch(e.target.value)} />
            {search && <button className="btn btn-ghost btn-icon btn-xs" onClick={() => setSearch('')}><I.x size={12}/></button>}
          </div>

          {FILTER_DEFS.map((f) => (
            <FilterDropdown key={f.key} f={f} value={filters[f.key]} onChange={(v) => setFilters((s) => ({ ...s, [f.key]: v }))} />
          ))}

          <button className="chip"><I.plus size={12}/>More filters</button>
          <div className="flex-1" />
          <button className="btn btn-ghost btn-sm"><I.sliders size={14}/>Columns</button>
        </div>

        {/* active chips */}
        {(Object.entries(filters).some(([k, v]) => v !== 'all') || search) && (
          <div className="row gap-2" style={{ marginTop: 10, flexWrap: 'wrap' }}>
            {search && (
              <span className="chip active" onClick={() => setSearch('')}>
                Search: "{search}"<span className="chip-clear"><I.x size={9}/></span>
              </span>
            )}
            {FILTER_DEFS.flatMap((f) => filters[f.key] !== 'all' ? [
              <span key={f.key} className="chip active" onClick={() => setFilters((s) => ({ ...s, [f.key]: 'all' }))}>
                {f.label}: {f.options.find((o) => o.v === filters[f.key])?.l}
                <span className="chip-clear"><I.x size={9}/></span>
              </span>
            ] : [])}
            <button className="btn btn-ghost btn-xs" onClick={() => { setFilters({ status: 'all', origin: 'all', adr: 'all', risk: 'all' }); setSearch(''); }}>Clear all</button>
          </div>
        )}
      </Card>

      {/* Bulk action bar */}
      {selected.size > 0 && (
        <div className="row gap-3" style={{
          padding: '10px 14px', borderRadius: 10, background: 'var(--primary-50)',
          border: '1px solid hsl(220 60% 84%)', alignItems: 'center',
        }}>
          <div className="text-sm fw-600" style={{ color: 'var(--primary-700)' }}>{selected.size} selected</div>
          <div className="vdivider" style={{ height: 18 }} />
          <button className="btn btn-sm">Assign carrier</button>
          <button className="btn btn-sm">Change status</button>
          <button className="btn btn-sm">Generate report</button>
          <button className="btn btn-sm">Export CSV</button>
          <div className="flex-1" />
          <button className="btn btn-ghost btn-sm" onClick={() => setSelected(new Set())}>Clear</button>
        </div>
      )}

      {/* Table */}
      <Card style={{ padding: 0, overflow: 'hidden', minHeight: 0, flex: 1, display: 'flex', flexDirection: 'column' }}>
        <div style={{ overflow: 'auto', flex: 1, minHeight: 0 }}>
          <table className="table">
            <thead>
              <tr>
                <th style={{ width: 32 }}>
                  <input type="checkbox" checked={selected.size === filtered.length && filtered.length > 0} onChange={toggleAll} style={{ accentColor: 'hsl(220 70% 35%)' }} />
                </th>
                <th>Shipment</th>
                <th>Lane</th>
                <th>Status</th>
                <th>Pickup</th>
                <th>Delivery (planned)</th>
                <th>ETA shift</th>
                <th>Carrier</th>
                <th>ADR</th>
                <th>Gates</th>
                <th>FT risk</th>
                <th />
              </tr>
            </thead>
            <tbody>
              {filtered.map((s) => (
                <ShipmentRow key={s.id} s={s}
                  selected={selected.has(s.id)}
                  onCheck={toggleOne}
                  onOpen={onOpen} />
              ))}
              {filtered.length === 0 && (
                <tr><td colSpan={12} style={{ padding: 60, textAlign: 'center' }}>
                  <div className="col gap-2" style={{ alignItems: 'center', color: 'var(--muted)' }}>
                    <I.search size={28} />
                    <div className="fw-600" style={{ color: 'var(--ink)' }}>No shipments match these filters.</div>
                    <div className="text-sm">Try clearing filters or searching by MRN.</div>
                  </div>
                </td></tr>
              )}
            </tbody>
          </table>
        </div>
        <div className="row gap-3" style={{ padding: '10px 14px', borderTop: '1px solid var(--border)', alignItems: 'center', background: 'hsl(220 30% 98%)' }}>
          <div className="text-xs text-muted">{filtered.length} of {SHIPMENTS_LIST.length} shipments</div>
          <div className="flex-1" />
          <div className="row gap-1" style={{ alignItems: 'center' }}>
            <button className="btn btn-ghost btn-xs" disabled><I.chevLeft size={12}/>Prev</button>
            <button className="btn btn-xs" style={{ minWidth: 26 }}>1</button>
            <button className="btn btn-ghost btn-xs" style={{ minWidth: 26 }}>2</button>
            <button className="btn btn-ghost btn-xs" style={{ minWidth: 26 }}>3</button>
            <button className="btn btn-ghost btn-xs">Next<I.chevRight size={12}/></button>
          </div>
        </div>
      </Card>
    </div>
  );
};

const FilterDropdown = ({ f, value, onChange }) => {
  const [open, setOpen] = useState(false);
  const ref = useRef(null);
  useEffect(() => {
    const onDoc = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
    document.addEventListener('mousedown', onDoc); return () => document.removeEventListener('mousedown', onDoc);
  }, []);
  const cur = f.options.find((o) => o.v === value);
  const isAll = value === 'all';
  return (
    <div ref={ref} style={{ position: 'relative' }}>
      <button className={`chip ${!isAll ? 'active' : ''}`} onClick={() => setOpen((o) => !o)}>
        <span>{f.label}{!isAll ? ': ' + cur?.l : ''}</span>
        <I.chevDown size={11} />
      </button>
      {open && (
        <div className="glass-card" style={{ position: 'absolute', top: 'calc(100% + 4px)', left: 0, padding: 4, minWidth: 180, zIndex: 20, background: 'white' }}>
          {f.options.map((o) => (
            <button key={o.v}
                    className="row gap-2"
                    style={{
                      width: '100%', padding: '7px 10px', borderRadius: 6, border: 0,
                      background: o.v === value ? 'var(--primary-50)' : 'transparent',
                      color: o.v === value ? 'var(--primary-700)' : 'var(--ink)',
                      cursor: 'pointer', font: 'inherit', textAlign: 'left', fontSize: 13,
                      alignItems: 'center',
                    }}
                    onClick={() => { onChange(o.v); setOpen(false); }}>
              <span className="flex-1">{o.l}</span>
              {o.v === value && <I.check size={13} />}
            </button>
          ))}
        </div>
      )}
    </div>
  );
};

window.ShipmentsList = ShipmentsList;