"use client";
import * as React from "react";
import { ResponsiveContainer, AreaChart, Area, BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, PieChart, Pie, Cell, LabelList, type TooltipContentProps } from "recharts";
import { ProviderIcon } from "@/components/brand/provider-icon";
import { PROVIDERS, providerName } from "@/lib/client/providers";
import { formatUsd, formatTokens, formatNumber, formatMs, cn } from "@/lib/utils";
import type { ProviderId } from "@/lib/client/types";

/* ------------------------------------------------------------------------------------------------
 * Theme-bound chart primitives. Rules (dataviz): one hue per entity (provider color follows the
 * provider, never its rank), thin marks (≤ 24 px, 4 px rounded data-end), 2 px surface gaps between
 * stacked fills, hairline solid grid, text in text tokens (never the series color), tooltips on
 * every plot, no dual axes, no default recharts colors anywhere.
 * ---------------------------------------------------------------------------------------------- */

const GRID = "var(--border)";
const TEXT = "var(--fg-muted)";
const SURFACE = "var(--bg-elevated)";
const AXIS_TICK = { fill: TEXT, fontSize: 11, fontFamily: "var(--font-mono)" } as const;
const BAR_MAX = 24;

export function providerColor(p: string): string {
  return p in PROVIDERS ? PROVIDERS[p as ProviderId].colorVar : "var(--p-custom)";
}

export interface SeriesPoint {
  bucket: string;
  requests: number;
  failures: number;
  inputTokens: number;
  outputTokens: number;
  costUsd: number;
}

/** `YYYY-MM-DD` → "Sep 11" · `YYYY-MM-DDTHH:00` → "3 PM" (parsed as wall-clock, never shifted by the browser zone). */
export function bucketLabel(key: string, hourly: boolean, opts: { long?: boolean } = {}): string {
  const m = /^(\d{4})-(\d{2})-(\d{2})(?:T(\d{2}):(\d{2}))?$/.exec(key);
  if (!m) return key;
  const d = new Date(Number(m[1]), Number(m[2]) - 1, Number(m[3]), Number(m[4] ?? 0), Number(m[5] ?? 0));
  if (hourly) return opts.long ? d.toLocaleString("en-US", { month: "short", day: "numeric", hour: "numeric" }) : d.toLocaleTimeString("en-US", { hour: "numeric" });
  return d.toLocaleDateString("en-US", opts.long ? { weekday: "short", month: "short", day: "numeric", year: "numeric" } : { month: "short", day: "numeric" });
}

interface TooltipRow {
  name: string;
  value: React.ReactNode;
  color?: string;
}

function ChartTooltipBox({ title, rows }: { title?: React.ReactNode; rows: TooltipRow[] }) {
  return (
    <div className="rounded-md border border-border bg-bg-elevated px-2.5 py-2 text-xs shadow-md">
      {title ? <p className="mb-1 font-medium text-fg">{title}</p> : null}
      <ul className="space-y-0.5">
        {rows.map((r) => (
          <li key={r.name} className="flex items-center justify-between gap-4">
            <span className="flex items-center gap-1.5 text-fg-muted">
              {r.color ? <span className="size-2 rounded-full" style={{ background: r.color }} aria-hidden /> : null}
              {r.name}
            </span>
            <span className="font-mono tabular-nums text-fg">{r.value}</span>
          </li>
        ))}
      </ul>
    </div>
  );
}

type RechartsTooltipProps = TooltipContentProps;

function num(v: unknown): number {
  return typeof v === "number" ? v : Number(v ?? 0);
}

/* ---------- chart card frame ---------- */

export function ChartCard({ title, hint, children, className, legend, action }: { title: string; hint?: React.ReactNode; children: React.ReactNode; className?: string; legend?: React.ReactNode; action?: React.ReactNode }) {
  return (
    <section className={cn("panel min-w-0 p-4", className)} aria-label={title}>
      <header className="mb-3 flex items-start justify-between gap-3">
        <div className="min-w-0">
          <h3 className="text-[13px] font-semibold tracking-tight">{title}</h3>
          {hint ? <p className="text-[11px] text-fg-subtle">{hint}</p> : null}
        </div>
        {legend ?? action}
      </header>
      {children}
    </section>
  );
}

export function Legend({ items }: { items: { label: string; color: string; icon?: React.ReactNode; opacity?: number }[] }) {
  return (
    <ul className="flex flex-wrap items-center justify-end gap-x-3 gap-y-1 text-[11px] text-fg-muted">
      {items.map((i) => (
        <li key={i.label} className="flex items-center gap-1.5">
          {i.icon ?? <span className="size-2 rounded-full" style={{ background: i.color, opacity: i.opacity ?? 1 }} aria-hidden />}
          {i.label}
        </li>
      ))}
    </ul>
  );
}

export function ChartEmpty({ children = "Nothing recorded for this period." }: { children?: React.ReactNode }) {
  return <p className="flex h-[160px] items-center justify-center text-center text-xs text-fg-subtle">{children}</p>;
}

/* ---------- time series ---------- */

const H = 200;

export function CostOverTime({ data, hourly }: { data: SeriesPoint[]; hourly: boolean }) {
  if (!data.some((d) => d.costUsd > 0)) return <ChartEmpty>No priced requests in this period.</ChartEmpty>;
  return (
    <ResponsiveContainer width="100%" height={H}>
      <AreaChart data={data} margin={{ top: 8, right: 8, left: -12, bottom: 0 }}>
        <defs>
          <linearGradient id="plm-cost-fill" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor="var(--accent)" stopOpacity={0.18} />
            <stop offset="100%" stopColor="var(--accent)" stopOpacity={0.02} />
          </linearGradient>
        </defs>
        <CartesianGrid vertical={false} stroke={GRID} strokeWidth={1} />
        <XAxis dataKey="bucket" tickFormatter={(v) => bucketLabel(String(v), hourly)} tick={AXIS_TICK} axisLine={false} tickLine={false} minTickGap={28} interval="preserveStartEnd" />
        <YAxis tick={AXIS_TICK} axisLine={false} tickLine={false} tickFormatter={(v) => (num(v) === 0 ? "$0" : formatUsd(num(v)))} width={64} />
        <Tooltip
          cursor={{ stroke: "var(--border-strong)" }}
          content={({ active, payload, label }: RechartsTooltipProps) => {
            if (!active || !payload?.length) return null;
            const row = payload[0].payload as SeriesPoint;
            return <ChartTooltipBox title={bucketLabel(String(label), hourly, { long: true })} rows={[{ name: "Est. cost", value: formatUsd(row.costUsd, { precise: true }), color: "var(--accent)" }, { name: "Requests", value: formatNumber(row.requests) }]} />;
          }}
        />
        <Area type="monotone" dataKey="costUsd" stroke="var(--accent)" strokeWidth={2} fill="url(#plm-cost-fill)" isAnimationActive={false} dot={false} activeDot={{ r: 4, fill: "var(--accent)", stroke: SURFACE, strokeWidth: 2 }} />
      </AreaChart>
    </ResponsiveContainer>
  );
}

export function RequestsOverTime({ data, hourly }: { data: SeriesPoint[]; hourly: boolean }) {
  if (!data.some((d) => d.requests > 0)) return <ChartEmpty />;
  const hasFailures = data.some((d) => d.failures > 0);
  return (
    <ResponsiveContainer width="100%" height={H}>
      <BarChart data={data} margin={{ top: 8, right: 8, left: -18, bottom: 0 }} barCategoryGap="30%">
        <CartesianGrid vertical={false} stroke={GRID} />
        <XAxis dataKey="bucket" tickFormatter={(v) => bucketLabel(String(v), hourly)} tick={AXIS_TICK} axisLine={false} tickLine={false} minTickGap={28} interval="preserveStartEnd" />
        <YAxis tick={AXIS_TICK} axisLine={false} tickLine={false} allowDecimals={false} width={52} />
        <Tooltip
          cursor={{ fill: "var(--bg-muted)" }}
          content={({ active, payload, label }: RechartsTooltipProps) => {
            if (!active || !payload?.length) return null;
            const row = payload[0].payload as SeriesPoint;
            return (
              <ChartTooltipBox
                title={bucketLabel(String(label), hourly, { long: true })}
                rows={[
                  { name: "Succeeded", value: formatNumber(row.requests - row.failures), color: "var(--accent)" },
                  { name: "Failed", value: formatNumber(row.failures), color: "var(--danger)" },
                ]}
              />
            );
          }}
        />
        {/* stacked: ok (accent) + failed (status danger, only when > 0); 2 px surface gap via stroke */}
        <Bar dataKey={(d: SeriesPoint) => d.requests - d.failures} name="ok" stackId="r" fill="var(--accent)" stroke={SURFACE} strokeWidth={2} radius={hasFailures ? undefined : [4, 4, 0, 0]} isAnimationActive={false} maxBarSize={BAR_MAX} />
        {hasFailures ? <Bar dataKey="failures" stackId="r" fill="var(--danger)" stroke={SURFACE} strokeWidth={2} radius={[4, 4, 0, 0]} isAnimationActive={false} maxBarSize={BAR_MAX} /> : null}
      </BarChart>
    </ResponsiveContainer>
  );
}

export function TokensOverTime({ data, hourly }: { data: SeriesPoint[]; hourly: boolean }) {
  if (!data.some((d) => d.inputTokens + d.outputTokens > 0)) return <ChartEmpty />;
  return (
    <ResponsiveContainer width="100%" height={H}>
      <BarChart data={data} margin={{ top: 8, right: 8, left: -12, bottom: 0 }} barCategoryGap="30%">
        <CartesianGrid vertical={false} stroke={GRID} />
        <XAxis dataKey="bucket" tickFormatter={(v) => bucketLabel(String(v), hourly)} tick={AXIS_TICK} axisLine={false} tickLine={false} minTickGap={28} interval="preserveStartEnd" />
        <YAxis tick={AXIS_TICK} axisLine={false} tickLine={false} tickFormatter={(v) => formatTokens(num(v))} width={56} />
        <Tooltip
          cursor={{ fill: "var(--bg-muted)" }}
          content={({ active, payload, label }: RechartsTooltipProps) => {
            if (!active || !payload?.length) return null;
            const row = payload[0].payload as SeriesPoint;
            return (
              <ChartTooltipBox
                title={bucketLabel(String(label), hourly, { long: true })}
                rows={[
                  { name: "Input", value: formatTokens(row.inputTokens), color: "var(--accent)" },
                  { name: "Output", value: formatTokens(row.outputTokens), color: "var(--fg)" },
                  { name: "Total", value: formatTokens(row.inputTokens + row.outputTokens) },
                ]}
              />
            );
          }}
        />
        <Bar dataKey="inputTokens" stackId="t" fill="var(--accent)" fillOpacity={0.55} stroke={SURFACE} strokeWidth={2} isAnimationActive={false} maxBarSize={BAR_MAX} />
        <Bar dataKey="outputTokens" stackId="t" fill="var(--fg)" fillOpacity={0.85} stroke={SURFACE} strokeWidth={2} radius={[4, 4, 0, 0]} isAnimationActive={false} maxBarSize={BAR_MAX} />
      </BarChart>
    </ResponsiveContainer>
  );
}

/* ---------- by provider ---------- */

export interface ProviderSlice {
  provider: string;
  requests: number;
  failures: number;
  costUsd: number;
  inputTokens: number;
  outputTokens: number;
}

/** Part-to-whole donut (≤ 6 slices, tail folded into "Other") with a labelled list — identity comes from the list, not color alone. */
export function ProviderDonut({ data, metric }: { data: ProviderSlice[]; metric: "requests" | "costUsd" }) {
  const total = data.reduce((a, d) => a + num(d[metric]), 0);
  const sorted = [...data].filter((d) => num(d[metric]) > 0).sort((a, b) => num(b[metric]) - num(a[metric]));
  const shown = sorted.length > 6 ? [...sorted.slice(0, 5), { ...sorted[5], provider: "other", [metric]: sorted.slice(5).reduce((a, d) => a + num(d[metric]), 0) }] : sorted;
  if (!total) return <ChartEmpty>{metric === "costUsd" ? "No priced requests in this period." : "Nothing recorded for this period."}</ChartEmpty>;
  const color = (p: string) => (p === "other" ? "var(--fg-subtle)" : providerColor(p));
  const name = (p: string) => (p === "other" ? "Other" : providerName(p));
  return (
    <div className="flex flex-col items-center gap-3 sm:flex-row">
      <div className="relative size-[168px] shrink-0">
        <ResponsiveContainer width="100%" height="100%">
          <PieChart>
            <Pie data={shown} dataKey={metric} nameKey="provider" innerRadius={56} outerRadius={80} paddingAngle={2} stroke={SURFACE} strokeWidth={2} isAnimationActive={false}>
              {shown.map((d) => (
                <Cell key={d.provider} fill={color(d.provider)} />
              ))}
            </Pie>
            <Tooltip
              content={({ active, payload }: RechartsTooltipProps) => {
                if (!active || !payload?.length) return null;
                const d = payload[0].payload as ProviderSlice;
                const v = num(d[metric]);
                return <ChartTooltipBox title={name(d.provider)} rows={[{ name: metric === "costUsd" ? "Est. cost" : "Requests", value: metric === "costUsd" ? formatUsd(v, { precise: true }) : formatNumber(v), color: color(d.provider) }, { name: "Share", value: `${((v / total) * 100).toFixed(1)}%` }]} />;
              }}
            />
          </PieChart>
        </ResponsiveContainer>
        <div className="pointer-events-none absolute inset-0 flex flex-col items-center justify-center">
          <span className="text-[10px] uppercase tracking-wide text-fg-subtle">{metric === "costUsd" ? "Est. cost" : "Requests"}</span>
          <span className="text-sm font-semibold">{metric === "costUsd" ? formatUsd(total) : formatNumber(total)}</span>
        </div>
      </div>
      <ul className="w-full min-w-0 space-y-1.5 text-xs">
        {shown.map((d) => {
          const v = num(d[metric]);
          const pct = (v / total) * 100;
          return (
            <li key={d.provider} className="flex items-center gap-2">
              {d.provider === "other" ? <span className="size-3 rounded-full bg-fg-subtle" aria-hidden /> : <ProviderIcon provider={d.provider} size={12} />}
              <span className="w-[72px] shrink-0 truncate text-fg">{name(d.provider)}</span>
              <span className="h-1.5 min-w-0 flex-1 overflow-hidden rounded-full bg-bg-muted">
                <span className="block h-full rounded-full" style={{ width: `${pct}%`, background: color(d.provider) }} />
              </span>
              <span className="w-14 shrink-0 text-right font-mono tabular-nums text-fg-muted">{metric === "costUsd" ? formatUsd(v) : `${pct.toFixed(0)}%`}</span>
            </li>
          );
        })}
      </ul>
    </div>
  );
}

/* ---------- by model ---------- */

export interface ModelRow {
  modelKey: string;
  provider: string;
  label: string;
  requests: number;
  costUsd: number;
  inputTokens: number;
  outputTokens: number;
  tokensPerSec: number | null;
  avgLatencyMs: number;
  avgTtftMs: number | null;
  failures: number;
}

/** Horizontal bars, one row per model, colored by provider (identity), values labelled at the bar end. */
export function ModelBars({ data, metric, format, max = 8, ascending = false, emptyText }: { data: ModelRow[]; metric: keyof ModelRow; format: (v: number) => string; max?: number; ascending?: boolean; emptyText?: string }) {
  const rows = [...data]
    .filter((d) => num(d[metric]) > 0)
    .sort((a, b) => (ascending ? num(a[metric]) - num(b[metric]) : num(b[metric]) - num(a[metric])))
    .slice(0, max);
  if (rows.length === 0) return <ChartEmpty>{emptyText ?? "Not enough data."}</ChartEmpty>;
  const height = Math.max(120, rows.length * 32 + 12);
  return (
    <ResponsiveContainer width="100%" height={height}>
      <BarChart data={rows} layout="vertical" margin={{ top: 0, right: 64, left: 0, bottom: 0 }} barCategoryGap="30%">
        <CartesianGrid horizontal={false} stroke={GRID} />
        <XAxis type="number" hide />
        <YAxis type="category" dataKey="label" width={124} tick={{ ...AXIS_TICK, fontFamily: "var(--font-sans)", fill: "var(--fg)", fontSize: 12 }} axisLine={false} tickLine={false} interval={0} tickFormatter={(v: string) => (v.length > 17 ? `${v.slice(0, 16)}…` : v)} />
        <Tooltip
          cursor={{ fill: "var(--bg-muted)" }}
          content={({ active, payload }: RechartsTooltipProps) => {
            if (!active || !payload?.length) return null;
            const d = payload[0].payload as ModelRow;
            return (
              <ChartTooltipBox
                title={
                  <span className="flex items-center gap-1.5">
                    <ProviderIcon provider={d.provider} size={12} /> {d.label}
                  </span>
                }
                rows={[
                  { name: "Value", value: format(num(d[metric])) },
                  { name: "Requests", value: formatNumber(d.requests) },
                  { name: "Est. cost", value: formatUsd(d.costUsd, { precise: true }) },
                  { name: "Tokens in / out", value: `${formatTokens(d.inputTokens)} / ${formatTokens(d.outputTokens)}` },
                ]}
              />
            );
          }}
        />
        <Bar dataKey={metric} radius={[0, 4, 4, 0]} isAnimationActive={false} maxBarSize={18}>
          {rows.map((d) => (
            <Cell key={d.modelKey} fill={providerColor(d.provider)} />
          ))}
          <LabelList dataKey={metric} position="right" formatter={(v: unknown) => format(num(v))} style={{ fill: TEXT, fontSize: 11, fontFamily: "var(--font-mono)" }} />
        </Bar>
      </BarChart>
    </ResponsiveContainer>
  );
}

/** Two small multiples (never a dual axis): time to first token (lower is better) and output speed (higher is better). */
export function LatencyByModel({ data, max = 6 }: { data: ModelRow[]; max?: number }) {
  return (
    <div className="grid gap-4 sm:grid-cols-2">
      <div className="min-w-0">
        <p className="mb-1 text-[11px] font-medium uppercase tracking-wide text-fg-subtle">Time to first token · lower is better</p>
        <ModelBars data={data} metric="avgTtftMs" format={(v) => formatMs(v)} max={max} ascending emptyText="No first-token timings yet." />
      </div>
      <div className="min-w-0">
        <p className="mb-1 text-[11px] font-medium uppercase tracking-wide text-fg-subtle">Output speed · higher is better</p>
        <ModelBars data={data} metric="tokensPerSec" format={(v) => `${v.toFixed(0)} tok/s`} max={max} emptyText="No streaming speed measured yet." />
      </div>
    </div>
  );
}

/** Tiny 12-point sparkline for KPI tiles (de-emphasised hue, no axes). */
export function Sparkline({ values, color = "var(--accent)", height = 28 }: { values: number[]; color?: string; height?: number }) {
  const pts = values.slice(-12);
  if (pts.length < 2 || !pts.some((v) => v > 0)) return null;
  const maxV = Math.max(...pts);
  const w = 72;
  const step = w / (pts.length - 1);
  const d = pts.map((v, i) => `${i === 0 ? "M" : "L"}${(i * step).toFixed(1)},${(height - 2 - (v / maxV) * (height - 4)).toFixed(1)}`).join(" ");
  return (
    <svg width={w} height={height} viewBox={`0 0 ${w} ${height}`} className="shrink-0 opacity-70" aria-hidden>
      <path d={d} fill="none" stroke={color} strokeWidth={1.5} strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}