"use client";

import { useMemo } from "react";
import {
  Bar,
  BarChart,
  CartesianGrid,
  Cell,
  LabelList,
  XAxis,
  YAxis,
} from "recharts";
import { scaleSymlog } from "d3-scale";
import {
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
  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 { buildRanking } from "../../lib/homepageChartData";

const TOP_N = 12;

// Ranked horizontal bars — an aggregate over the window, not a time series. With
// one bar at ~27k and a floor in the hundreds, a symlog value axis keeps the
// small channels readable next to the leader (linear via the scale toggle).
export function LeaderboardChart({
  summary,
  state,
}: {
  summary: HomepageSummary;
  state: ChartState;
}) {
  const { rows, max } = useMemo(
    () => buildRanking(summary, state, TOP_N),
    [summary, state],
  );
  const symlog = useMemo(() => scaleSymlog().constant(SYMLOG_CONSTANT), []);

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

  const config: ChartConfig = { value: { label: "Transcripts" } };
  const isSymlog = state.scale === "symlog";
  const domainMax = Math.max(10, max);
  const ticks = isSymlog ? symlogTicks(domainMax) : undefined;

  return (
    <ChartContainer config={config} className="aspect-auto h-[420px] w-full">
      <BarChart
        data={rows}
        layout="vertical"
        margin={{ top: 4, right: 52, bottom: 4, left: 8 }}
        accessibilityLayer
      >
        <CartesianGrid horizontal={false} stroke="var(--chart-grid)" strokeDasharray="3 3" />
        <XAxis
          type="number"
          scale={isSymlog ? (symlog as unknown as "linear") : undefined}
          domain={[0, domainMax]}
          ticks={ticks}
          tickFormatter={(v: number) => compactNumber(v)}
          tickLine={false}
          axisLine={false}
          tick={{ fill: "var(--chart-axis)", fontSize: 12 }}
        />
        <YAxis
          type="category"
          dataKey="label"
          width={132}
          tickLine={false}
          axisLine={false}
          tick={{ fill: "var(--chart-axis)", fontSize: 12 }}
        />
        <ChartTooltip content={<ChartTooltipContent />} />
        <Bar dataKey="value" radius={[0, 3, 3, 0]} isAnimationActive={false}>
          {rows.map((r) => (
            <Cell key={r.id} fill={r.color} />
          ))}
          <LabelList
            dataKey="value"
            position="right"
            formatter={(v: number) => compactNumber(v)}
            className="fill-[var(--muted-foreground)] text-xs tabular-nums"
          />
        </Bar>
      </BarChart>
    </ChartContainer>
  );
}