"use client";
import * as React from "react";
import { Bar, BarChart, CartesianGrid, Legend, Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
import { useTheme } from "next-themes";
import { formatCompact, formatUsd } from "@/lib/format";

/**
 * Categorical palette, validated (dataviz skill) against both surfaces.
 * Fixed slot order — providers always keep the same hue regardless of which are present.
 */
const LIGHT = ["#2a78d6", "#eb6834", "#1baf7a", "#eda100"];
const DARK = ["#3987e5", "#d95926", "#199e70", "#c98500"];
const PROVIDER_SLOT: Record<string, number> = { oxylabs: 0, decodo: 1, soax: 2, direct: 3 };

const noop = () => () => {};
/** false during SSR/hydration, true once on the client — avoids a theme mismatch warning. */
const useMounted = () => React.useSyncExternalStore(noop, () => true, () => false);

function usePalette() {
  const { resolvedTheme } = useTheme();
  const mounted = useMounted();
  const dark = mounted && resolvedTheme === "dark";
  return dark ? DARK : LIGHT;
}

export function providerColor(provider: string, palette: string[]): string {
  const slot = PROVIDER_SLOT[provider];
  return palette[slot ?? 3] ?? palette[0]!;
}

const axisStyle = { fontSize: 11, fill: "var(--fg-subtle)", fontFamily: "var(--font-mono)" } as const;
const gridStroke = "var(--border)";

function fmtTick(unit: "hour" | "day") {
  return (t: string) => {
    const d = new Date(t);
    return unit === "hour" ? `${String(d.getHours()).padStart(2, "0")}:00` : `${d.getMonth() + 1}/${d.getDate()}`;
  };
}

function TooltipBox({ active, payload, label, unit, money }: { active?: boolean; payload?: Array<{ name?: string; value?: number; color?: string }>; label?: string; unit: "hour" | "day"; money?: boolean }) {
  if (!active || !payload?.length) return null;
  const d = label ? new Date(label) : null;
  return (
    <div className="rounded-md border border-border bg-bg-elevated px-3 py-2 text-[12px] shadow-md">
      <div className="mb-1 font-medium text-fg">{d ? (unit === "hour" ? d.toLocaleString(undefined, { month: "short", day: "numeric", hour: "2-digit" }) : d.toLocaleDateString(undefined, { month: "short", day: "numeric" })) : label}</div>
      <div className="space-y-0.5">
        {payload.map((p) => (
          <div key={p.name} className="flex items-center justify-between gap-4">
            <span className="flex items-center gap-1.5 text-fg-muted">
              <span className="size-2 rounded-full" style={{ background: p.color }} aria-hidden />
              {p.name}
            </span>
            <span className="tabular font-mono text-fg">{money ? formatUsd(p.value ?? 0, true) : formatCompact(p.value ?? 0)}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

/** Revenue vs upstream cost vs margin over time. One axis (USD), three series, legend + direct table alongside. */
export function EconomicsChart({ data, unit }: { data: Array<{ key: string; revenue: number; cost: number; margin: number }>; unit: "hour" | "day" }) {
  const pal = usePalette();
  if (!data.length) return <div className="flex h-[260px] items-center justify-center text-[13px] text-fg-muted">No requests in this range.</div>;
  return (
    <div className="h-[260px] w-full" role="img" aria-label="Revenue, upstream cost and margin over time">
      <ResponsiveContainer width="100%" height="100%">
        <BarChart data={data} margin={{ top: 8, right: 8, left: 0, bottom: 0 }} barGap={2} barCategoryGap="20%">
          <CartesianGrid vertical={false} stroke={gridStroke} strokeDasharray="0" />
          <XAxis dataKey="key" tickFormatter={fmtTick(unit)} tick={axisStyle} axisLine={false} tickLine={false} minTickGap={24} />
          <YAxis tick={axisStyle} axisLine={false} tickLine={false} width={56} tickFormatter={(v: number) => (v >= 1 ? `$${formatCompact(v)}` : `$${v.toFixed(2)}`)} />
          <Tooltip content={<TooltipBox unit={unit} money />} cursor={{ fill: "var(--bg-muted)" }} />
          <Legend iconType="circle" iconSize={8} wrapperStyle={{ fontSize: 12, color: "var(--fg-muted)" }} />
          <Bar dataKey="revenue" name="Revenue" fill={pal[0]} radius={[3, 3, 0, 0]} maxBarSize={28} />
          <Bar dataKey="cost" name="Upstream cost" fill={pal[1]} radius={[3, 3, 0, 0]} maxBarSize={28} />
          <Bar dataKey="margin" name="Margin" fill={pal[2]} radius={[3, 3, 0, 0]} maxBarSize={28} />
        </BarChart>
      </ResponsiveContainer>
    </div>
  );
}

/** Requests over time, one line per provider (fixed hue per provider). */
export function ProviderSeriesChart({ data, providers, unit, metric = "requests" }: { data: Array<Record<string, number | string>>; providers: string[]; unit: "hour" | "day"; metric?: "requests" | "successes" | "cost" }) {
  const pal = usePalette();
  if (!data.length || !providers.length) return <div className="flex h-[260px] items-center justify-center text-[13px] text-fg-muted">No routing metrics in this range.</div>;
  const money = metric === "cost";
  return (
    <div className="h-[260px] w-full" role="img" aria-label={`${metric} over time per provider`}>
      <ResponsiveContainer width="100%" height="100%">
        <LineChart data={data} margin={{ top: 8, right: 8, left: 0, bottom: 0 }}>
          <CartesianGrid vertical={false} stroke={gridStroke} />
          <XAxis dataKey="t" tickFormatter={fmtTick(unit)} tick={axisStyle} axisLine={false} tickLine={false} minTickGap={24} />
          <YAxis tick={axisStyle} axisLine={false} tickLine={false} width={56} tickFormatter={(v: number) => (money ? `$${v >= 1 ? formatCompact(v) : v.toFixed(2)}` : formatCompact(v))} />
          <Tooltip content={<TooltipBox unit={unit} money={money} />} cursor={{ stroke: "var(--border-strong)" }} />
          <Legend iconType="circle" iconSize={8} wrapperStyle={{ fontSize: 12, color: "var(--fg-muted)" }} />
          {providers.map((p) => (
            <Line key={p} type="monotone" dataKey={`${p}:${metric}`} name={p} stroke={providerColor(p, pal)} strokeWidth={2} dot={false} activeDot={{ r: 4, strokeWidth: 2, stroke: "var(--bg-elevated)" }} connectNulls />
          ))}
        </LineChart>
      </ResponsiveContainer>
    </div>
  );
}