"use client";

/**
 * Catalog detail-pane previews — compose real DS components (no bespoke stand-ins).
 */

import * as React from "react";
import { Bar, BarChart, CartesianGrid, XAxis, YAxis } from "recharts";

import {
  ChartCard,
  ChartLeoPlotInsightOverlay,
  type ChartCardVariant,
} from "@/components/charts-core";
import { CATALOG_PREVIEW_CHART_LEO } from "@/lib/catalog-preview-chart-leo";
import { KeyMetrics, type MetricItem } from "@/components/key-metrics";
import {
  LibraryBoardCard,
  LibraryBoardView,
  LibraryListRowCard,
} from "@/components/library-board-view";
import { buildLibraryHubColumnDefs } from "@/components/library-table";
import { PageHeader } from "@/components/page-header";
import { Button } from "@/components/ui/button";
import { ColumnTypesRuleDemoTable } from "@/components/column-types-rule-demo-client";
import { DataTable } from "@/components/data-table";
import { useTableState } from "@/components/data-table/use-table-state";
import type { ColumnDef } from "@/components/data-table/types";
import { HubTable } from "@/components/data-views";
import {
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
} from "@/components/ui/chart";
import { ViewSegmentedControl } from "@/components/ui/view-segmented-control";
import { CHART_AXIS_TICK } from "@/lib/chart-typography";
import { toggleLibraryItemFavorite } from "@/lib/library-nav";
import { LIBRARY_ITEMS, type LibraryItem } from "@/lib/mock/library";
import { cn } from "@/lib/utils";

const CATALOG_LIBRARY_ROWS: LibraryItem[] = LIBRARY_ITEMS.slice(0, 9);

const CATALOG_METRICS: MetricItem[] = [
  {
    id: "published",
    label: "Published",
    value: 128,
    delta: "+6",
    trend: "up",
    trendPolarity: "higher_is_better",
    href: "#published",
    chart: {
      kind: "sparkline",
      series: [
        { value: 98, label: "Jan" },
        { value: 104, label: "Feb" },
        { value: 110, label: "Mar" },
        { value: 116, label: "Apr" },
        { value: 122, label: "May" },
        { value: 128, label: "Jun" },
      ],
    },
  },
  {
    id: "draft",
    label: "Draft",
    value: 14,
    delta: "-2",
    trend: "down",
    trendPolarity: "higher_is_better",
    href: "#draft",
    chart: {
      kind: "bars",
      tone: "info",
      series: [
        { value: 18, label: "Mon" },
        { value: 16, label: "Tue" },
        { value: 15, label: "Wed" },
        { value: 17, label: "Thu" },
        { value: 14, label: "Fri" },
        { value: 14, label: "Sat" },
        { value: 14, label: "Sun" },
      ],
    },
  },
  {
    id: "review",
    label: "In review",
    value: 9,
    delta: "",
    trend: "neutral",
    trendPolarity: "informational",
    href: "#review",
    progress: 45,
  },
  {
    id: "flags",
    label: "Review flags",
    value: 2,
    delta: "+1",
    trend: "up",
    trendPolarity: "lower_is_better",
    href: "#flags",
    alert: "danger",
    chart: {
      kind: "sparkline",
      tone: "danger",
      series: [
        { value: 1, label: "Week 1" },
        { value: 0, label: "Week 2" },
        { value: 1, label: "Week 3" },
        { value: 1, label: "Week 4" },
        { value: 2, label: "Week 5" },
      ],
    },
  },
];

const CATALOG_CHART_DATA = [
  { month: "Jan", placements: 42 },
  { month: "Feb", placements: 58 },
  { month: "Mar", placements: 74 },
  { month: "Apr", placements: 68 },
  { month: "May", placements: 81 },
];

const catalogChartConfig = {
  placements: { label: "Placements", color: "var(--brand-color)" },
} as const;

const CATALOG_CHART_FILTER_OPTIONS = [
  { value: "30d", label: "Last 30 days" },
  { value: "90d", label: "Last quarter" },
  { value: "1y", label: "Last year" },
];

const CATALOG_CHART_VARIANT_OPTIONS: {
  value: ChartCardVariant;
  label: string;
  icon: string;
}[] = [
  { value: "normal", label: "Normal", icon: "fa-light fa-chart-column" },
  { value: "tabs", label: "Tabs", icon: "fa-light fa-table-columns" },
  { value: "selector", label: "Selector", icon: "fa-light fa-filter" },
  { value: "metrics-tabs", label: "Metrics", icon: "fa-light fa-gauge-high" },
  { value: "kpi-chart", label: "KPI", icon: "fa-light fa-hashtag" },
];

function CatalogMiniBarChart() {
  return (
    <div className="relative w-full min-h-[180px] flex-1">
      <ChartContainer config={catalogChartConfig} className="h-[180px] w-full">
        <BarChart
          data={CATALOG_CHART_DATA}
          margin={{ left: -8, right: 4, top: 4, bottom: 0 }}
        >
          <CartesianGrid
            vertical={false}
            strokeDasharray="3 3"
            stroke="var(--border)"
          />
          <XAxis
            dataKey="month"
            tickLine={false}
            axisLine={false}
            tick={CHART_AXIS_TICK}
          />
          <YAxis
            tickLine={false}
            axisLine={false}
            tick={CHART_AXIS_TICK}
            width={32}
          />
          <ChartTooltip content={<ChartTooltipContent />} />
          <Bar
            dataKey="placements"
            fill="var(--brand-color)"
            radius={[4, 4, 0, 0]}
          />
        </BarChart>
      </ChartContainer>
      <ChartLeoPlotInsightOverlay data={CATALOG_CHART_DATA} xDataKey="month" />
    </div>
  );
}

const CATALOG_CHART_MINI_METRICS = [
  {
    label: "Placements",
    value: "128",
    trend: "up" as const,
    trendPolarity: "higher_is_better" as const,
  },
  {
    label: "Applications",
    value: "214",
    trend: "up" as const,
    trendPolarity: "informational" as const,
  },
  {
    label: "Reviews",
    value: "42",
    trend: "neutral" as const,
    trendPolarity: "informational" as const,
  },
];

export function CatalogChartCardVariantPreview({
  variant,
  className,
}: {
  variant: ChartCardVariant;
  className?: string;
}) {
  const needsMiniMetrics =
    variant === "metrics-tabs" || variant === "kpi-chart";
  const needsSelectorFilter = variant === "selector";

  return (
    <ChartCard
      variant={variant}
      title="Placements by month"
      description="Monthly placement activity"
      filterOptions={
        needsSelectorFilter ? CATALOG_CHART_FILTER_OPTIONS : undefined
      }
      defaultFilter={needsSelectorFilter ? "30d" : undefined}
      miniMetrics={needsMiniMetrics ? CATALOG_CHART_MINI_METRICS : undefined}
      leoInsight={CATALOG_PREVIEW_CHART_LEO}
      className={cn("min-h-[280px]", className)}
    >
      <CatalogMiniBarChart />
    </ChartCard>
  );
}

export function CatalogChartCardPreview({ className }: { className?: string }) {
  const [variant, setVariant] =
    React.useState<ChartCardVariant>("metrics-tabs");

  return (
    <div className={cn("flex flex-col gap-3", className)}>
      <ViewSegmentedControl
        value={variant}
        onValueChange={(v) => setVariant(v as ChartCardVariant)}
        aria-label="ChartCard variant"
        options={CATALOG_CHART_VARIANT_OPTIONS}
      />
      <CatalogChartCardVariantPreview variant={variant} />
    </div>
  );
}

export function CatalogKeyMetricsPreview({
  className,
}: {
  className?: string;
}) {
  const [variant, setVariant] = React.useState<"cards" | "card" | "flat">(
    "cards",
  );
  const [size, setSize] = React.useState<"sm" | "md" | "lg">("md");

  return (
    <div className={cn("flex min-w-0 flex-col gap-3", className)}>
      <ViewSegmentedControl
        value={variant}
        onValueChange={setVariant}
        aria-label="KeyMetrics variant"
        options={[
          { value: "cards", label: "Metric cards", icon: "fa-light fa-grid-2" },
          {
            value: "flat",
            label: "Grouped strip",
            icon: "fa-light fa-grip-lines",
          },
          {
            value: "card",
            label: "Dashboard card",
            icon: "fa-light fa-square",
          },
        ]}
      />
      <ViewSegmentedControl
        value={size}
        onValueChange={setSize}
        aria-label="KeyMetrics size"
        options={[
          { value: "sm", label: "Small" },
          { value: "md", label: "Medium" },
          { value: "lg", label: "Large" },
        ]}
      />
      <KeyMetrics
        variant={variant}
        size={size}
        metrics={CATALOG_METRICS}
        title="Placement health"
        description="Spring 2026 cohort"
        showHeader={variant === "card"}
        metricsSingleRow={variant !== "cards"}
        className={variant === "cards" ? "px-0 lg:px-0" : undefined}
      />
    </div>
  );
}

export function CatalogPageHeaderPreview() {
  return (
    <PageHeader
      headingLevel="h2"
      title="Records"
      subtitle="24 records · Updated today"
      actions={
        <Button type="button" size="sm">
          New record
        </Button>
      }
    />
  );
}

export function CatalogBoardCardPreview() {
  return (
    <LibraryBoardCard
      row={CATALOG_LIBRARY_ROWS[0]!}
      onToggleFavorite={() => {}}
    />
  );
}

export function CatalogLibraryListRowPreview() {
  return (
    <LibraryListRowCard
      row={CATALOG_LIBRARY_ROWS[0]!}
      onToggleFavorite={() => {}}
    />
  );
}

function CatalogLibraryHubTablePreview({
  rows,
  onRowsChange,
}: {
  rows: LibraryItem[];
  onRowsChange: React.Dispatch<React.SetStateAction<LibraryItem[]>>;
}) {
  const toggleFavorite = React.useCallback(
    (row: LibraryItem) => {
      onRowsChange((prev) =>
        prev.map((item) =>
          item.id === row.id ? toggleLibraryItemFavorite(item) : item,
        ),
      );
    },
    [onRowsChange],
  );

  const columns = React.useMemo(
    () => buildLibraryHubColumnDefs(rows, toggleFavorite),
    [rows, toggleFavorite],
  );

  return (
    <div className="min-h-0 overflow-x-auto rounded-lg border border-border bg-muted/20">
      <HubTable<LibraryItem>
        rows={rows}
        columns={columns}
        view="table"
        hubLabel="Question bank"
        lifecycleTabLabel="All questions"
        searchAriaLabel="Search questions"
        getRowId={(row) => row.id}
        getRowSelectionLabel={(row) => row.stem}
        defaultSort={{ key: "stem", dir: "asc" }}
        emptyState="No questions."
        renderers={{}}
        supportedViewTypes={["table"]}
        persistKey="catalog-preview:library-hub-table"
        pagination={false}
      />
    </div>
  );
}

export function CatalogLibraryHubLivePreview({
  className,
}: {
  className?: string;
}) {
  const [view, setView] = React.useState<"table" | "board">("board");
  const [rows, setRows] = React.useState(CATALOG_LIBRARY_ROWS);

  const toggleFavorite = React.useCallback((row: LibraryItem) => {
    setRows((prev) =>
      prev.map((item) =>
        item.id === row.id ? toggleLibraryItemFavorite(item) : item,
      ),
    );
  }, []);

  return (
    <div className={cn("flex flex-col gap-3", className)}>
      <ViewSegmentedControl
        value={view}
        onValueChange={setView}
        aria-label="Library view"
        options={[
          { value: "table", label: "Table", icon: "fa-light fa-table" },
          { value: "board", label: "Board", icon: "fa-light fa-columns" },
        ]}
      />
      {view === "board" ? (
        <div className="overflow-x-auto rounded-lg border border-border bg-muted/20">
          <LibraryBoardView
            rows={rows}
            groupByColumnKey="topic"
            onToggleFavorite={toggleFavorite}
          />
        </div>
      ) : (
        <CatalogLibraryHubTablePreview rows={rows} onRowsChange={setRows} />
      )}
    </div>
  );
}

export function CatalogHubTablePreview({ className }: { className?: string }) {
  return (
    <ColumnTypesRuleDemoTable
      persistKey="catalog-preview:hub-table"
      className={cn("min-h-0", className)}
      embeddedPreview
    />
  );
}

type CatalogGridRow = {
  id: string;
  name: string;
  status: string;
  updated: string;
} & Record<string, unknown>;

const CATALOG_GRID_ROWS: CatalogGridRow[] = [
  {
    id: "q_101",
    name: "Diaphragm innervation",
    status: "Published",
    updated: "2026-06-01",
  },
  {
    id: "q_102",
    name: "Brachial plexus roots",
    status: "Draft",
    updated: "2026-06-02",
  },
  {
    id: "q_103",
    name: "Cranial nerve functions",
    status: "In review",
    updated: "2026-06-03",
  },
  {
    id: "q_104",
    name: "Lower limb dermatomes",
    status: "Published",
    updated: "2026-06-04",
  },
  {
    id: "q_105",
    name: "Spinal cord tracts",
    status: "Draft",
    updated: "2026-06-05",
  },
];

const CATALOG_GRID_COLUMNS: ColumnDef<CatalogGridRow>[] = [
  {
    key: "name",
    label: "Question",
    width: 280,
    filter: { type: "text" },
  },
  {
    key: "status",
    label: "Status",
    width: 120,
    filter: {
      type: "select",
      options: [
        { value: "Published", label: "Published" },
        { value: "Draft", label: "Draft" },
        { value: "In review", label: "In review" },
      ],
    },
  },
  {
    key: "updated",
    label: "Updated",
    width: 120,
    filter: { type: "date" },
  },
];

/** Core grid only — sort, filters, resize. Hubs wrap this in HubTable (+ Properties, views). */
export function CatalogDataTablePreview({ className }: { className?: string }) {
  const columns = React.useMemo(() => CATALOG_GRID_COLUMNS, []);
  const state = useTableState(CATALOG_GRID_ROWS, columns, {
    key: "name",
    dir: "asc",
  });

  return (
    <div className={cn("flex min-h-0 flex-col gap-2", className)}>
      <p className="text-xs text-muted-foreground">
        <span className="font-medium text-foreground">DataTable</span> — the
        grid primitive. List hubs compose it via{" "}
        <span className="font-medium text-foreground">HubTable</span> (toolbar +
        Properties + board/list/dashboard).
      </p>
      <div className="overflow-hidden rounded-lg border border-border bg-background">
        <DataTable
          data={CATALOG_GRID_ROWS}
          columns={columns}
          getRowId={(row) => row.id}
          getRowSelectionLabel={(row) => row.name}
          state={state}
          defaultSort={{ key: "name", dir: "asc" }}
          emptyState="No questions match your filters."
        />
      </div>
    </div>
  );
}