"use client";
import { useMemo, useState } from "react";
import clsx from "clsx";
import { Area, Bar, BarChart, CartesianGrid, ComposedChart, Line, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
import { fmtCompact, fmtInt, fmtNum, fmtPct } from "@/lib/format";

/* Tooltip box styled with tokens (values lead, labels follow). */
function TipBox({ title, rows }: { title: string; rows: { label: string; value: string; color?: string }[] }) {
  return (
    <div className="rounded-md border border-border bg-surface-1 px-2.5 py-2 text-xs shadow-md">
      <div className="mb-1 text-ink-3">{title}</div>
      {rows.map((r) => (
        <div key={r.label} className="flex items-center justify-between gap-4">
          <span className="flex items-center gap-1.5 text-ink-2">
            {r.color && <span className="inline-block h-0.5 w-3 rounded" style={{ background: r.color }} aria-hidden />}
            {r.label}
          </span>
          <span className="font-semibold tnum text-ink-1">{r.value}</span>
        </div>
      ))}
    </div>
  );
}

type TipPayload = { payload?: Record<string, unknown>; dataKey?: string | number; value?: unknown }[];

// ---------------------------------------------------------------- price (close) line
export function CloseLineChart({ data, height = 240 }: { data: { t: string; close: number; label: string }[]; height?: number }) {
  if (!data.length) return null;
  return (
    <div className="viz" style={{ height }}>
      <ResponsiveContainer width="100%" height="100%">
        <ComposedChart data={data} margin={{ top: 8, right: 12, bottom: 4, left: 0 }}>
          <CartesianGrid vertical={false} />
          <XAxis dataKey="label" tickLine={false} minTickGap={32} />
          <YAxis domain={["auto", "auto"]} tickLine={false} axisLine={false} width={56} tickFormatter={(v) => fmtNum(Number(v), 2)} />
          <Tooltip
            cursor={{ stroke: "var(--axis)" }}
            content={({ active, payload }: { active?: boolean; payload?: TipPayload }) => {
              if (!active || !payload?.length) return null;
              const p = payload[0].payload as { t: string; close: number; open?: number; high?: number; low?: number; volume?: number };
              return (
                <TipBox
                  title={p.t}
                  rows={[
                    { label: "close", value: fmtNum(p.close, 4), color: "var(--series-1)" },
                    ...(p.open !== undefined ? [{ label: "open", value: fmtNum(p.open, 4) }] : []),
                    ...(p.high !== undefined ? [{ label: "high", value: fmtNum(p.high, 4) }] : []),
                    ...(p.low !== undefined ? [{ label: "low", value: fmtNum(p.low, 4) }] : []),
                    ...(p.volume !== undefined ? [{ label: "volume", value: fmtInt(p.volume) }] : []),
                  ]}
                />
              );
            }}
          />
          <Area type="monotone" dataKey="close" stroke="none" fill="var(--series-1)" fillOpacity={0.1} isAnimationActive={false} />
          <Line type="monotone" dataKey="close" stroke="var(--series-1)" strokeWidth={2} dot={false} activeDot={{ r: 4, stroke: "var(--surface-1)", strokeWidth: 2 }} isAnimationActive={false} />
        </ComposedChart>
      </ResponsiveContainer>
    </div>
  );
}

// ---------------------------------------------------------------- volume bars
export function VolumeBarChart({ data, height = 110, color = "var(--series-1)", valueKey = "volume", title = "volume" }: { data: { label: string; [k: string]: unknown }[]; height?: number; color?: string; valueKey?: string; title?: string }) {
  if (!data.length) return null;
  return (
    <div style={{ height }}>
      <ResponsiveContainer width="100%" height="100%">
        <BarChart data={data} margin={{ top: 4, right: 12, bottom: 4, left: 0 }} barCategoryGap={2}>
          <CartesianGrid vertical={false} />
          <XAxis dataKey="label" tickLine={false} minTickGap={32} hide />
          <YAxis tickLine={false} axisLine={false} width={56} tickFormatter={(v) => fmtCompact(Number(v))} />
          <Tooltip
            cursor={{ fill: "var(--surface-3)" }}
            content={({ active, payload }: { active?: boolean; payload?: TipPayload }) => {
              if (!active || !payload?.length) return null;
              const p = payload[0].payload as Record<string, unknown>;
              return <TipBox title={String(p.t ?? p.label)} rows={[{ label: title, value: fmtInt(Number(p[valueKey])), color }]} />;
            }}
          />
          <Bar dataKey={valueKey} fill={color} maxBarSize={24} radius={[3, 3, 0, 0]} isAnimationActive={false} />
        </BarChart>
      </ResponsiveContainer>
    </div>
  );
}

// ---------------------------------------------------------------- generic horizontal bars (counts by category)
export function CategoryBars({ data, height, color = "var(--series-1)", format = fmtInt }: { data: { name: string; value: number }[]; height?: number; color?: string; format?: (n: number) => string }) {
  if (!data.length) return null;
  const h = height ?? Math.max(80, data.length * 28 + 16);
  return (
    <div style={{ height: h }}>
      <ResponsiveContainer width="100%" height="100%">
        <BarChart data={data} layout="vertical" margin={{ top: 4, right: 48, bottom: 4, left: 8 }} barCategoryGap={4}>
          <CartesianGrid horizontal={false} />
          <XAxis type="number" tickLine={false} axisLine={false} tickFormatter={(v) => fmtCompact(Number(v))} />
          <YAxis type="category" dataKey="name" width={130} tickLine={false} axisLine={false} tick={{ fontSize: 11 }} />
          <Tooltip
            cursor={{ fill: "var(--surface-3)" }}
            content={({ active, payload }: { active?: boolean; payload?: TipPayload }) => {
              if (!active || !payload?.length) return null;
              const p = payload[0].payload as { name: string; value: number };
              return <TipBox title={p.name} rows={[{ label: "count", value: format(p.value), color }]} />;
            }}
          />
          <Bar dataKey="value" fill={color} maxBarSize={20} radius={[0, 3, 3, 0]} isAnimationActive={false} label={{ position: "right", fill: "var(--ink-2)", fontSize: 11, formatter: (v: unknown) => format(Number(v)) }} />
        </BarChart>
      </ResponsiveContainer>
    </div>
  );
}

// ---------------------------------------------------------------- completeness heatmap (calendar cells)
const SEQ = ["--seq-100", "--seq-200", "--seq-300", "--seq-400", "--seq-500", "--seq-600", "--seq-700"];
export function seqColor(x: number | null | undefined): string {
  if (x === null || x === undefined || Number.isNaN(x)) return "var(--surface-3)";
  const i = Math.min(SEQ.length - 1, Math.max(0, Math.floor(Math.max(0, Math.min(1, x)) * SEQ.length)));
  return `var(${SEQ[i]})`;
}

export interface HeatCell {
  session_date: string;
  completeness: number | null;
  symbols: number;
  bars: number;
}

export function CompletenessHeatmap({ cells, start, end }: { cells: HeatCell[]; start: string; end: string }) {
  const [hover, setHover] = useState<HeatCell | null>(null);
  // Build week columns Mon..Fri (sessions are weekdays). Missing day = no data.
  const { weeks, byDate } = useMemo(() => {
    const map = new Map(cells.map((c) => [c.session_date, c]));
    const s = new Date(start + "T00:00:00Z");
    const e = new Date(end + "T00:00:00Z");
    // align start to Monday
    const dow = (s.getUTCDay() + 6) % 7; // Mon=0
    s.setUTCDate(s.getUTCDate() - dow);
    const weeks: string[][] = [];
    for (let d = new Date(s); d <= e; ) {
      const w: string[] = [];
      for (let i = 0; i < 7; i++) {
        w.push(d.toISOString().slice(0, 10));
        d.setUTCDate(d.getUTCDate() + 1);
      }
      weeks.push(w.slice(0, 5)); // Mon–Fri
    }
    return { weeks, byDate: map };
  }, [cells, start, end]);

  const cell = 14;
  const gap = 2;
  const w = weeks.length * (cell + gap) + 28;
  const h = 5 * (cell + gap) + 18;
  const days = ["Mon", "Tue", "Wed", "Thu", "Fri"];

  return (
    <div>
      <div className="overflow-x-auto">
        <svg width={w} height={h} role="img" aria-label="Completeness per session" className="block">
          {days.map((d, i) => (
            <text key={d} x={0} y={18 + i * (cell + gap) + cell - 3} fontSize={9} fill="var(--ink-3)">
              {d}
            </text>
          ))}
          {weeks.map((wk, wi) => {
            const first = wk[0];
            const showMonth = first.slice(8, 10) <= "07";
            return (
              <g key={wi} transform={`translate(${28 + wi * (cell + gap)}, 0)`}>
                {showMonth && (
                  <text x={0} y={9} fontSize={9} fill="var(--ink-3)">
                    {first.slice(0, 7)}
                  </text>
                )}
                {wk.map((date, di) => {
                  const c = byDate.get(date);
                  const inRange = date >= start && date <= end;
                  if (!inRange) return null;
                  return (
                    <rect
                      key={date}
                      x={0}
                      y={18 + di * (cell + gap)}
                      width={cell}
                      height={cell}
                      rx={2}
                      fill={c ? seqColor(c.completeness ?? (c.bars > 0 ? 1 : 0)) : "var(--surface-2)"}
                      stroke={hover?.session_date === date ? "var(--ink-1)" : "none"}
                      strokeWidth={1.5}
                      tabIndex={c ? 0 : -1}
                      onMouseEnter={() => c && setHover(c)}
                      onFocus={() => c && setHover(c)}
                      onMouseLeave={() => setHover(null)}
                      onBlur={() => setHover(null)}
                    >
                      <title>{c ? `${date}: ${fmtPct(c.completeness)} · ${fmtInt(c.symbols)} symbols · ${fmtInt(c.bars)} bars` : `${date}: no data`}</title>
                    </rect>
                  );
                })}
              </g>
            );
          })}
        </svg>
      </div>
      <div className="mt-2 flex flex-wrap items-center justify-between gap-2 text-xs text-ink-3">
        <div className="flex items-center gap-1">
          <span>0 %</span>
          {SEQ.map((s) => (
            <span key={s} className="inline-block h-3 w-3 rounded-sm" style={{ background: `var(${s})` }} aria-hidden />
          ))}
          <span>100 %</span>
          <span className="ml-2 inline-block h-3 w-3 rounded-sm bg-surface-2 border border-hairline" aria-hidden /> <span>no data</span>
        </div>
        <div className="tnum min-h-[1.2em]">
          {hover ? (
            <>
              <span className="font-medium text-ink-1">{hover.session_date}</span> · {fmtPct(hover.completeness)} · {fmtInt(hover.symbols)} symbols · {fmtCompact(hover.bars)} bars
            </>
          ) : (
            "hover a cell"
          )}
        </div>
      </div>
    </div>
  );
}

// ---------------------------------------------------------------- meter (storage gauge)
export function Meter({ value, max, marks = [], tone = "accent", label, className }: { value: number; max: number; marks?: { at: number; label: string }[]; tone?: "accent" | "warn" | "crit" | "ok"; label?: string; className?: string }) {
  const pct = max > 0 ? Math.max(0, Math.min(1, value / max)) : 0;
  const fill = { accent: "var(--accent)", warn: "var(--warn)", crit: "var(--crit)", ok: "var(--ok)" }[tone];
  const track = { accent: "var(--accent-soft)", warn: "var(--warn-soft)", crit: "var(--crit-soft)", ok: "var(--ok-soft)" }[tone];
  return (
    <div className={clsx("relative", className)} role="meter" aria-valuenow={value} aria-valuemin={0} aria-valuemax={max} aria-label={label}>
      <div className="h-3 w-full overflow-hidden rounded-full" style={{ background: track }}>
        <div className="h-full rounded-full" style={{ width: `${pct * 100}%`, background: fill }} />
      </div>
      {marks.map((m) => {
        const x = max > 0 ? Math.max(0, Math.min(1, m.at / max)) : 0;
        return (
          <div key={m.label} className="absolute top-[-4px] flex flex-col items-center" style={{ left: `${x * 100}%`, transform: "translateX(-50%)" }}>
            <div className="h-5 w-px bg-ink-2" />
            <div className="mt-0.5 whitespace-nowrap text-[10px] text-ink-3">{m.label}</div>
          </div>
        );
      })}
    </div>
  );
}

// ---------------------------------------------------------------- segmented bar (one whole split in parts)
export function SegmentedBar({ parts, total, height = 8 }: { parts: { label: string; value: number; color: string }[]; total?: number; height?: number }) {
  const sum = total ?? parts.reduce((a, p) => a + p.value, 0);
  if (sum <= 0) return <div className="h-2 w-full rounded-full bg-surface-3" />;
  return (
    <div>
      <div className="flex w-full gap-0.5 overflow-hidden rounded-full" style={{ height }}>
        {parts.filter((p) => p.value > 0).map((p) => (
          <div key={p.label} style={{ width: `${(p.value / sum) * 100}%`, background: p.color }} title={`${p.label}: ${fmtPct(p.value / sum)}`} />
        ))}
      </div>
      <ul className="mt-2 flex flex-wrap gap-x-4 gap-y-1 text-xs text-ink-2">
        {parts.map((p) => (
          <li key={p.label} className="flex items-center gap-1.5">
            <span className="inline-block h-2.5 w-2.5 rounded-sm" style={{ background: p.color }} aria-hidden />
            {p.label}
          </li>
        ))}
      </ul>
    </div>
  );
}