"use client";

import { useCallback } from "react";
import { QueryProvider } from "yt-dlp-transcript-common/components/QueryProvider";
import { useStats } from "yt-dlp-transcript-common/components/statsCache";
import { useSummaries } from "yt-dlp-transcript-common/components/summariesCache";
import { ChartsDashboard } from "yt-dlp-transcript-common/components/charts/ChartsDashboard";
import {
  PRESET_GROUPS,
  type ChartTemplates,
  type Dashboard,
} from "yt-dlp-transcript-common/lib/chartConfig";
import { saveDefaultDashboardAction } from "../lib/chartsActions";

function Inner({
  templates,
  siteId,
}: {
  templates: ChartTemplates;
  siteId: string;
}) {
  const { stats, ready, loadedPages, pageCount, manifest, error } = useStats();
  const { summaries } = useSummaries();

  const onPersist = useCallback(
    (dashboard: Dashboard) => {
      void saveDefaultDashboardAction(siteId, dashboard);
    },
    [siteId],
  );

  if (error) {
    return (
      <p className="text-sm text-destructive">
        Failed to load the stats dataset ({error.message}). Run{" "}
        <strong>Build index</strong> under Pool on the Sites page first — it
        builds the stats datasets too.
      </p>
    );
  }
  if (!ready) {
    return (
      <p className="text-sm text-muted-foreground">
        Loading stats… {pageCount > 0 ? `(${loadedPages}/${pageCount} pages)` : ""}
      </p>
    );
  }

  const channels = (manifest?.channels ?? []).map((c) => ({
    slug: c.slug,
    name: c.name,
  }));

  return (
    <ChartsDashboard
      initialDashboard={templates.defaultDashboard}
      gallery={PRESET_GROUPS}
      stats={stats}
      summaries={summaries}
      channels={channels}
      onPersist={onPersist}
    />
  );
}

export function EditorChartsClient({
  templates,
  siteId,
}: {
  templates: ChartTemplates;
  siteId: string;
}) {
  return (
    <QueryProvider>
      <Inner templates={templates} siteId={siteId} />
    </QueryProvider>
  );
}