"use client";

import { useMemo } from "react";
import {
  Area,
  AreaChart,
  Bar,
  BarChart,
  CartesianGrid,
  XAxis,
  YAxis,
} from "recharts";
import {
  ChartContainer,
  ChartLegend,
  ChartLegendContent,
  ChartTooltip,
  ChartTooltipContent,
  type ChartConfig,
} from "../ui/chart";
import { ChartMessage } from "./ChartMessage";
import type { HomepageSummary } from "../../lib/homepageSummary";
import { type ChartState } from "../../lib/homepageChart";
import { buildTimeSeries } from "../../lib/homepageChartData";
import { BAR_GAP } from "./surfaceGap";

// The stacked renderer: area (cumulative/Growth) or bars, optionally 100%-share.
// Stacking shows per-series composition *and* the combined total at once — the
// honest view when the series add up to a meaningful whole. Skew-handling for
// non-stacked views lives in the line / small-multiples / leaderboard charts.
export function CrossSiteChart({
  summary,
  state,
}: {
  summary: HomepageSummary;
  state: ChartState;
}) {
  const { labels, series } = useMemo(
    () => buildTimeSeries(summary, state),
    [summary, state],
  );

  const config = useMemo<ChartConfig>(() => {
    const c: ChartConfig = {};
    for (const s of series) c[s.id] = { label: s.label, color: s.color };
    return c;
  }, [series]);

  const rows = useMemo(
    () =>
      labels.map((x, i) => {
        const row: Record<string, string | number> = { x };
        for (const s of series) row[s.id] = (s.values[i] as number) ?? 0;
        return row;
      }),
    [labels, series],
  );

  if (labels.length === 0) {
    return <ChartMessage>No data for this view yet.</ChartMessage>;
  }
  if (series.length === 0) {
    return (
      <ChartMessage>
        Every series is hidden — re-enable one from the cards below.
      </ChartMessage>
    );
  }

  const isArea = state.chartType === "area";
  // The marks spec's surface gap between touching bar segments
  // (charts/surfaceGap.ts): only when there is more than one series to part.
  const stacked = series.length > 1;
  const isShare = state.valueMode === "share";
  const stackOffset = isShare ? "expand" : undefined;
  const showLegend = state.breakdown === "channel" && series.length > 1;
  const margin = { top: 8, right: 12, bottom: 4, left: 4 };

  const axes = [
    <CartesianGrid key="grid" vertical={false} stroke="var(--chart-grid)" strokeDasharray="3 3" />,
    <XAxis
      key="x"
      dataKey="x"
      tickLine={false}
      axisLine={false}
      tickMargin={8}
      minTickGap={24}
      tick={{ fill: "var(--chart-axis)", fontSize: 12 }}
    />,
    <YAxis
      key="y"
      tickLine={false}
      axisLine={false}
      width={isShare ? 40 : 44}
      // Share = 100% stacked: pin [0,1] so the stack fills the height.
      domain={isShare ? [0, 1] : undefined}
      ticks={isShare ? [0, 0.25, 0.5, 0.75, 1] : undefined}
      allowDecimals={isShare}
      tickFormatter={isShare ? (v: number) => `${Math.round(v * 100)}%` : undefined}
      tick={{ fill: "var(--chart-axis)", fontSize: 12 }}
    />,
    <ChartTooltip key="tip" content={<ChartTooltipContent />} />,
    showLegend ? (
      <ChartLegend key="leg" content={<ChartLegendContent />} />
    ) : null,
  ];

  return (
    <ChartContainer
      config={config}
      className="aspect-auto h-[320px] w-full sm:h-[380px]"
    >
      {isArea ? (
        <AreaChart data={rows} margin={margin} stackOffset={stackOffset} accessibilityLayer>
          {axes}
          {series.map((s) => (
            <Area
              key={s.id}
              dataKey={s.id}
              name={s.label}
              type="monotone"
              stroke={s.color}
              fill={s.color}
              fillOpacity={0.25}
              strokeWidth={1.5}
              stackId="a"
              isAnimationActive={false}
            />
          ))}
        </AreaChart>
      ) : (
        <BarChart data={rows} margin={margin} stackOffset={stackOffset} accessibilityLayer>
          {axes}
          {series.map((s) => (
            <Bar
              key={s.id}
              dataKey={s.id}
              name={s.label}
              fill={s.color}
              {...(stacked ? BAR_GAP : {})}
              stackId="a"
              isAnimationActive={false}
            />
          ))}
        </BarChart>
      )}
    </ChartContainer>
  );
}