// analytics.jsx — operational analytics: resolution time, distribution, warehouse, SLA
const { useState: useStateAN } = React;

function ChartCard({ title, subtitle, children, right, className = "" }) {
  return (
    <div className={"bg-white rounded-xl border border-zinc-200 p-5 " + className}>
      <div className="flex items-start gap-2 mb-4">
        <div>
          <h3 className="text-[13.5px] font-semibold text-zinc-900">{title}</h3>
          {subtitle && <p className="text-[11.5px] text-zinc-400 mt-0.5">{subtitle}</p>}
        </div>
        {right && <div className="ml-auto">{right}</div>}
      </div>
      {children}
    </div>
  );
}

function AnalyticsPage() {
  const a = ANALYTICS;
  const [range, setRange] = useStateAN("14d");

  return (
    <div className="p-6 space-y-4 max-w-[1100px]">
      <div className="flex items-center gap-3 flex-wrap">
        <div>
          <h2 className="text-[15px] font-semibold text-zinc-900 tracking-tight">Operational Analytics</h2>
          <p className="text-[12.5px] text-zinc-500 mt-0.5">Resolution performance, issue mix, warehouse health &amp; SLA compliance.</p>
        </div>
        <div className="ml-auto flex items-center gap-2">
          <div className="inline-flex items-center gap-0.5 p-0.5 rounded-lg bg-zinc-100 border border-zinc-200">
            {["7d", "14d", "30d"].map(r => (
              <button key={r} onClick={() => setRange(r)} className={`px-2.5 py-1 rounded-md text-[12px] font-medium transition-all ${range === r ? "bg-white text-zinc-800 shadow-sm" : "text-zinc-500 hover:text-zinc-700"}`}>{r}</button>
            ))}
          </div>
          <Button variant="default" size="sm" icon="download">Export</Button>
        </div>
      </div>

      {/* KPI tiles */}
      <div className="grid grid-cols-2 lg:grid-cols-4 gap-3.5">
        {a.kpis.map(k => (
          <div key={k.label} className="bg-white rounded-xl border border-zinc-200 p-4">
            <div className="text-[12px] text-zinc-500">{k.label}</div>
            <div className="flex items-end gap-2 mt-1.5">
              <span className="text-[24px] font-semibold text-zinc-900 leading-none tabular-nums">{k.value}</span>
              <span className="inline-flex items-center gap-0.5 text-[11.5px] font-semibold mb-0.5" style={{ color: k.good ? "#16a34a" : "#dc2626" }}>
                <Icon name={k.good ? "trend_up" : "trend_dn"} size={12} strokeWidth={2.25} />{k.delta}
              </span>
            </div>
            <div className="text-[11px] text-zinc-400 mt-1">{k.sub}</div>
          </div>
        ))}
      </div>

      {/* row 1: resolution trend + distribution */}
      <div className="grid lg:grid-cols-2 gap-4">
        <ChartCard title="Average resolution time" subtitle="Hours to resolve, last 14 days"
          right={<span className="inline-flex items-center gap-1 text-[12px] font-semibold text-emerald-600"><Icon name="trend_dn" size={13} />−34% MoM</span>}>
          <AreaChart data={a.resolution} suffix="h" color="var(--accent)" height={170} labels={["14d ago", "today"]} />
        </ChartCard>

        <ChartCard title="Issue category distribution" subtitle="Share of exceptions this week">
          <Donut data={a.distribution} />
        </ChartCard>
      </div>

      {/* row 2: warehouse performance + SLA */}
      <div className="grid lg:grid-cols-2 gap-4">
        <ChartCard title="Warehouse performance" subtitle="Avg dispatch time &amp; SLA compliance by DC">
          <div className="space-y-3.5">
            {a.warehouses.map(w => {
              const slaColor = w.slaPct >= 90 ? "#16a34a" : w.slaPct >= 80 ? "#d97706" : "#dc2626";
              return (
                <div key={w.name}>
                  <div className="flex items-center justify-between mb-1.5 gap-2">
                    <div className="flex items-center gap-2 min-w-0 whitespace-nowrap">
                      <span className="text-[12.5px] font-medium text-zinc-700">{w.name}</span>
                      <span className="text-[11px] text-zinc-400">· {w.volume} orders</span>
                    </div>
                    <div className="flex items-center gap-3 whitespace-nowrap shrink-0">
                      <span className="text-[11.5px] text-zinc-500 tabular-nums">{w.dispatchH}h dispatch</span>
                      <span className="text-[11.5px] font-semibold tabular-nums" style={{ color: slaColor }}>{w.slaPct}% SLA</span>
                    </div>
                  </div>
                  <div className="h-2 rounded-full bg-zinc-100 overflow-hidden">
                    <div className="h-full rounded-full transition-all" style={{ width: w.slaPct + "%", background: slaColor }} />
                  </div>
                </div>
              );
            })}
          </div>
          <div className="mt-4 pt-3 border-t border-zinc-100 flex items-center gap-2 text-[11.5px] text-zinc-500">
            <Icon name="alert" size={13} className="text-orange-500" /> Klang DC is dragging network SLA — 3 breaches today.
          </div>
        </ChartCard>

        <ChartCard title="SLA compliance" subtitle="Rolling 7-day, by exception category">
          <div className="flex items-center gap-6 flex-wrap">
            <div className="shrink-0">
              <Gauge value={a.slaOverall} label="Overall SLA" />
            </div>
            <div className="flex-1 min-w-[180px] space-y-2.5">
              {a.slaByCategory.map(c => {
                const col = c.pct >= 90 ? "#16a34a" : c.pct >= 80 ? "#d97706" : "#dc2626";
                return (
                  <div key={c.label}>
                    <div className="flex items-center justify-between mb-1">
                      <span className="text-[12px] text-zinc-600">{c.label}</span>
                      <span className="text-[12px] font-medium tabular-nums" style={{ color: col }}>{c.pct}%</span>
                    </div>
                    <div className="h-1.5 rounded-full bg-zinc-100 overflow-hidden"><div className="h-full rounded-full" style={{ width: c.pct + "%", background: col }} /></div>
                  </div>
                );
              })}
            </div>
          </div>
        </ChartCard>
      </div>
    </div>
  );
}

Object.assign(window, { AnalyticsPage });