"use client";

import { useMemo, useRef, useState } from "react";
import type { DisplaySummary } from "../../lib/transcripts";
import type { VideoStat } from "../../lib/stats";
import type { ChartConfig, ChartFilters } from "../../lib/chartConfig";
import { aggregate, mergeFilters } from "../../lib/chartAggregate";
import { ChartView } from "./ChartView";
import { useChannelSites } from "./channelSites";
import { useSearchSeries } from "./useSearchSeries";
import { copyPngToClipboard, exportCsv, exportPng } from "./chartExport";

type Props = {
  config: ChartConfig;
  stats: readonly VideoStat[];
  summaries: DisplaySummary[];
  dashboardFilters: ChartFilters;
  onEdit?: () => void;
  onRemove?: () => void;
};

const btn =
  "rounded-md border border-border px-2 py-1 text-xs hover:bg-muted disabled:opacity-50";

export function ChartCard({
  config,
  stats,
  summaries,
  dashboardFilters,
  onEdit,
  onRemove,
}: Props) {
  const ref = useRef<HTMLDivElement>(null);
  const [busy, setBusy] = useState<string | null>(null);

  const merged = useMemo<ChartConfig>(
    () => ({ ...config, filters: mergeFilters(dashboardFilters, config.filters) }),
    [config, dashboardFilters],
  );

  // Channel→sites map for groupBy "site" (null outside the hub). See
  // channelSites.tsx.
  const channelSites = useChannelSites();

  // Both data sources are hooked unconditionally (rules of hooks); the search
  // hook is inert unless this chart has a search block.
  const metaData = useMemo(
    () => (config.search ? null : aggregate(stats, merged, { channelSites })),
    [stats, merged, config.search, channelSites],
  );
  const searchState = useSearchSeries(
    merged,
    config.search ?? { queryTree: "", metric: "matchedVideos" },
    stats,
    summaries,
    !!config.search,
  );

  const data = metaData ?? searchState.data;
  const loading = config.search ? searchState.loading : false;

  const run = async (label: string, fn: () => void | Promise<void>) => {
    setBusy(label);
    try {
      await fn();
    } catch (e) {
      console.error(e);
      alert(e instanceof Error ? e.message : String(e));
    } finally {
      setBusy(null);
    }
  };

  return (
    <div
      ref={ref}
      className="flex flex-col gap-2 rounded-lg border border-border bg-card p-3"
    >
      <div className="flex items-start justify-between gap-2">
        <div className="min-w-0">
          <h3 className="truncate text-sm font-semibold">{config.title}</h3>
          {config.search && (
            <p className="text-xs text-muted-foreground">
              {loading
                ? "Searching…"
                : `${searchState.matchedVideos} videos · ${searchState.totalHits} hits`}
            </p>
          )}
        </div>
        <div className="flex shrink-0 gap-1">
          {onEdit && (
            <button className={btn} onClick={onEdit} type="button">
              Edit
            </button>
          )}
          <button
            className={btn}
            type="button"
            disabled={busy !== null}
            onClick={() => run("png", () => exportPng(ref.current, config.title))}
          >
            PNG
          </button>
          <button
            className={btn}
            type="button"
            disabled={busy !== null}
            onClick={() => run("copy", () => copyPngToClipboard(ref.current))}
          >
            Copy
          </button>
          <button
            className={btn}
            type="button"
            disabled={busy !== null}
            onClick={() => run("csv", () => exportCsv(data, config.title))}
          >
            CSV
          </button>
          {onRemove && (
            <button
              className={`${btn} text-destructive`}
              onClick={onRemove}
              type="button"
            >
              Remove
            </button>
          )}
        </div>
      </div>
      <ChartView data={data} config={merged} />
    </div>
  );
}