/* ========== Dashboard ========== */
function Dashboard({ onNav }) {
  const state = useStore();
  const { customers, orders, invoices, income, expenses, stages, activity } = state;

  // KPIs
  const activeOrders = orders.filter(o => !['delivered','rejected'].includes(o.stage));
  const overdue = orders.filter(o => o.dueAt && o.dueAt < Date.now() && !['delivered','approved','rejected'].includes(o.stage));

  const now = new Date();
  const mStart = new Date(now.getFullYear(), now.getMonth(), 1).getTime();
  const monthIncomeUsd = income.filter(i => i.date >= mStart && i.currency === 'USD').reduce((s,i)=>s+i.amount, 0);
  const monthExpUsd = expenses.filter(e => e.date >= mStart && e.currency === 'USD').reduce((s,e)=>s+e.amount, 0);
  const monthProfitUsd = monthIncomeUsd - monthExpUsd;

  const outstanding = invoices.filter(i => i.status === 'sent').reduce((s,i)=>s+i.total, 0);
  const outstandingCount = invoices.filter(i => i.status === 'sent').length;

  // Pipeline counts
  const pipelineStages = stages.filter(s => !['rejected','delivered'].includes(s.id));
  const stageBuckets = pipelineStages.map(s => ({
    ...s,
    items: orders.filter(o => o.stage === s.id),
  }));

  // Top countries
  const byCountry = {};
  orders.forEach(o => {
    if (!o.country) return;
    byCountry[o.country] = (byCountry[o.country] || 0) + 1;
  });
  const topCountries = Object.entries(byCountry)
    .map(([c, n]) => ({ code: c, count: n, ...state.pricing.find(p=>p.code===c) }))
    .sort((a,b) => b.count - a.count)
    .slice(0, 5);

  return (
    <div>
      <div className="kpi-grid">
        <div className="kpi accent">
          <div className="kpi-label"><span className="dot"/>Active orders</div>
          <div className="kpi-value">{activeOrders.length}</div>
          <div className="kpi-sub">
            {overdue.length > 0
              ? <span className="kpi-trend down"><Icon name="alert" size={12}/> {overdue.length} overdue</span>
              : <span>All on track</span>}
          </div>
        </div>

        <div className="kpi accent-green">
          <div className="kpi-label"><span className="dot" style={{background: 'var(--green-600)'}}/>Revenue this month</div>
          <div className="kpi-value">{fmtMoney(monthIncomeUsd, 'USD')}</div>
          <div className="kpi-sub">
            <span>Expenses {fmtMoney(monthExpUsd, 'USD')} · </span>
            <span className={monthProfitUsd >= 0 ? 'kpi-trend up' : 'kpi-trend down'}>
              Net {fmtMoney(monthProfitUsd, 'USD')}
            </span>
          </div>
        </div>

        <div className="kpi accent-gold">
          <div className="kpi-label"><span className="dot" style={{background: 'var(--gold-500)'}}/>Outstanding invoices</div>
          <div className="kpi-value">{fmtMoney(outstanding, 'USD')}</div>
          <div className="kpi-sub">{outstandingCount} invoice{outstandingCount === 1 ? '' : 's'} awaiting payment</div>
        </div>

        <div className="kpi accent-red">
          <div className="kpi-label"><span className="dot" style={{background: 'var(--red-600)'}}/>Action required</div>
          <div className="kpi-value">{overdue.length}</div>
          <div className="kpi-sub">Orders past their due date</div>
        </div>
      </div>

      <h3 className="section-title">Pipeline</h3>
      <div className="pipeline" style={{ marginBottom: 24 }}>
        {stageBuckets.map(bucket => (
          <div className="pipeline-col" key={bucket.id}>
            <h4>
              <span><span className={`badge ${bucket.color}`} style={{ padding: '2px 8px' }}><span className="dot"/>{bucket.label}</span></span>
              <span className="count">{bucket.items.length}</span>
            </h4>
            {bucket.items.length === 0 ? (
              <div style={{ fontSize: 11, color: 'var(--ink-400)', padding: '8px 4px' }}>No orders</div>
            ) : bucket.items.slice(0, 4).map(o => (
              <div className="pipeline-card" key={o.id} onClick={() => onNav('orders', { orderId: o.id })}>
                <div className="pc-top">
                  <span>{o.orderNo}</span>
                  <span>{o.type === 'visa' ? countryFlag(o.country) : '📝'}</span>
                </div>
                <div className="pc-client">{customerName(o.customerId)}</div>
                <div className="pc-service">{o.title}</div>
                {o.dueAt && (
                  <div className={`pc-due ${o.dueAt < Date.now() && !['delivered','approved'].includes(o.stage) ? 'overdue' : ''}`}>
                    <Icon name="clock" size={11} /> Due {relativeTime(o.dueAt)}
                  </div>
                )}
              </div>
            ))}
            {bucket.items.length > 4 && (
              <button className="btn ghost sm" onClick={() => onNav('orders', { filterStage: bucket.id })}>
                + {bucket.items.length - 4} more
              </button>
            )}
          </div>
        ))}
      </div>

      <div className="split">
        <div className="card">
          <div className="card-header">
            <h3>Needs action this week</h3>
            <div className="spacer"/>
            <button className="btn ghost sm" onClick={() => onNav('orders')}>View all <Icon name="arrowRight" size={12}/></button>
          </div>
          <div className="card-body" style={{ padding: 0 }}>
            <table className="tbl">
              <thead>
                <tr>
                  <th>Order</th>
                  <th>Client</th>
                  <th>Service</th>
                  <th>Stage</th>
                  <th>Due</th>
                </tr>
              </thead>
              <tbody>
                {orders
                  .filter(o => !['delivered','rejected'].includes(o.stage))
                  .sort((a,b) => (a.dueAt||Infinity) - (b.dueAt||Infinity))
                  .slice(0, 6)
                  .map(o => (
                    <tr key={o.id} className="clickable" onClick={() => onNav('orders', { orderId: o.id })}>
                      <td><span className="order-num">{o.orderNo}</span></td>
                      <td>{customerName(o.customerId)}</td>
                      <td>{countryFlag(o.country)} {o.title}</td>
                      <td><StageBadge stageId={o.stage}/></td>
                      <td className={o.dueAt && o.dueAt < Date.now() ? 'num' : 'num'} style={o.dueAt && o.dueAt < Date.now() ? { color: 'var(--red-600)', fontWeight: 600 } : {}}>
                        {o.dueAt ? fmtDateShort(o.dueAt) : '—'}
                      </td>
                    </tr>
                  ))}
              </tbody>
            </table>
          </div>
        </div>

        <div className="row-gap">
          <div className="card">
            <div className="card-header">
              <h3>Top destinations</h3>
            </div>
            <div className="card-body">
              {topCountries.length === 0 && <div className="dim" style={{ fontSize: 13 }}>No data yet.</div>}
              {topCountries.map(c => (
                <div key={c.code} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '7px 0', borderBottom: '1px solid var(--ink-100)' }}>
                  <span style={{ fontSize: 18 }}>{c.flag}</span>
                  <span style={{ fontWeight: 500, flex: 1 }}>{c.name}</span>
                  <span className="badge slate">{c.count}</span>
                </div>
              ))}
            </div>
          </div>

          <div className="card">
            <div className="card-header">
              <h3>Recent activity</h3>
            </div>
            <div className="card-body" style={{ paddingTop: 4, paddingBottom: 4 }}>
              <div className="activity">
                {(activity||[]).slice(0,5).map(a => (
                  <div className="activity-item" key={a.id}>
                    <div className="a-icon">
                      <Icon name={
                        a.type === 'payment' ? 'finance' :
                        a.type === 'invoice_created' ? 'invoice' :
                        a.type === 'order_done' ? 'check' :
                        a.type === 'stage_change' ? 'refresh' :
                        a.type === 'customer_added' ? 'customers' :
                        'orders'
                      } size={14}/>
                    </div>
                    <div className="a-body">
                      <div className="a-text" dangerouslySetInnerHTML={{ __html: a.text }}/>
                      <div className="a-time">{relativeTime(a.ts)}</div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

window.Dashboard = Dashboard;