"use client";

import { useMemo } from "react";
import { Area, AreaChart, YAxis } from "recharts";
import { scaleSymlog } from "d3-scale";
import { ChartContainer, type ChartConfig } from "../ui/chart";
import { ChartMessage } from "./ChartMessage";
import type { HomepageSummary } from "../../lib/homepageSummary";
import {
  SYMLOG_CONSTANT,
  compactNumber,
  symlogTicks,
  type ChartState,
} from "../../lib/homepageChart";
import { buildTimeSeries, type ChartSeries } from "../../lib/homepageChartData";

// One mini-panel per series, each on its OWN y-scale — so the outlier can't
// crush the others by construction (the honest per-shape comparison). With three
// sites this is a clean 3-up; the panel scale follows the chart's linear/symlog.
export function SmallMultiples({
  summary,
  state,
}: {
  summary: HomepageSummary;
  state: ChartState;
}) {
  const { labels, series } = useMemo(
    () => buildTimeSeries(summary, state),
    [summary, state],
  );

  if (series.length === 0) {
    return <ChartMessage>No data for this view yet.</ChartMessage>;
  }

  return (
    <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
      {series.map((s) => (
        <Panel key={s.id} s={s} labels={labels} scale={state.scale} />
      ))}
    </div>
  );
}

function Panel({
  s,
  labels,
  scale,
}: {
  s: ChartSeries;
  labels: string[];
  scale: ChartState["scale"];
}) {
  const config = useMemo<ChartConfig>(
    () => ({ v: { label: s.label, color: s.color } }),
    [s.label, s.color],
  );
  const rows = useMemo(
    () => labels.map((x, i) => ({ x, v: s.values[i] ?? null })),
    [labels, s.values],
  );
  const symlog = useMemo(() => scaleSymlog().constant(SYMLOG_CONSTANT), []);

  const max = s.values.reduce<number>((m, v) => (v != null && v > m ? v : m), 0);
  // The panel's headline number is the window total (the per-bucket latest is
  // often 0 for the current partial bucket).
  const total = s.values.reduce<number>((sum, v) => sum + (v ?? 0), 0);
  const isSymlog = scale === "symlog";
  const domainMax = Math.max(10, max);

  return (
    <div className="rounded-lg border border-[var(--border)] p-3">
      <div className="mb-1 flex items-baseline justify-between gap-2">
        <span className="flex items-center gap-1.5 truncate text-sm text-[var(--foreground)]">
          <span
            className="inline-block h-2 w-2 shrink-0 rounded-[2px]"
            style={{ backgroundColor: s.color }}
          />
          {s.label}
        </span>
        <span className="font-mono text-xs tabular-nums text-[var(--muted-foreground)]">
          {compactNumber(Math.round(total))}
        </span>
      </div>
      <ChartContainer config={config} className="aspect-auto h-[120px] w-full">
        <AreaChart data={rows} margin={{ top: 4, right: 4, bottom: 0, left: 0 }} accessibilityLayer>
          <YAxis
            type="number"
            hide
            scale={isSymlog ? (symlog as unknown as "linear") : undefined}
            domain={isSymlog ? [0, domainMax] : [0, "auto"]}
            ticks={isSymlog ? symlogTicks(domainMax) : undefined}
            allowDecimals={false}
          />
          <Area
            dataKey="v"
            type="monotone"
            stroke={s.color}
            fill={s.color}
            fillOpacity={0.18}
            strokeWidth={1.5}
            connectNulls
            isAnimationActive={false}
          />
        </AreaChart>
      </ChartContainer>
    </div>
  );
}