"use client"

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

import * as React from "react"

import {
  CommandPreview,
  SelectGroupsPreview,
  SelectPreview,
  SelectScrollablePreview,
  SelectStatesPreview,
  SelectionTileGridPreview,
  TableBulkActionBarPreview,
} from "@/components/design-system/data-display-previews"
import { DesignSystemExampleCanvas } from "@/components/design-system/component-doc-shell"
import { designSystemPreviewIsWide } from "@/lib/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,
  FormRhfPreview,
  RadioGroupChoiceCardPreview,
  RadioGroupDefaultPreview,
  RadioGroupDescriptionPreview,
  RadioGroupFieldsetPreview,
  RadioGroupInvalidPreview,
} from "@/components/design-system/form-previews"
import {
  InputDefaultPreview,
  InputGroupPreview,
  InputMaskPreview,
  InputOTPPreview,
  InputWithPrimaryButtonPreview,
  LabelPreview,
  PasswordValidationPreview,
  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,
  TabsResponsiveCollapsePreview,
  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,
  EmptyCellPreview,
  FavoriteNameCellPreview,
  StatusCellPreview,
  TableNewRowDotPreview,
  CurrencyCellPreview,
  ExternalLinkCellPreview,
  NumericCellPreview,
  PeopleAvatarRailCellPreview,
  PillCellPreview,
  ProgressCellPreview,
  RatingCellPreview,
  RelativeTimeCellPreview,
  RowActionsCellPreview,
  SignalBarsCellPreview,
  TagListCellPreview,
} from "@/components/design-system/table-cell-previews"

const CatalogChartCardVariantPreview = React.lazy(() =>
  import("@/components/catalog-live-previews").then((m) => ({
    default: m.CatalogChartCardVariantPreview,
  })),
)
const CatalogDataTablePreview = React.lazy(() =>
  import("@/components/catalog-live-previews").then((m) => ({
    default: m.CatalogDataTablePreview,
  })),
)
const CatalogHubTablePreview = React.lazy(() =>
  import("@/components/catalog-live-previews").then((m) => ({
    default: m.CatalogHubTablePreview,
  })),
)
const CatalogKeyMetricsPreview = React.lazy(() =>
  import("@/components/catalog-live-previews").then((m) => ({
    default: m.CatalogKeyMetricsPreview,
  })),
)
const CatalogPageHeaderPreview = React.lazy(() =>
  import("@/components/catalog-live-previews").then((m) => ({
    default: m.CatalogPageHeaderPreview,
  })),
)

function SuspendedPreview({ children }: { children: React.ReactNode }) {
  return <React.Suspense fallback={null}>{children}</React.Suspense>
}

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 and horizontal Field compositions."),
    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("rhf", "react-hook-form", <FormRhfPreview />),
  ],
  input: [
    section("default", "Input", <InputDefaultPreview />),
    section("textarea", "Textarea", <TextareaDefaultPreview />),
    section("input-group", "Input group", <InputGroupPreview />, "Leading and trailing addons."),
    section("input-button", "Input with primary action", <InputWithPrimaryButtonPreview />),
    section("password", "Password with validation", <PasswordValidationPreview />),
    section("otp", "One time password", <InputOTPPreview />),
    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.",
    ),
    section(
      "responsive-collapse",
      "Responsive collapse",
      <TabsResponsiveCollapsePreview />,
      "`TabsListScrollRegion` + `TabsTriggerIcon` / `TabsTriggerLabel`, on both variants. Inactive tabs drop to icon only when the labels stop fitting, then whole tabs move into an overflow menu.",
    ),
  ],

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

  // ── Patterns · Data views ───────────────────────────────────────────────
  "data-table": [
    section("grid", "Core grid", <SuspendedPreview><CatalogDataTablePreview /></SuspendedPreview>, "Sort, filters, resize."),
    section("hub-table", "HubTable", <SuspendedPreview><CatalogHubTablePreview /></SuspendedPreview>, "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", <SuspendedPreview><CatalogKeyMetricsPreview /></SuspendedPreview>)],
  "page-header": [section("default", "Hub header", <SuspendedPreview><CatalogPageHeaderPreview /></SuspendedPreview>)],

  // ── 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("status-cell", "Status", <StatusCellPreview />),
    section("table-new-row-dot", "New row", <TableNewRowDotPreview />),
    section("favorite-name-cell", "Name + favorite", <FavoriteNameCellPreview />),
    section("empty-cell", "Empty value", <EmptyCellPreview />),
    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 sections = PREVIEW_SECTIONS[slug]
  return sections && sections.length > 0 ? sections : null
}

export function DesignSystemPreviewSections({ slug }: { slug: string }) {
  const sections = getDesignSystemPreviewSections(slug)
  if (!sections) return null
  const wideCanvas = designSystemPreviewIsWide(slug)

  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>
  )
}

export { designSystemHasLivePreview } from "@/components/design-system/design-system-preview-meta"