// Dashboard — admin overview
const { useState: useStateD } = React;

function StatusDot({ status }) {
  const cls = status === "critical" ? "crit" : status === "warning" ? "warn" : "ok";
  return <span className={`pill ${cls}`}><span className="dot"></span>{status === "critical" ? "Critical" : status === "warning" ? "Warning" : "Operational"}</span>;
}

function KpiCard({ label, value, unit, delta, deltaLabel, sparkData, sparkColor }) {
  const isDown = delta && delta.startsWith("-");
  return (
    <div className="kpi">
      <div className="kpi-label">{label}</div>
      <div className="kpi-value">{value}{unit && <span className="unit">{unit}</span>}</div>
      {delta && (
        <div className={`kpi-delta ${isDown ? "down" : ""}`}>
          <Icon name={isDown ? "trendDown" : "trendUp"} size={12} />
          {delta} <span className="muted" style={{fontWeight: 400, marginLeft: 2}}>{deltaLabel}</span>
        </div>
      )}
      {sparkData && <div className="kpi-spark"><Spark data={sparkData} color={sparkColor || "var(--ink-2)"} /></div>}
    </div>
  );
}

function AgentCard({ agent, onOpen }) {
  return (
    <div className="agent-card" onClick={() => onOpen(agent.id)}>
      <div className="agent-card-head">
        <div className="agent-icon"><Icon name={agent.icon} size={18} /></div>
        <StatusDot status={agent.status} />
      </div>
      <div>
        <h3>{agent.name}</h3>
        <p>{agent.desc}</p>
      </div>
      <div className="agent-card-stats">
        <div className="agent-stat">
          <div className="agent-stat-v tabular">{fmt(agent.today.processed, { compact: true })}</div>
          <div className="agent-stat-l">{agent.id === "sku" ? "SKUs tracked" : "Processed today"}</div>
        </div>
        <div className="agent-stat">
          <div className="agent-stat-v tabular">{agent.accuracy}%</div>
          <div className="agent-stat-l">Accuracy</div>
        </div>
        <div className="agent-stat" style={{marginLeft: "auto"}}>
          <div style={{color: agent.today.exceptions > 5 ? "var(--crit)" : "var(--muted)", fontWeight: 600}} className="tabular">{agent.today.exceptions}</div>
          <div className="agent-stat-l">{agent.today.exceptions > 5 ? "Issues" : "Exceptions"}</div>
        </div>
      </div>
    </div>
  );
}

function Dashboard({ setRoute, tweaks }) {
  const d = window.DEMO_DATA;
  const m = d.metrics;

  // Spend trend mock for chart
  const trend = [820, 940, 880, 1020, 1180, 1106, 1247];
  const savings = [4.2, 5.8, 12.4, 18.9, 24.1, 31.8, 188.1];
  const acc = [97.2, 97.8, 98.4, 98.6, 99.0, 99.0, 99.1];

  return (
    <div className="main">
      <div className="page-head">
        <div>
          <div className="page-sub" style={{fontSize: 11, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--muted)", fontWeight: 600, marginBottom: 6}}>
            <span className="live-dot"></span>LIVE · Monday, May 12, 2026 · 09:42 AST
          </div>
          <h1 className="page-title">Good morning, Rahul.</h1>
          <div className="page-sub">{m.activeAgents} of {m.totalAgents} agents running · 1 needs attention · {m.issuesOpen} open exceptions</div>
        </div>
        <div className="page-actions">
          <button className="btn"><Icon name="refresh" size={14}/> Refresh</button>
          <button className="btn"><Icon name="download" size={14}/> Export</button>
          <button className="btn primary"><Icon name="sparkle" size={14}/> Ask AI</button>
        </div>
      </div>

      {/* KPI grid */}
      <div className="kpi-grid">
        <KpiCard label="Invoices Processed · Today" value={fmt(m.invoicesProcessedToday)} delta="+12.5%" deltaLabel="vs yesterday" sparkData={trend} />
        <KpiCard label="Spend Under Management" value="2.84" unit="B SAR" delta="+8.1%" deltaLabel="YTD" sparkData={[1.9, 2.1, 2.3, 2.4, 2.6, 2.7, 2.84]} />
        <KpiCard label="Savings Captured · YTD" value="188.1" unit="M SAR" delta="+42.4%" deltaLabel="vs target" sparkData={savings} sparkColor="var(--ok)" />
        <KpiCard label="Avg Cycle Time" value={m.avgCycleTimeHrs} unit="hrs" delta="-64%" deltaLabel="vs manual" sparkData={[11.8, 9.4, 7.2, 6.1, 5.0, 4.5, 4.2]} sparkColor="var(--ok)" />
      </div>

      {/* AI agents grid */}
      <div className="split">
        <div>
          <div className="row between mb-3">
            <div>
              <div className="card-eyebrow" style={{marginBottom: 4}}>AI Agents</div>
              <div style={{fontSize: 13, color: "var(--muted)"}}>Click an agent to drill into its workspace</div>
            </div>
            <button className="btn ghost sm" onClick={() => setRoute({name: "agents"})}>View all <Icon name="arrow" size={12}/></button>
          </div>
          <div className="agent-grid">
            {d.agents.map(a => <AgentCard key={a.id} agent={a} onOpen={(id) => setRoute({name: "agent", id})} />)}
          </div>

          {/* Spend snapshot chart */}
          <div className="card mt-4">
            <div className="card-head">
              <div>
                <div className="card-title">Processing Volume · Last 7 Days</div>
                <div className="text-xs muted" style={{marginTop: 2}}>Documents auto-extracted across all agents</div>
              </div>
              <div className="row gap-sm">
                <button className="chip">7D</button>
                <button className="chip">30D</button>
                <button className="chip">90D</button>
              </div>
            </div>
            <div style={{padding: "20px 20px 22px"}}>
              <SpendChart data={trend} labels={["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]} />
            </div>
          </div>
        </div>

        {/* Right rail */}
        <div className="col" style={{gap: 14}}>
          {/* Top vendors */}
          <div className="card">
            <div className="card-head">
              <div className="card-title">Top Vendors · YTD</div>
              <button className="btn ghost sm">All <Icon name="arrow" size={11}/></button>
            </div>
            <div style={{padding: "8px 16px 14px"}}>
              {d.vendors.map((v, i) => (
                <div key={i} className="supplier-row" style={{gridTemplateColumns: "1fr auto"}}>
                  <div>
                    <div className="cell-strong" style={{fontSize: 13}}>{v.name}</div>
                    <div className="supplier-bar"><div style={{width: `${(v.spend / 412.8e6) * 100}%`}}></div></div>
                  </div>
                  <div className="text-right">
                    <div className="cell-strong tabular">{sar(v.spend, { compact: true })}</div>
                    <div className="text-xs muted">{v.invoices} docs</div>
                  </div>
                </div>
              ))}
            </div>
          </div>

          {/* Live activity */}
          <div className="card">
            <div className="card-head">
              <div className="card-title"><span className="live-dot"></span>Live Activity</div>
              <span className="text-xs muted">Last hour</span>
            </div>
            <div className="activity">
              {d.activity.slice(0, 6).map((a, i) => (
                <div className="activity-row" key={i} style={{gridTemplateColumns: "44px 1fr"}}>
                  <div className="activity-time">{a.time}</div>
                  <div className="activity-text">
                    <span className={`activity-dot ${a.level}`}></span>
                    <strong>{a.agent}:</strong> {a.text}
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

// Simple SVG line chart for dashboard
function SpendChart({ data, labels }) {
  const w = 760, h = 200, pad = 32;
  const max = Math.max(...data) * 1.15;
  const min = 0;
  const step = (w - pad * 2) / (data.length - 1);
  const points = data.map((d, i) => [pad + i * step, h - pad - ((d - min) / (max - min)) * (h - pad * 2)]);
  const pathD = points.map((p, i) => `${i === 0 ? "M" : "L"} ${p[0]} ${p[1]}`).join(" ");
  const areaD = `${pathD} L ${points[points.length - 1][0]} ${h - pad} L ${points[0][0]} ${h - pad} Z`;
  const yTicks = [0, 0.25, 0.5, 0.75, 1].map(t => ({ y: h - pad - t * (h - pad * 2), v: Math.round(min + t * (max - min)) }));

  return (
    <svg viewBox={`0 0 ${w} ${h}`} className="spend-chart" width="100%">
      <defs>
        <linearGradient id="area-fade" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="#1a1a17" stopOpacity="0.12" />
          <stop offset="100%" stopColor="#1a1a17" stopOpacity="0" />
        </linearGradient>
      </defs>
      {yTicks.map((t, i) => (
        <g key={i}>
          <line x1={pad} x2={w - pad} y1={t.y} y2={t.y} className="grid" />
          <text x={pad - 8} y={t.y + 3} textAnchor="end" className="label">{fmt(t.v)}</text>
        </g>
      ))}
      <path d={areaD} className="area" />
      <path d={pathD} className="line" />
      {points.map((p, i) => (
        <g key={i}>
          <circle cx={p[0]} cy={p[1]} r="3" className="dot" />
          <text x={p[0]} y={h - 10} textAnchor="middle" className="label">{labels[i]}</text>
        </g>
      ))}
    </svg>
  );
}

Object.assign(window, { Dashboard });