// admin/pages/dashboard.jsx — Owner Command Center (real data only)

function DashboardPage({ go }) {
  const admin = useAdmin();
  const [period, setPeriod] = React.useState('30d');
  const m = OwnerMetrics.computeMetrics(period);
  const insights = OwnerMetrics.rinpoInsights();
  const imports = OwnerOps.loadImportQueue().filter((j) => j.status === 'ready_for_review');
  const intel = window.OwnerIntelligence || null;
  const briefing = intel && intel.dailyBriefing ? intel.dailyBriefing() : null;
  const health = intel && intel.businessHealth ? intel.businessHealth() : null;
  const actions = intel && intel.actionCenter ? intel.actionCenter() : [];

  const kpis = [
    {
      icon: 'rupee',
      label: 'Gross sales',
      value: money(m.grossSales),
      delta:
        m.revenueDeltaPct == null
          ? `Period ${period} · source: orders`
          : `${m.revenueDeltaPct >= 0 ? '+' : ''}${m.revenueDeltaPct.toFixed(0)}% vs prior window`,
      up: (m.revenueDeltaPct || 0) >= 0,
      note: 'Not profit'
    },
    {
      icon: 'box',
      label: 'Orders',
      value: m.orders,
      delta: `${m.toPack} to pack · ${m.toShip} to ship`,
      up: true
    },
    {
      icon: 'tag',
      label: 'Avg order value',
      value: money(m.aov),
      delta: 'From paid/placed order totals',
      up: true
    },
    {
      icon: 'layers',
      label: 'Low / out stock',
      value: m.lowStockCount,
      delta: `${m.outStockCount} out of stock`,
      up: m.lowStockCount === 0
    }
  ];

  const maxRev = Math.max(1, ...m.series.map((s) => s.revenue));

  return (
    <div className="owner-dash">
      <div className="mode-banner" role="status">
        <strong>Operating mode:</strong> Owner mutations run through <code>@rinads/erp-core</code> (RBAC + inventory ledger + fulfilment),
        then persist via Ambady APG adapter. Tenant: Ambady single workspace. Role: <code>admin_legacy</code> until team invites.
        Refunds require explicit confirmation (<code>OwnerOps.confirmRefund</code>); PSP reverse remains blocked.
      </div>

      <div className="spread" style={{ marginBottom: 16, gap: 12, flexWrap: 'wrap' }}>
        <div>
          <h2 className="serif" style={{ fontSize: '1.6rem' }}>Command Center</h2>
          <p className="muted" style={{ fontSize: '.82rem' }}>
            Updated {new Date(m.updatedAt).toLocaleString('en-IN')} · {m.source}
          </p>
        </div>
        <div className="seg-control" role="group" aria-label="Period">
          {['today', '7d', '30d', '90d'].map((p) => (
            <button key={p} className={'seg' + (period === p ? ' on' : '')} onClick={() => setPeriod(p)}>{p}</button>
          ))}
        </div>
      </div>

      <div className="kpi-grid" style={{ marginBottom: 20 }}>
        {kpis.map((k) => (
          <div className="kpi" key={k.label}>
            <div className="kpi__label"><AIcon name={k.icon} />{k.label}</div>
            <div className="kpi__value">{k.value}</div>
            <div className={'kpi__delta ' + (k.up ? 'up' : 'down')}>{k.delta}</div>
            {k.note && <div className="muted" style={{ fontSize: '.7rem', marginTop: 4 }}>{k.note}</div>}
          </div>
        ))}
      </div>

      {window.OwnerErpOps && (() => {
        const opsBrief = OwnerErpOps.dailyBriefing();
        const opsKpis = OwnerErpOps.kpis();
        return (
          <section className="card card-pad" style={{ marginBottom: 20 }}>
            <div className="spread" style={{ marginBottom: 10 }}>
              <div className="section-title" style={{ margin: 0 }}>Operations control tower</div>
              <button className="btn btn-sm btn-primary" onClick={() => go('work-queue')}>Work queue</button>
            </div>
            <div className="kpi-grid">
              <div className="kpi"><div className="kpi__label">Pending fulfilment</div><div className="kpi__value">{opsBrief.pendingFulfilment}</div></div>
              <div className="kpi"><div className="kpi__label">Low stock</div><div className="kpi__value">{opsBrief.lowStock}</div></div>
              <div className="kpi"><div className="kpi__label">Open POs</div><div className="kpi__value">{opsBrief.pendingPurchaseOrders}</div></div>
              <div className="kpi"><div className="kpi__label">Returns</div><div className="kpi__value">{opsBrief.returns}</div></div>
              <div className="kpi"><div className="kpi__label">Net sales (all)</div><div className="kpi__value">{money(opsKpis.netSales)}</div></div>
              <div className="kpi"><div className="kpi__label">Tasks open</div><div className="kpi__value">{opsBrief.tasks}</div></div>
            </div>
            {opsBrief.queueTop && opsBrief.queueTop.length > 0 && (
              <ul className="action-list" style={{ marginTop: 12 }}>
                {opsBrief.queueTop.slice(0, 5).map((q) => (
                  <li key={q.id}><b>{q.priority}</b> · {q.title}</li>
                ))}
              </ul>
            )}
          </section>
        );
      })()}

      {briefing && (
        <section className="card card-pad" style={{ marginBottom: 20 }}>
          <div className="spread" style={{ marginBottom: 10 }}>
            <div className="section-title" style={{ margin: 0 }}>RINPO · {briefing.title}</div>
          </div>
          <ul className="action-list">
            {briefing.lines.map((line, i) => <li key={i}>{line}</li>)}
          </ul>
          {briefing.priorities && briefing.priorities.length > 0 && (
            <p className="muted" style={{ fontSize: '.78rem', marginTop: 10 }}>
              <b>Priority:</b> {briefing.priorities[0]}
            </p>
          )}
        </section>
      )}

      {health && (
        <section className="card card-pad" style={{ marginBottom: 20 }}>
          <div className="section-title">Business health</div>
          <div className="kpi-grid" style={{ marginTop: 8 }}>
            {(health.dimensions || []).map((d) => (
              <div className="kpi" key={d.name}>
                <div className="kpi__label">{d.name}</div>
                <div className="kpi__value">{d.score}/{d.max}</div>
                <div className="muted" style={{ fontSize: '.7rem' }}>{d.explanation}</div>
              </div>
            ))}
          </div>
          <p className="muted" style={{ fontSize: '.72rem', marginTop: 8 }}>Overall {health.overall}/150 — transparent, explainable score from real data.</p>
        </section>
      )}

      {actions.length > 0 && (
        <section className="card card-pad" style={{ marginBottom: 20 }}>
          <div className="spread" style={{ marginBottom: 10 }}>
            <div className="section-title" style={{ margin: 0 }}>RINPO Action Center</div>
            <button className="btn btn-sm btn-soft" onClick={() => go('integrity')}>Data integrity</button>
          </div>
          <div className="card-list">
            {actions.slice(0, 6).map((card) => (
              <div className="card-row" key={card.id} style={{ alignItems: 'flex-start', flexDirection: 'column', gap: 6 }}>
                <div className="spread" style={{ width: '100%' }}>
                  <span className={'badge ' + (card.priority === 'critical' ? 'b-out' : card.priority === 'high' ? 'b-out_for_delivery' : 'b-new')}>{card.title}</span>
                  <span className="muted" style={{ fontSize: '.72rem' }}>{card.priority}</span>
                </div>
                <div>{card.body}</div>
                {card.evidence && card.evidence.length > 0 && (
                  <ul className="muted" style={{ fontSize: '.72rem', paddingLeft: 16, margin: 0 }}>
                    {card.evidence.slice(0, 2).map((e, i) => <li key={i}>{e}</li>)}
                  </ul>
                )}
                <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
                  {(card.actions || []).map((a, i) => (
                    a.actionType === 'navigate' && a.payload && a.payload.href
                      ? <a key={i} className="btn btn-sm btn-soft" href={a.payload.href}>{a.label}</a>
                      : <span key={i} className="btn btn-sm btn-ghost">{a.label}</span>
                  ))}
                </div>
              </div>
            ))}
          </div>
        </section>
      )}

      <div className="cc-grid">
        <section className="card card-pad cc-urgent">
          <div className="section-title">Urgent</div>
          <ul className="action-list">
            {m.lowStockCount > 0 && (
              <li><button className="linkish" onClick={() => go('inventory')}>{m.lowStockCount} low-stock SKUs</button></li>
            )}
            {imports.length > 0 && (
              <li><button className="linkish" onClick={() => go('imports')}>{imports.length} imports need review</button></li>
            )}
            {!m.lowStockCount && !imports.length && <li className="muted">No urgent inventory/import signals.</li>}
          </ul>
        </section>

        <section className="card card-pad">
          <div className="section-title">Today / Pending</div>
          <ul className="action-list">
            <li><button className="linkish" onClick={() => go('orders', { status: 'new' })}>{m.toPack} orders to pack</button></li>
            <li><button className="linkish" onClick={() => go('orders', { status: 'packed' })}>{m.toShip} shipments to dispatch</button></li>
            <li><button className="linkish" onClick={() => go('orders')}>{m.pendingCount} open fulfilment items</button></li>
          </ul>
        </section>

        <section className="card card-pad">
          <div className="section-title">Insights (RINPO read-only)</div>
          <ul className="action-list">
            {insights.tips.map((t, i) => (
              <li key={i}><a href={t.href}>{t.text}</a></li>
            ))}
          </ul>
          <p className="muted" style={{ fontSize: '.72rem', marginTop: 8 }}>{insights.note}</p>
        </section>
      </div>

      <div className="cc-grid-2" style={{ marginTop: 20 }}>
        <div className="card card-pad">
          <div className="spread" style={{ marginBottom: 12 }}>
            <div className="section-title" style={{ margin: 0 }}>Sales ({period})</div>
            <span className="muted" style={{ fontSize: '.72rem' }}>Real order totals — empty days show zero</span>
          </div>
          {m.series.every((s) => s.revenue === 0) ? (
            <Empty icon="rupee" title="No sales in this period" note="Place or seed orders to see the chart." action={<button className="btn btn-soft btn-sm" onClick={() => go('orders')}>Orders</button>} />
          ) : (
            <div className="spark" role="img" aria-label="Sales chart">
              {m.series.map((s) => (
                <div key={s.date} className="spark__col" title={`${s.date}: ${money(s.revenue)} (${s.orders} orders)`}>
                  <div className="spark__bar" style={{ height: Math.max(2, (s.revenue / maxRev) * 120) + 'px' }} />
                </div>
              ))}
            </div>
          )}
        </div>

        <div className="card">
          <div className="panel-head">
            <h2>Top products by revenue</h2>
            <span className="muted" style={{ fontSize: '.72rem' }}>Not profit</span>
          </div>
          {m.topProducts.length === 0 ? (
            <Empty icon="box" title="No product sales yet" note="Revenue leaders appear when orders include line items." />
          ) : (
            <table className="tbl">
              <thead><tr><th>Product</th><th className="num">Units</th><th className="num">Revenue</th></tr></thead>
              <tbody>
                {m.topProducts.map((p) => (
                  <tr key={p.id}>
                    <td>{p.name}</td>
                    <td className="num">{p.units}</td>
                    <td className="num">{money(p.revenue)}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          )}
        </div>
      </div>

      <div className="card" style={{ marginTop: 20 }}>
        <div className="panel-head">
          <h2>Low stock</h2>
          <button className="btn btn-sm btn-soft" onClick={() => go('inventory')}>Inventory</button>
        </div>
        {m.lowStock.length === 0 ? (
          <div className="card-pad muted">No low-stock items.</div>
        ) : (
          <div className="card-list">
            {m.lowStock.slice(0, 8).map((p) => (
              <div className="card-row" key={p.id}>
                <img className="tbl-thumb" src={p.image} alt="" />
                <div style={{ flex: 1, minWidth: 0 }}>
                  <b>{p.name}</b>
                  <div className="muted" style={{ fontSize: '.76rem' }}>{p.sku || p.id}</div>
                </div>
                <StockBadge p={p} />
                <button className="btn btn-sm btn-ghost" onClick={() => go('inventory', { productId: p.id })}>Adjust</button>
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}
window.DashboardPage = DashboardPage;