import { ChartBuilder } from "../components/analytics/ChartBuilder";
import { SavedDashboardList } from "../components/analytics/SavedDashboardList";
import { useAdminDatasets } from "../hooks/useAdminDatasets";
import { savedDashboardPresets } from "../registry/datasets";

export function AnalyticsStudioPage() {
  const { dataset, datasets, error, isLoading, selectedDatasetId, setSelectedDatasetId } =
    useAdminDatasets();

  return (
    <div className="space-y-6">
      <section className="rounded-[2rem] border border-border bg-[radial-gradient(circle_at_top_left,rgba(20,83,45,0.18),transparent_40%),linear-gradient(135deg,rgba(255,251,235,0.95),rgba(244,240,231,0.98))] p-8">
        <p className="text-xs uppercase tracking-[0.25em] text-foreground/55">Analytics</p>
        <h1 className="mt-3 text-4xl font-semibold">Analytics Studio</h1>
        <p className="mt-4 max-w-2xl text-sm text-foreground/70">
          Curated production datasets for operators who need charted context before they take action
          in the explorer or action center.
        </p>
      </section>

      {isLoading ? <p>Loading analytics...</p> : null}
      {error ? <p className="text-red-600">{error}</p> : null}

      <div className="grid gap-6 xl:grid-cols-[minmax(0,1fr)_320px]">
        <ChartBuilder
          dataset={dataset}
          datasets={datasets}
          onSelectDatasetId={setSelectedDatasetId}
          selectedDatasetId={selectedDatasetId}
        />
        <SavedDashboardList
          dashboards={savedDashboardPresets}
          onOpen={(datasetId) => setSelectedDatasetId(datasetId)}
        />
      </div>
    </div>
  );
}
