// TruckOrders.jsx — Owner-side Truck Order management.
//
// Routes inside this feature (controlled by local view state, not URL):
//   list       — table of past orders, "+ New" button (PIN gated)
//   counting   — count sheet, grouped by storage area
//   summary    — finalized order view, grouped by vendor, PDF export per vendor
//   settings   — par config (which items appear; threshold + max per item)
//
// PIN gate is shared: needed to START a new order, and to FINALIZE it.

const { useState: useTO, useMemo: useMemoTO, useEffect: useEffectTO, useRef: useRefTO } = React;

const TRUCK_PARS_KEY      = 'portal_truck_pars_v1';
const TRUCK_ORDERS_KEY    = 'portal_truck_orders_v1';
const TRUCK_DRAFT_KEY     = 'portal_truck_draft_v1';   // in-progress count

const seedTruckPars   = window.SAMPLE_TRUCK_PARS  || {};
const seedTruckOrders = window.SAMPLE_TRUCK_ORDERS || [];

// Shared helpers (defined in TruckOrderShared.jsx, attached to window)
const { toFmtDate, toFmtTime, toFmtDateTime } = window;

// Find an item even if it's been deleted from inventory — we keep a label
// so the log row still makes sense.
const useItemLookup = () => {
  return useMemoTO(() => {
    const map = {};
    (window.SAMPLE_INVENTORY_ITEMS || []).forEach(i => { map[i.id] = i; });
    return map;
  }, []);
};

// ------------------------------------------------------------------
// Top-level
// ------------------------------------------------------------------
const TruckOrders = () => {
  const [tab, setTab] = useTO('orders');
  const [pars, setPars]     = usePersistent(TRUCK_PARS_KEY, seedTruckPars);
  const [orders, setOrders] = usePersistent(TRUCK_ORDERS_KEY, seedTruckOrders);

  // Flow state: 'list' | 'counting' | 'summary'
  const [flow, setFlow] = useTO({ kind: 'list', orderId: null });

  // Active draft (when counting). Persisted so a refresh doesn't lose work.
  const [draft, setDraft] = usePersistent(TRUCK_DRAFT_KEY, null);
  const [pinGate, setPinGate] = useTO(null); // { purpose, onSuccess }

  // Start a new order: PIN gate first.
  const startNewOrder = () => {
    setPinGate({
      purpose: 'Start new truck order',
      onSuccess: (staff) => {
        const items = (window.SAMPLE_INVENTORY_ITEMS || []).filter(i => (pars[i.id] || {}).active !== false);
        const newDraft = {
          id: 'to-' + Date.now().toString(36),
          createdAt: new Date().toISOString(),
          createdByStaffId: staff.id,
          note: '',
          excludedVendorIds: [], // vendors deselected for this run
          lines: items.map(it => ({
            itemId: it.id,
            countStorage: '',
            countPurchase: '',
            skipped: false,            // staff tapped skip; counts as "handled" but no order
            finalOverride: null,       // null means "use suggested"
          })),
        };
        setDraft(newDraft);
        setFlow({ kind: 'counting', orderId: newDraft.id });
        setPinGate(null);
      },
    });
  };

  const continueDraft = () => {
    if (!draft) return;
    setFlow({ kind: 'counting', orderId: draft.id });
  };

  // Update a count or override in the active draft
  const updateDraftLine = (itemId, patch) => {
    setDraft(d => d ? ({ ...d, lines: d.lines.map(l => l.itemId === itemId ? { ...l, ...patch } : l) }) : d);
  };
  const updateDraftMeta = (patch) => setDraft(d => d ? ({ ...d, ...patch }) : d);

  // Finalize the draft into an order log entry.
  const finalize = () => {
    if (!draft) return;
    setPinGate({
      purpose: 'Finalize truck order',
      onSuccess: (staff) => {
        // Drop lines whose item belongs to an excluded vendor before snapshotting.
        const excluded = new Set(draft.excludedVendorIds || []);
        const keptLines = draft.lines.filter(l => {
          if (l.skipped) return false; // skipped lines don't enter the order
          const item = (window.SAMPLE_INVENTORY_ITEMS || []).find(i => i.id === l.itemId);
          return item && !excluded.has(item.vendorId);
        });
        // Snapshot suggestions + final amounts into static numbers.
        const snapshot = {
          ...draft,
          finalizedAt: new Date().toISOString(),
          finalizedByStaffId: staff.id,
          lines: keptLines.map(l => {
            const item = (window.SAMPLE_INVENTORY_ITEMS || []).find(i => i.id === l.itemId);
            const onHand = window.truckOnHand(item, l.countStorage, l.countPurchase);
            const suggested = window.truckSuggested(pars[l.itemId], onHand);
            const final = (l.finalOverride === null || l.finalOverride === undefined || l.finalOverride === '') ? suggested : Number(l.finalOverride);
            return {
              itemId: l.itemId,
              countStorage: Number(l.countStorage) || 0,
              countPurchase: Number(l.countPurchase) || 0,
              suggested,
              final,
              overridden: final !== suggested,
            };
          }),
        };
        // Strip any helper fields the log doesn't need.
        delete snapshot.lines.finalOverride;
        setOrders(prev => [snapshot, ...prev]);
        setDraft(null);
        setFlow({ kind: 'summary', orderId: snapshot.id });
        setPinGate(null);
      },
    });
  };

  const cancelDraft = () => {
    if (!confirm('Discard this count? All entered counts will be lost.')) return;
    setDraft(null);
    setFlow({ kind: 'list' });
  };

  const viewOrder = (id) => setFlow({ kind: 'summary', orderId: id });
  const backToList = () => setFlow({ kind: 'list' });

  // Find the order to render in summary view
  const summaryOrder = useMemoTO(() => {
    if (flow.kind !== 'summary') return null;
    return orders.find(o => o.id === flow.orderId);
  }, [flow, orders]);

  // ---- counting view: full-screen takeover (no tabs visible during count) ----
  if (flow.kind === 'counting' && draft) {
    return (
      <CountingScreen
        draft={draft}
        pars={pars}
        onUpdateLine={updateDraftLine}
        onUpdateMeta={updateDraftMeta}
        onCancel={cancelDraft}
        onFinalize={finalize}
        pinGate={pinGate}
        setPinGate={setPinGate}
      />
    );
  }

  // ---- summary view ----
  if (flow.kind === 'summary' && summaryOrder) {
    return (
      <OrderSummaryView
        order={summaryOrder}
        onBack={backToList}
        onDelete={() => {
          if (!confirm('Delete this order from the log? This cannot be undone.')) return;
          setOrders(prev => prev.filter(o => o.id !== summaryOrder.id));
          backToList();
        }}
      />
    );
  }

  // ---- list / settings tab view ----
  return (
    <div className="portal-page-wide" style={{ maxWidth: 1320 }}>
      <div className="portal-page-header" style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 24, flexWrap: 'wrap' }}>
        <div>
          <h1 className="portal-page-title">Truck Order</h1>
          <div className="portal-page-sub">Count what's on hand, auto-calculate the next order, finalize and export by vendor.</div>
        </div>
        <div style={{ display: 'flex', gap: 8 }}>
          {draft && (
            <PBtn variant="ghost" onClick={continueDraft}>
              <PIcon name="edit" size={13} />
              Resume count
            </PBtn>
          )}
          <PBtn variant="primary" onClick={startNewOrder}>
            <PIcon name="plus" size={14} />
            New truck order
          </PBtn>
        </div>
      </div>

      <div style={{
        display: 'flex', gap: 0,
        borderBottom: '1px solid var(--border-2)',
        marginTop: 18, marginBottom: 24,
      }}>
        {[
          { id: 'orders',   label: 'Orders',       count: orders.length },
          { id: 'settings', label: 'Par Settings', count: Object.keys(pars).length },
        ].map(t => (
          <button key={t.id} onClick={() => setTab(t.id)} style={{
            padding: '10px 16px',
            background: 'transparent',
            border: 'none',
            borderBottom: '2px solid ' + (tab === t.id ? 'var(--fg-1)' : 'transparent'),
            marginBottom: -1,
            color: tab === t.id ? 'var(--fg-1)' : 'var(--fg-2)',
            fontSize: 14, fontWeight: tab === t.id ? 600 : 500,
            cursor: 'pointer',
            display: 'inline-flex', alignItems: 'center', gap: 8,
          }}>
            {t.label}
            <span style={{
              fontSize: 11, fontWeight: 600, color: 'var(--fg-3)',
              background: 'var(--bg-sunken)', padding: '1px 7px', borderRadius: 999,
              fontFamily: 'var(--font-num)',
            }}>{t.count}</span>
          </button>
        ))}
      </div>

      {tab === 'orders'   && <OrdersList orders={orders} onView={viewOrder} draft={draft} onResume={continueDraft} />}
      {tab === 'settings' && <ParSettings pars={pars} setPars={setPars} />}

      {pinGate && (
        <PinGate
          purpose={pinGate.purpose}
          onCancel={() => setPinGate(null)}
          onSuccess={pinGate.onSuccess}
        />
      )}
    </div>
  );
};

// ------------------------------------------------------------------
// Orders list
// ------------------------------------------------------------------
const OrdersList = ({ orders, onView, draft, onResume }) => {
  const itemMap = useItemLookup();

  if (orders.length === 0 && !draft) {
    return <div className="portal-empty"><div style={{ fontSize: 14, color: 'var(--fg-2)' }}>No truck orders yet.</div></div>;
  }

  return (
    <div>
      {draft && (
        <button onClick={onResume} style={{
          width: '100%',
          textAlign: 'left',
          padding: '14px 16px',
          marginBottom: 14,
          background: '#FFF8EC',
          border: '1px solid #F0CB7D',
          borderRadius: 10,
          cursor: 'pointer',
          display: 'flex', alignItems: 'center', gap: 12,
        }}>
          <span style={{
            fontSize: 10, fontWeight: 700, color: '#92400E',
            background: '#FDE68A', padding: '3px 8px', borderRadius: 4,
            letterSpacing: '0.06em',
          }}>IN PROGRESS</span>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 13.5, fontWeight: 600, color: 'var(--fg-1)' }}>Truck order in progress</div>
            <div style={{ fontSize: 12, color: 'var(--fg-2)', marginTop: 2 }}>
              Started {toFmtDateTime(draft.createdAt)} ·{' '}
              {draft.lines.filter(l => l.countStorage !== '' || l.countPurchase !== '').length} of {draft.lines.length} items counted
            </div>
          </div>
          <PIcon name="chevronR" size={16} color="var(--fg-2)" />
        </button>
      )}

      {orders.length > 0 && (
        <div style={{
          background: '#FFFFFF',
          border: '1px solid var(--border-2)',
          borderRadius: 10,
          overflow: 'hidden',
        }}>
          <table style={{ borderCollapse: 'collapse', width: '100%' }}>
            <thead>
              <tr style={{ borderBottom: '1px solid var(--border-2)', background: '#FAFAF9' }}>
                {['Date', 'Finalized by', 'Items', 'Total to order', 'Overrides', ''].map((h, i) => (
                  <th key={i} style={{ textAlign: i === 5 ? 'center' : 'left', padding: '10px 14px', fontSize: 11, fontWeight: 600, color: 'var(--fg-2)', textTransform: 'uppercase', letterSpacing: '0.06em', whiteSpace: 'nowrap' }}>{h}</th>
                ))}
              </tr>
            </thead>
            <tbody>
              {orders.map(o => {
                const finalizer = window.SAMPLE_STAFF.find(s => s.id === o.finalizedByStaffId);
                const totalOrderedLines = o.lines.filter(l => l.final > 0).length;
                const overrides = o.lines.filter(l => l.overridden).length;
                const totalCount = o.lines.length;
                return (
                  <tr key={o.id}
                    onClick={() => onView(o.id)}
                    style={{ borderBottom: '1px solid var(--border-2)', cursor: 'pointer' }}
                    onMouseEnter={e => e.currentTarget.style.background = '#FBFAF8'}
                    onMouseLeave={e => e.currentTarget.style.background = 'transparent'}
                  >
                    <td style={{ padding: '12px 14px' }}>
                      <div style={{ fontSize: 13.5, fontWeight: 600, color: 'var(--fg-1)' }}>{toFmtDate(o.finalizedAt)}</div>
                      <div style={{ fontSize: 11.5, color: 'var(--fg-3)', marginTop: 2, fontFamily: 'var(--font-num)' }}>
                        {toFmtTime(o.finalizedAt)}
                      </div>
                    </td>
                    <td style={{ padding: '12px 14px' }}>
                      {finalizer ? (
                        <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
                          <PAvatar staff={finalizer} size={22} />
                          <span style={{ fontSize: 13, fontWeight: 500 }}>{finalizer.name}</span>
                        </div>
                      ) : <span style={{ color: 'var(--fg-3)' }}>—</span>}
                    </td>
                    <td style={{ padding: '12px 14px', fontSize: 13, color: 'var(--fg-2)', fontFamily: 'var(--font-num)' }}>{totalCount}</td>
                    <td style={{ padding: '12px 14px' }}>
                      <span style={{ fontSize: 13, fontWeight: 600, color: 'var(--fg-1)', fontFamily: 'var(--font-num)' }}>{totalOrderedLines}</span>
                      <span style={{ fontSize: 12, color: 'var(--fg-3)' }}> / {totalCount} lines</span>
                    </td>
                    <td style={{ padding: '12px 14px' }}>
                      {overrides > 0 ? (
                        <span style={{
                          fontSize: 11, fontWeight: 600, color: '#92400E',
                          background: '#FDE68A',
                          padding: '2px 8px', borderRadius: 999,
                          fontFamily: 'var(--font-num)',
                        }}>{overrides}</span>
                      ) : (
                        <span style={{ fontSize: 12, color: 'var(--fg-3)' }}>—</span>
                      )}
                    </td>
                    <td style={{ padding: '12px 14px', textAlign: 'center' }}>
                      <PIcon name="chevronR" size={14} color="var(--fg-3)" />
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      )}
    </div>
  );
};

Object.assign(window, { TruckOrders });