// Vendor Dashboard — shows orders, balance, history
const { useState: useSt, useEffect: useEf, useMemo: useMe } = React;

const STATUS_LABELS = {
  new: 'New',
  received: 'Received',
  in_production: 'In Production',
  complete: 'Complete',
  delivered: 'Delivered',
};

const STATUS_COLORS = {
  new: '#3b82f6',
  received: '#f59e0b',
  in_production: '#f97316',
  complete: '#22c55e',
  delivered: '#94a3b8',
};

function StatusBadge({ status }) {
  const color = STATUS_COLORS[status] || '#94a3b8';
  return (
    <span className="status-badge" style={{ '--badge-color': color }}>
      {STATUS_LABELS[status] || status}
    </span>
  );
}

function VendorDashboard({ vendorId, vendorName, onNewOrder, onViewOrder }) {
  const [orders, setOrders] = useSt([]);
  const [loading, setLoading] = useSt(true);
  const [filter, setFilter] = useSt('active'); // 'all' | 'active' | 'complete' | 'delivered' | 'drafts'

  useEf(() => {
    if (!vendorId) return;
    const unsub = db.collection('orders')
      .where('vendorId', '==', vendorId)
      .orderBy('createdAt', 'desc')
      .onSnapshot((snap) => {
        const list = snap.docs.map(d => ({ id: d.id, ...d.data() }));
        setOrders(list);
        setLoading(false);
      }, (err) => {
        console.error('Error loading orders:', err);
        setLoading(false);
      });
    return () => unsub();
  }, [vendorId]);

  const filtered = useMe(() => {
    // Drafts are scoped to their own filter — they should NOT appear
    // in 'all' / 'active' since they aren't real orders yet.
    const realOrders = orders.filter(o => o.status !== 'draft');
    if (filter === 'all') return realOrders;
    if (filter === 'active') return realOrders.filter(o => ['new', 'received', 'in_production'].includes(o.status));
    if (filter === 'complete') return realOrders.filter(o => o.status === 'complete');
    if (filter === 'delivered') return realOrders.filter(o => o.status === 'delivered');
    if (filter === 'drafts') return orders.filter(o => o.status === 'draft');
    return realOrders;
  }, [orders, filter]);

  const draftCount = useMe(() => orders.filter(o => o.status === 'draft').length, [orders]);

  const outstanding = useMe(() => {
    return orders.filter(o => o.status !== 'draft' && !o.paid).reduce((sum, o) => sum + (o.estimate?.total || 0), 0);
  }, [orders]);

  const paidTotal = useMe(() => {
    return orders.filter(o => o.paid).reduce((sum, o) => sum + (o.estimate?.total || 0), 0);
  }, [orders]);

  const activeCount = orders.filter(o => o.status !== 'delivered' && o.status !== 'draft').length;

  if (loading) {
    return (
      <div className="dashboard-loading">
        <div className="spinner"></div>
        <p>Loading your orders...</p>
      </div>
    );
  }

  return (
    <div className="dashboard">
      <header className="dash-header">
        <div>
          <h1 className="dash-title">Welcome back</h1>
          <p className="dash-sub">{vendorName}</p>
        </div>
        <button className="btn primary" onClick={onNewOrder}>
          <Icon.Plus /> New Order
        </button>
      </header>

      <div className="dash-cards">
        <div className="dash-card">
          <div className="dash-card-label">Outstanding</div>
          <div className="dash-card-value" style={{ color: 'var(--accent-deep)' }}>{fmtMoney(outstanding)}</div>
          <div className="dash-card-sub">{activeCount} active order{activeCount !== 1 ? 's' : ''}</div>
        </div>
        <div className="dash-card">
          <div className="dash-card-label">Paid</div>
          <div className="dash-card-value" style={{ color: 'oklch(45% 0.15 150)' }}>{fmtMoney(paidTotal)}</div>
          <div className="dash-card-sub">{orders.filter(o => o.paid).length} paid orders</div>
        </div>
        <div className="dash-card">
          <div className="dash-card-label">Total Orders</div>
          <div className="dash-card-value">{orders.length}</div>
          <div className="dash-card-sub">all time</div>
        </div>
      </div>

      <div className="dash-filter-row">
        {['active', 'complete', 'delivered', 'drafts', 'all'].map(f => (
          <button key={f} className={'dash-filter-chip' + (filter === f ? ' active' : '')} onClick={() => setFilter(f)}>
            {f === 'all' ? 'All'
              : f === 'active' ? 'Active'
              : f === 'complete' ? 'Ready'
              : f === 'delivered' ? 'History'
              : `Drafts${draftCount > 0 ? ` (${draftCount})` : ''}`}
          </button>
        ))}
      </div>

      {filtered.length === 0 ? (
        <div className="dash-empty">
          <p>
            {filter === 'active' ? 'No active orders.'
              : filter === 'complete' ? 'No orders ready for pickup.'
              : filter === 'delivered' ? 'No past orders yet.'
              : filter === 'drafts' ? 'No saved drafts. Start a new order and click "Save as Draft" to keep your work.'
              : 'No orders yet.'}
          </p>
          {filter !== 'all' && <button className="btn ghost" onClick={() => setFilter('all')}>Show all orders</button>}
        </div>
      ) : (
        <div className="dash-orders-list">
          {filtered.map(order => {
            const isDraft = order.status === 'draft';
            const open = () => isDraft ? navigate('/drafts/' + order.id) : onViewOrder(order.id);
            const lastMarkup = (order.markupHistory && order.markupHistory.length > 0)
              ? order.markupHistory[order.markupHistory.length - 1] : null;
            return (
              <button key={order.id} className="dash-order-row" onClick={open}>
                <div className="dash-order-num mono">{isDraft ? 'DRAFT' : (order.orderNumber || '—')}</div>
                <div className="dash-order-info">
                  <div className="dash-order-client">{order.clientName || 'No customer'}</div>
                  <div className="dash-order-addr">{order.address || ''}</div>
                </div>
                <div className="dash-order-meta">
                  <div style={{ display: 'flex', gap: 4, alignItems: 'center', flexWrap: 'wrap' }}>
                    <StatusBadge status={order.status} />
                    {order.paid && <span className="status-badge" style={{ '--badge-color': '#22c55e', fontSize: 9 }}>PAID</span>}
                    {lastMarkup && (
                      <span className="status-badge" style={{ '--badge-color': '#b08720', fontSize: 9 }}>
                        +{lastMarkup.percent}% mkup
                      </span>
                    )}
                  </div>
                  <div className="dash-order-total mono">
                    {fmtMoney((lastMarkup ? lastMarkup.markedUpTotal : order.estimate?.total) || 0)}
                  </div>
                  <div className="dash-order-date">{order.dateReceived || ''}</div>
                </div>
              </button>
            );
          })}
        </div>
      )}
    </div>
  );
}

Object.assign(window, { VendorDashboard, StatusBadge, STATUS_LABELS, STATUS_COLORS });