"use client"

/**
 * Maps registry slugs → live preview sections (shadcn-style stacked examples).
 */

import * as React from "react"

import {
  CatalogChartCardVariantPreview,
  CatalogDataTablePreview,
  CatalogHubTablePreview,
  CatalogKeyMetricsPreview,
  CatalogPageHeaderPreview,
} from "@/components/catalog-live-previews"
import {
  CommandPreview,
  SelectGroupsPreview,
  SelectPreview,
  SelectScrollablePreview,
  SelectStatesPreview,
  SelectionTileGridPreview,
  TableBulkActionBarPreview,
} from "@/components/design-system/data-display-previews"
import { getComponentDocSpec } from "@/lib/design-system/component-docs"
import { DesignSystemExampleCanvas } from "@/components/design-system/component-doc-shell"
import { DS_DOC_SECTION_TITLE } from "@/lib/design-system/doc-typography"
import {
  CalendarDropdownCaptionPreview,
  CalendarPreview,
  CalendarRangePreview,
  CalendarTwoMonthPreview,
  DatePickerPreview,
  DateRangePickerPreview,
  DateTextInputPreview,
} from "@/components/design-system/date-previews"
import {
  CheckboxFieldPreview,
  FieldBasicPreview,
  FieldDisabledPreview,
  FieldInvalidPreview,
  FieldLayoutsPreview,
  FieldSettingsRowPreview,
  FormRhfPreview,
  RadioGroupChoiceCardPreview,
  RadioGroupDefaultPreview,
  RadioGroupDescriptionPreview,
  RadioGroupFieldsetPreview,
  RadioGroupInvalidPreview,
} from "@/components/design-system/form-previews"
import {
  InputDefaultPreview,
  InputGroupPreview,
  InputMaskPreview,
  LabelPreview,
  PaymentCardFieldsPreview,
  SliderPreview,
  TextareaDefaultPreview,
} from "@/components/design-system/input-previews"
import {
  WizardAllVariantsPreview,
  WizardErrorStatePreview,
  WizardHorizontalCompactPreview,
  WizardHorizontalIconsPreview,
  WizardHorizontalNumberedPreview,
  WizardManyStepsPreview,
  WizardVerticalIconsPreview,
  WizardVerticalNumberedPreview,
} from "@/components/design-system/wizard-previews"
import {
  AccordionPreview,
  CollapsiblePreview,
  ScrollAreaPreview,
  SeparatorPreview,
} from "@/components/design-system/layout-previews"
import {
  BreadcrumbPreview,
  TabsPrimaryVariantsPreview,
  TabsSecondaryVariantsPreview,
} from "@/components/design-system/navigation-previews"
import {
  AlertDialogPreview,
  ContextMenuPreview,
  DialogPreview,
  DropdownMenuIconPreview,
  DropdownMenuPreview,
  DropdownMenuRichPreview,
  HoverCardPreview,
  PopoverPreview,
  TextSelectionToolbarPreview,
  TipPreview,
  TooltipPreview,
} from "@/components/design-system/overlay-previews"
import {
  AttachmentCountCellPreview,
  BooleanToggleCellPreview,
  CurrencyCellPreview,
  ExternalLinkCellPreview,
  NumericCellPreview,
  PeopleAvatarRailCellPreview,
  PillCellPreview,
  ProgressCellPreview,
  RatingCellPreview,
  RelativeTimeCellPreview,
  RowActionsCellPreview,
  SignalBarsCellPreview,
  TagListCellPreview,
} from "@/components/design-system/table-cell-previews"

export interface DesignSystemPreviewSection {
  id: string
  title: string
  description?: string
  bare?: boolean
  children: React.ReactNode
}

function section(
  id: string,
  title: string,
  children: React.ReactNode,
  description?: string,
  bare?: boolean,
): DesignSystemPreviewSection {
  return { id, title, description, children, bare }
}

const PREVIEW_SECTIONS: Record<string, DesignSystemPreviewSection[]> = {
  // button, avatar, toggle-switch → component-docs/*.tsx

  // ── Forms (fallback when component-docs/*.tsx has no sections) ──────────
  // Form + Input live specs are in forms-family.tsx (takes precedence).
  form: [
    section("field", "Field layouts", <FieldLayoutsPreview />, "Vertical Field vs horizontal + SettingsFormRow."),
    section("field-basic", "Basic field", <FieldBasicPreview />),
    section("field-invalid", "Invalid field", <FieldInvalidPreview />),
    section("field-disabled", "Disabled field", <FieldDisabledPreview />),
    section("field-set", "FieldSet (checkboxes)", <CheckboxFieldPreview />),
    section("field-settings", "Settings row", <FieldSettingsRowPreview />),
    section("rhf", "react-hook-form", <FormRhfPreview />),
  ],
  input: [
    section("default", "Input", <InputDefaultPreview />),
    section("textarea", "Textarea", <TextareaDefaultPreview />),
    section("input-group", "Input group", <InputGroupPreview />, "Leading/trailing addons."),
    section("input-mask", "Input mask", <InputMaskPreview />, "Phone, ZIP, date, custom."),
    section("label", "Label", <LabelPreview />, "Prefer FieldLabel in product forms."),
    section("slider", "Slider", <SliderPreview />),
    section("payment-card-fields", "Payment card fields", <PaymentCardFieldsPreview />),
  ],
  select: [
    section("default", "Item-aligned", <SelectPreview />),
    section("popper", "Popper", <SelectPreview position="popper" />),
    section("groups", "Groups and separators", <SelectGroupsPreview />),
    section("scrollable", "Scrollable list", <SelectScrollablePreview />),
    section("states", "Invalid, disabled, and size", <SelectStatesPreview />),
  ],
  // checkbox → component-docs/checkbox.tsx
  "radio-group": [
    section("default", "Default", <RadioGroupDefaultPreview />),
    section("fieldset", "Fieldset", <RadioGroupFieldsetPreview />),
    section("description", "With description", <RadioGroupDescriptionPreview />),
    section("choice-card", "Choice card", <RadioGroupChoiceCardPreview />),
    section("invalid", "Invalid", <RadioGroupInvalidPreview />),
    section("selection-tile-grid", "Selection tiles", <SelectionTileGridPreview />, "Radio/checkbox tile grid."),
  ],
  "date-picker": [
    section("calendar", "Calendar (label caption)", <CalendarPreview />, "Low-level date grid primitive."),
    section("calendar-dropdown", "Calendar (dropdown caption)", <CalendarDropdownCaptionPreview />),
    section("calendar-range", "Calendar range (one month)", <CalendarRangePreview />),
    section("calendar-two-month", "Calendar range (two months)", <CalendarTwoMonthPreview />),
    section("date-picker", "Date picker field", <DatePickerPreview />),
    section("date-range", "Date range field", <DateRangePickerPreview />, "One- and two-month popovers."),
    section("date-text", "Masked date text field", <DateTextInputPreview />, "DateTextInputField for filters."),
  ],
  wizard: [
    section("all-variants", "All variants", <WizardAllVariantsPreview />, "Full matrix for QA — numbered, icons, compact, vertical, error, 8-step scroll."),
    section("horizontal-numbered", "Horizontal numbered", <WizardHorizontalNumberedPreview />, "Brand completed · tint active · muted upcoming. Min 12px type."),
    section("horizontal-icons", "Horizontal icons", <WizardHorizontalIconsPreview />, "Icon markers; check replaces icon when done."),
    section("horizontal-compact", "Horizontal compact", <WizardHorizontalCompactPreview />, "Dot rail + Step N of M for dense flows."),
    section("vertical-numbered", "Vertical numbered", <WizardVerticalNumberedPreview />, "Sidebar rail — PatternFly wizard."),
    section("vertical-icons", "Vertical icons", <WizardVerticalIconsPreview />, "Vertical icon rail with descriptions."),
    section("error", "Error state", <WizardErrorStatePreview />, "Current-step validation failure."),
    section("many-steps", "Edge case: overflow", <WizardManyStepsPreview />, "8-step stress test for scroll + guidance — not a product pattern."),
  ],

  // ── Overlays ────────────────────────────────────────────────────────────
  dialog: [
    section("default", "Default", <DialogPreview />),
    section("alert-dialog", "Alert dialog", <AlertDialogPreview />, "Destructive / ack with actions."),
  ],
  popover: [
    section("default", "Default", <PopoverPreview />),
    section("hover-card", "Hover card", <HoverCardPreview />, "Row identity preview on hover."),
  ],
  "dropdown-menu": [
    section("default", "Dropdown menu", <DropdownMenuPreview />),
    section("rich", "Checkboxes, radios, and submenu", <DropdownMenuRichPreview />),
    section("icon", "Icon trigger", <DropdownMenuIconPreview />),
    section("context-menu", "Context menu", <ContextMenuPreview />, "Right-click the surface."),
    section(
      "selection-toolbar",
      "Text selection toolbar",
      <TextSelectionToolbarPreview />,
      "Select text to show the floating toolbar.",
    ),
  ],
  tip: [
    section("default", "Default", <TipPreview />, "Product tooltip wrapper; prefer in app code."),
    section("tooltip", "Tooltip primitive", <TooltipPreview />, "Low-level primitive; Tip is the default."),
  ],
  command: [section("default", "Default", <CommandPreview />)],

  // ── Navigation ──────────────────────────────────────────────────────────
  breadcrumb: [section("default", "Default", <BreadcrumbPreview />)],
  tabs: [
    section(
      "default-variant",
      "Default variant",
      <TabsPrimaryVariantsPreview />,
      "Pill tablist (`variant` default). Label only, with icon, or with TabsCountBadge.",
    ),
    section(
      "line-variant",
      "Line variant",
      <TabsSecondaryVariantsPreview />,
      "Underline tablist (`variant=\"line\"`). Same three trigger shapes.",
    ),
  ],

  // badge, card, coach-mark, kbd, skeleton → component-docs/*.tsx

  // ── Layout ──────────────────────────────────────────────────────────────
  accordion: [
    section("default", "Default", <AccordionPreview />),
    section("collapsible", "Collapsible", <CollapsiblePreview />),
  ],
  separator: [
    section("default", "Default", <SeparatorPreview />),
    section("scroll-area", "Scroll area", <ScrollAreaPreview />),
  ],

  // ── Data display ────────────────────────────────────────────────────────
  // avatar → component-docs/avatar.tsx
  // table → component-docs/table.tsx

  "chart-card": [
    section("normal", "Normal", <CatalogChartCardVariantPreview variant="normal" />, "Title, description, chart body, Ask Leo on card hover."),
    section(
      "tabs",
      "Tabs",
      <CatalogChartCardVariantPreview variant="tabs" />,
      "Chart and Trend panels. Uses the same line tab chrome as metrics tabs.",
    ),
    section("selector", "Selector", <CatalogChartCardVariantPreview variant="selector" />, "Header filter select."),
    section(
      "metrics-tabs",
      "Metrics tabs",
      <CatalogChartCardVariantPreview variant="metrics-tabs" />,
      "Metric cells are tab triggers.",
    ),
    section("kpi-chart", "KPI + chart", <CatalogChartCardVariantPreview variant="kpi-chart" />, "Hero metric above the chart."),
  ],

  // ── Patterns · Data views ───────────────────────────────────────────────
  "data-table": [
    section("grid", "Core grid", <CatalogDataTablePreview />, "Sort, filters, resize."),
    section("hub-table", "HubTable", <CatalogHubTablePreview />, "useTableState + toolbar + Properties."),
    section(
      "bulk-actions",
      "Bulk action bar",
      <TableBulkActionBarPreview />,
      "Floating bar when rows are selected; Esc clears.",
    ),
  ],
  "key-metrics": [section("variants", "Flat, card strip, and metric cards", <CatalogKeyMetricsPreview />)],
  "page-header": [section("default", "Hub header", <CatalogPageHeaderPreview />)],

  // ── Table cells ─────────────────────────────────────────────────────────
  "table-cells": [
    section("progress-cell", "Progress", <ProgressCellPreview />),
    section("currency-cell", "Currency", <CurrencyCellPreview />),
    section("numeric-cell", "Numeric", <NumericCellPreview />),
    section("rating-cell", "Rating", <RatingCellPreview />),
    section("signal-bars-cell", "Signal bars", <SignalBarsCellPreview />),
    section("boolean-toggle-cell", "Boolean toggle", <BooleanToggleCellPreview />),
    section("pill-cell", "Pill", <PillCellPreview />),
    section("tag-list-cell", "Tag list", <TagListCellPreview />),
    section("people-avatar-rail-cell", "People rail", <PeopleAvatarRailCellPreview />),
    section("external-link-cell", "External link", <ExternalLinkCellPreview />),
    section("relative-time-cell", "Relative time", <RelativeTimeCellPreview />),
    section("attachment-count-cell", "Attachment count", <AttachmentCountCellPreview />),
    section("row-actions-cell", "Row actions", <RowActionsCellPreview />),
  ],
}

export function getDesignSystemPreviewSections(slug: string): DesignSystemPreviewSection[] | null {
  const spec = getComponentDocSpec(slug)
  if (spec?.sections.length) {
    return spec.sections.map((block) => ({
      id: block.id,
      title: block.title,
      description: block.description,
      bare: block.bare,
      children: block.children,
    }))
  }
  const sections = PREVIEW_SECTIONS[slug]
  return sections && sections.length > 0 ? sections : null
}

export function designSystemHasLivePreview(slug: string): boolean {
  const spec = getComponentDocSpec(slug)
  if (spec?.sections.length) return true
  return Boolean(PREVIEW_SECTIONS[slug]?.length)
}

const WIDE_PREVIEW_SLUGS = new Set([
  "marketing-banner",
  "table",
  "data-table",
  "hub-table",
  "table-cells",
  "wizard",
  "date-picker",
  "message",
  "leo-assist-bar",
  "coach-mark",
  "tokens-colors",
  "tokens-gradients",
  "tokens-aliases",
  "mode-switch-search",
  "dedicated-search",
  "ask-leo-composer",
  "floating-window",
  "fab",
])

export function DesignSystemPreviewSections({ slug }: { slug: string }) {
  const sections = getDesignSystemPreviewSections(slug)
  if (!sections) return null
  const wideCanvas = WIDE_PREVIEW_SLUGS.has(slug) || slug.startsWith("tokens-")

  return (
    <div className="flex flex-col gap-8">
      {sections.map((block) => (
        <section key={block.id} id={block.id} className="flex flex-col gap-2 scroll-mt-20">
          {block.bare ? null : (
            <h2 className={DS_DOC_SECTION_TITLE}>{block.title}</h2>
          )}
          <DesignSystemExampleCanvas wide={wideCanvas}>{block.children}</DesignSystemExampleCanvas>
        </section>
      ))}
    </div>
  )
}
