"use client"

import * as React from "react"

import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb"
import { Button } from "@/components/ui/button"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import {
  Tabs,
  TabsContent,
  TabsCountBadge,
  TabsList,
  TabsTrigger,
  TabsTriggerIcon,
  TabsTriggerLabel,
} from "@/components/ui/tabs"
import { Tip } from "@/components/ui/tip"
import { FilterChipGroup } from "@/components/ui/filter-chip-group"
import { ViewSegmentedControl } from "@/components/ui/view-segmented-control"
import {
  viewSegmentedButtonClass,
  viewSegmentedToolbarClass,
} from "@/components/ui/view-segmented-control"
import { DS_DOC_TABLE_META } from "@/lib/design-system/doc-typography"
import { cn } from "@/lib/utils"

/* ── Doc layout helpers ─────────────────────────────────────────────────── */

function DocVariantStack({ children }: { children: React.ReactNode }) {
  return <div className="flex w-full max-w-2xl flex-col gap-8">{children}</div>
}

function DocVariantRow({
  label,
  children,
}: {
  label: string
  children: React.ReactNode
}) {
  return (
    <div className="flex flex-col gap-2">
      <p className={DS_DOC_TABLE_META}>{label}</p>
      {children}
    </div>
  )
}

/** Mount hidden panels so Radix tab triggers satisfy `aria-controls` in doc-only previews. */
function TabsDemoPanels({ values }: { values: string[] }) {
  return (
    <>
      {values.map((value) => (
        <TabsContent key={value} value={value} forceMount hidden className="sr-only">
          {value}
        </TabsContent>
      ))}
    </>
  )
}

function viewToolbarCountBadgeClass(filterId: string, isActive: boolean): string {
  const palettes: Record<string, { active: string; inactive: string }> = {
    all: {
      active: "bg-slate-600 text-white dark:bg-slate-500",
      inactive: "bg-slate-100 text-slate-800 dark:bg-slate-800/70 dark:text-slate-100",
    },
    ongoing: {
      active: "bg-blue-600 text-white",
      inactive: "bg-blue-100 text-blue-950 dark:bg-blue-950/45 dark:text-blue-100",
    },
  }
  const p = palettes[filterId] ?? palettes.all
  return isActive ? p.active : p.inactive
}

/* ── Breadcrumb ─────────────────────────────────────────────────────────── */

export function BreadcrumbPreview() {
  return (
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink href="#">Dashboard</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbPage>Students</BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  )
}

/* ── Default variant (pill) ─────────────────────────────────────────────── */

/*
 * These rows carry `pinVariant`, which product surfaces must not: the compact
 * shell renders an unpinned `default` row as `line`, so without it a page
 * documenting the pill would quietly show an underline instead.
 */
export function TabsPrimaryVariantsPreview() {
  return (
    <DocVariantStack>
      <DocVariantRow label="Label only">
        <Tabs defaultValue="one" className="w-full">
          <TabsList ariaLabel="Pill tabs, labels" variant="default" pinVariant className="w-fit">
            <TabsTrigger value="one">Tab one</TabsTrigger>
            <TabsTrigger value="two">Tab two</TabsTrigger>
            <TabsTrigger value="three">Tab three</TabsTrigger>
          </TabsList>
          <TabsDemoPanels values={["one", "two", "three"]} />
        </Tabs>
      </DocVariantRow>
      <DocVariantRow label="With icon">
        <Tabs defaultValue="one" className="w-full">
          <TabsList ariaLabel="Pill tabs, icons" variant="default" pinVariant className="w-fit">
            <TabsTrigger value="one" className="gap-1.5">
              <TabsTriggerIcon>
                <i className="fa-light fa-layer-group text-xs" aria-hidden="true" />
              </TabsTriggerIcon>
              <TabsTriggerLabel>Tab one</TabsTriggerLabel>
            </TabsTrigger>
            <TabsTrigger value="two" className="gap-1.5">
              <TabsTriggerIcon>
                <i className="fa-light fa-file-lines text-xs" aria-hidden="true" />
              </TabsTriggerIcon>
              <TabsTriggerLabel>Tab two</TabsTriggerLabel>
            </TabsTrigger>
            <TabsTrigger value="three" className="gap-1.5">
              <TabsTriggerIcon>
                <i className="fa-light fa-grid-2 text-xs" aria-hidden="true" />
              </TabsTriggerIcon>
              <TabsTriggerLabel>Tab three</TabsTriggerLabel>
            </TabsTrigger>
          </TabsList>
          <TabsDemoPanels values={["one", "two", "three"]} />
        </Tabs>
      </DocVariantRow>
      <DocVariantRow label="With count">
        <Tabs defaultValue="one" className="w-full">
          <TabsList ariaLabel="Pill tabs, counts" variant="default" pinVariant className="w-fit">
            <TabsTrigger value="one">
              Tab one
              <TabsCountBadge count={4} />
            </TabsTrigger>
            <TabsTrigger value="two">
              Tab two
              <TabsCountBadge count={12} />
            </TabsTrigger>
            <TabsTrigger value="three">
              Tab three
              <TabsCountBadge count={3} />
            </TabsTrigger>
          </TabsList>
          <TabsDemoPanels values={["one", "two", "three"]} />
        </Tabs>
      </DocVariantRow>
    </DocVariantStack>
  )
}

/** @deprecated Use TabsPrimaryVariantsPreview — kept for catalog aliases */
export function TabsDefaultPreview() {
  return (
    <Tabs defaultValue="one" className="w-full max-w-md">
      <TabsList variant="default" pinVariant className="w-fit">
        <TabsTrigger value="one">Overview</TabsTrigger>
        <TabsTrigger value="two">Details</TabsTrigger>
      </TabsList>
      <TabsContent value="one" className="pt-3 text-sm text-muted-foreground">
        Default pill tablist
      </TabsContent>
      <TabsContent value="two" className="pt-3 text-sm text-muted-foreground">
        Second panel
      </TabsContent>
    </Tabs>
  )
}

/* ── Line variant (underline) ───────────────────────────────────────────── */

export function TabsSecondaryVariantsPreview() {
  return (
    <DocVariantStack>
      <DocVariantRow label="Label only">
        <Tabs defaultValue="alpha" className="w-full">
          <TabsList ariaLabel="Line tabs, labels" variant="line" className="w-fit justify-start">
            <TabsTrigger value="alpha" className="min-h-9 flex-none px-3">
              Alpha
            </TabsTrigger>
            <TabsTrigger value="beta" className="min-h-9 flex-none px-3">
              Beta
            </TabsTrigger>
          </TabsList>
          <TabsDemoPanels values={["alpha", "beta"]} />
        </Tabs>
      </DocVariantRow>
      <DocVariantRow label="With icon">
        <Tabs defaultValue="alpha" className="w-full">
          <TabsList ariaLabel="Line tabs, icons" variant="line" className="w-fit justify-start">
            <TabsTrigger value="alpha" className="min-h-9 flex-none gap-2 px-3">
              <TabsTriggerIcon>
                <i className="fa-light fa-chart-mixed text-sm" aria-hidden="true" />
              </TabsTriggerIcon>
              <TabsTriggerLabel>Alpha</TabsTriggerLabel>
            </TabsTrigger>
            <TabsTrigger value="beta" className="min-h-9 flex-none gap-2 px-3">
              <TabsTriggerIcon>
                <i className="fa-light fa-chart-line text-sm" aria-hidden="true" />
              </TabsTriggerIcon>
              <TabsTriggerLabel>Beta</TabsTriggerLabel>
            </TabsTrigger>
          </TabsList>
          <TabsDemoPanels values={["alpha", "beta"]} />
        </Tabs>
      </DocVariantRow>
      <DocVariantRow label="With count">
        <Tabs defaultValue="alpha" className="w-full">
          <TabsList ariaLabel="Line tabs, counts" variant="line" className="w-fit justify-start">
            <TabsTrigger value="alpha" className="min-h-9 flex-none gap-2 px-3">
              Alpha
              <TabsCountBadge count={6} />
            </TabsTrigger>
            <TabsTrigger value="beta" className="min-h-9 flex-none gap-2 px-3">
              Beta
              <TabsCountBadge count={2} />
            </TabsTrigger>
          </TabsList>
          <TabsDemoPanels values={["alpha", "beta"]} />
        </Tabs>
      </DocVariantRow>
    </DocVariantStack>
  )
}

/** @deprecated Use TabsSecondaryVariantsPreview */
export function TabsLinePreview() {
  return (
    <Tabs defaultValue="chart" className="w-full max-w-md">
      <TabsList variant="line" className="w-full justify-start">
        <TabsTrigger value="chart" className="min-h-9 flex-none gap-2 px-3">
          <i className="fa-light fa-chart-mixed text-sm" aria-hidden="true" />
          Chart
        </TabsTrigger>
        <TabsTrigger value="trend" className="min-h-9 flex-none gap-2 px-3">
          <i className="fa-light fa-chart-line text-sm" aria-hidden="true" />
          Trend
        </TabsTrigger>
      </TabsList>
      <TabsContent value="chart" className="pt-3 text-sm text-muted-foreground">
        Chart panel body
      </TabsContent>
      <TabsContent value="trend" className="pt-3 text-sm text-muted-foreground">
        Trend panel body
      </TabsContent>
    </Tabs>
  )
}

const RESPONSIVE_TABS = [
  { value: "chart", label: "Chart", icon: "fa-chart-mixed" },
  { value: "trend", label: "Trend", icon: "fa-chart-line" },
  { value: "table", label: "Table", icon: "fa-table" },
  { value: "notes", label: "Notes", icon: "fa-note-sticky" },
]

/**
 * One resizable row. Trigger sizing is left to the variant, so the pill and the
 * line row each collapse at their own scale rather than a shared override.
 */
function ResponsiveCollapseRow({
  variant,
  ariaLabel,
}: {
  variant: "default" | "line"
  ariaLabel: string
}) {
  return (
    <div className="w-[26rem] max-w-full min-w-[7rem] resize-x overflow-auto rounded-lg border border-border p-2">
      <Tabs defaultValue="chart">
        <TabsList ariaLabel={ariaLabel} variant={variant} pinVariant className="justify-start">
          {RESPONSIVE_TABS.map(tab => (
            <TabsTrigger key={tab.value} value={tab.value}>
              <TabsTriggerIcon>
                <i
                  className={cn(
                    "fa-light",
                    tab.icon,
                    variant === "line" ? "text-sm" : "text-xs",
                  )}
                  aria-hidden="true"
                />
              </TabsTriggerIcon>
              <TabsTriggerLabel>{tab.label}</TabsTriggerLabel>
            </TabsTrigger>
          ))}
        </TabsList>
        {RESPONSIVE_TABS.map(tab => (
          <TabsContent
            key={tab.value}
            value={tab.value}
            className="pt-3 text-sm text-muted-foreground"
          >
            {tab.label} panel body
          </TabsContent>
        ))}
      </Tabs>
    </div>
  )
}

export function TabsResponsiveCollapsePreview() {
  return (
    <div className="w-full max-w-md space-y-4">
      <div className="space-y-2">
        <p className="text-xs font-medium text-foreground">Default variant</p>
        <ResponsiveCollapseRow variant="default" ariaLabel="Chart view, pill tabs" />
      </div>
      <div className="space-y-2">
        <p className="text-xs font-medium text-foreground">Line variant</p>
        <ResponsiveCollapseRow variant="line" ariaLabel="Chart view, line tabs" />
      </div>
      <p className="text-xs text-muted-foreground">
        Drag the lower right corner of either row to narrow it. Both variants shed
        the same way, because the behaviour lives in the scroll region rather than
        the chrome. Once the labels stop fitting, inactive tabs show their icon
        alone and name themselves on hover or focus, while the selected tab keeps
        its label. Narrower still, the tabs that no longer fit move into a menu at
        the end of the row. Picking one there brings it back onto the row and sends
        another tab into the menu, so the selected tab is always visible.
      </p>
    </div>
  )
}

export function TabsPreview() {
  return <TabsPrimaryVariantsPreview />
}

/* ── View segmented control — hub views toolbar (ListPageTemplate) ─────── */

type HubViewTab = {
  id: string
  label: string
  icon: string
  filterId: string
  count: number
}

const HUB_VIEW_TABS: HubViewTab[] = [
  { id: "questions", label: "Questions", icon: "fa-table", filterId: "all", count: 12 },
  { id: "board", label: "Board", icon: "fa-columns-3", filterId: "ongoing", count: 12 },
]

/**
 * Full hub views toolbar — icon, label, count, chevron settings menu, and Add view.
 * Matches `ListPageTemplate` views chrome; not Radix Tabs.
 */
export function ViewSegmentedHubToolbarPreview() {
  const [activeId, setActiveId] = React.useState("board")

  return (
    <div className="flex w-max max-w-full flex-wrap items-center gap-1">
      <div
        role="toolbar"
        aria-label="Views"
        data-slot="view-segmented-toolbar"
        className={viewSegmentedToolbarClass()}
      >
        {HUB_VIEW_TABS.map((tab) => {
          const isActive = tab.id === activeId
          const tabInner = (
            <>
              <i className={cn("fa-light shrink-0 text-xs", tab.icon)} aria-hidden="true" />
              {tab.label}
              <span
                data-slot="view-toolbar-count"
                className={cn(
                  "text-2xs min-w-[1.125rem] rounded-full px-1 py-px text-center font-semibold tabular-nums",
                  viewToolbarCountBadgeClass(tab.filterId, isActive),
                )}
              >
                {tab.count}
              </span>
            </>
          )

          const viewSettingsMenu = (
            <DropdownMenu>
              <Tip label="View settings" side="bottom">
                <DropdownMenuTrigger asChild>
                  <button
                    type="button"
                    className={cn(
                      "icon-button-chrome inline-flex min-h-8 min-w-6 shrink-0 items-center justify-center rounded-e-md rounded-s-none px-0.5",
                      "transition-colors hover:bg-foreground/[0.04]",
                      "focus-visible:z-10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1",
                    )}
                    aria-label="View settings"
                  >
                    <i className="fa-light fa-chevron-down text-xs" aria-hidden="true" />
                  </button>
                </DropdownMenuTrigger>
              </Tip>
              <DropdownMenuContent align="start">
                <DropdownMenuLabel className="text-xs text-muted-foreground">
                  View: {tab.label}
                </DropdownMenuLabel>
                <DropdownMenuSeparator />
                <DropdownMenuItem>
                  <i className="fa-light fa-pen text-xs" aria-hidden="true" />
                  Rename
                </DropdownMenuItem>
                <DropdownMenuItem>
                  <i className="fa-light fa-sliders text-xs" aria-hidden="true" />
                  Edit
                </DropdownMenuItem>
                <DropdownMenuItem>
                  <i className="fa-light fa-copy text-xs" aria-hidden="true" />
                  Duplicate
                </DropdownMenuItem>
              </DropdownMenuContent>
            </DropdownMenu>
          )

          if (isActive) {
            return (
              <div
                key={tab.id}
                data-slot="view-segmented-item-shell"
                className={cn(
                  viewSegmentedButtonClass(true),
                  "inline-flex items-stretch gap-0 p-0",
                )}
              >
                <button
                  type="button"
                  aria-pressed
                  data-slot="view-segmented-item"
                  onClick={() => setActiveId(tab.id)}
                  className={cn(
                    "inline-flex min-h-8 items-center gap-1.5 rounded-s-md rounded-e-none bg-transparent py-1 ps-2.5 pe-0.5 text-xs font-medium text-foreground",
                    "hover:bg-foreground/[0.04]",
                    "focus-visible:z-10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1",
                  )}
                >
                  {tabInner}
                </button>
                {viewSettingsMenu}
              </div>
            )
          }

          return (
            <button
              key={tab.id}
              type="button"
              aria-pressed={false}
              data-slot="view-segmented-item"
              onClick={() => setActiveId(tab.id)}
              className={viewSegmentedButtonClass(false)}
            >
              {tabInner}
            </button>
          )
        })}
      </div>

      <DropdownMenu>
        <Tip label="Add view" side="bottom">
          <DropdownMenuTrigger asChild>
            <Button
              type="button"
              variant="ghost"
              size="icon-sm"
              className="secondary-action-chrome size-8 shrink-0"
              aria-label="Add view"
            >
              <i className="fa-light fa-plus text-sm" aria-hidden="true" />
            </Button>
          </DropdownMenuTrigger>
        </Tip>
        <DropdownMenuContent align="start">
          <DropdownMenuLabel className="text-xs">Add a view</DropdownMenuLabel>
          <DropdownMenuSeparator />
          <DropdownMenuItem>
            <i className="fa-light fa-table text-xs" aria-hidden="true" />
            Table
          </DropdownMenuItem>
          <DropdownMenuItem>
            <i className="fa-light fa-columns-3 text-xs" aria-hidden="true" />
            Board
          </DropdownMenuItem>
          <DropdownMenuItem>
            <i className="fa-light fa-chart-pie text-xs" aria-hidden="true" />
            Dashboard
          </DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>
    </div>
  )
}

/** Simple labeled segments — compact hubs without saved views */
export function ViewSegmentedControlPreview() {
  const [view, setView] = React.useState<"table" | "board" | "dashboard">("table")
  return (
    <ViewSegmentedControl
      value={view}
      onValueChange={setView}
      options={[
        { value: "table", label: "Table", icon: "fa-light fa-table" },
        { value: "board", label: "Board", icon: "fa-light fa-columns" },
        { value: "dashboard", label: "Dashboard", icon: "fa-light fa-chart-pie" },
      ]}
      aria-label="View mode"
    />
  )
}

export function ViewSegmentedControlIconPreview() {
  const [view, setView] = React.useState<"table" | "board">("table")
  return (
    <ViewSegmentedControl
      value={view}
      onValueChange={setView}
      iconOnly
      options={[
        { value: "table", label: "Table", icon: "fa-light fa-table" },
        { value: "board", label: "Board", icon: "fa-light fa-columns" },
      ]}
      aria-label="View mode"
    />
  )
}

const CATALOG_CHIP_OPTIONS = [
  { value: "all" as const, label: "All", count: 103 },
  { value: "token" as const, label: "Design tokens", count: 9, icon: "fa-light fa-droplet" },
  { value: "component" as const, label: "UI primitives", count: 40, icon: "fa-light fa-cube" },
]

const CHART_CHIP_OPTIONS = [
  { value: "trends" as const, label: "Trends" },
  { value: "bars" as const, label: "Bars" },
  { value: "distribution" as const, label: "Distribution" },
  { value: "relationship" as const, label: "Relationship" },
]

/** Brand variant — Design OS Catalog tier filter with icons and counts. */
export function FilterChipGroupBrandPreview() {
  const [value, setValue] = React.useState<(typeof CATALOG_CHIP_OPTIONS)[number]["value"]>("all")
  return (
    <FilterChipGroup
      value={value}
      onValueChange={setValue}
      options={CATALOG_CHIP_OPTIONS}
      variant="brand"
      size="default"
      aria-label="Catalog categories"
    />
  )
}

/** Muted variant — in-content family pickers (chart types, doc filters). */
export function FilterChipGroupMutedPreview() {
  const [value, setValue] = React.useState<(typeof CHART_CHIP_OPTIONS)[number]["value"]>("trends")
  return (
    <FilterChipGroup
      value={value}
      onValueChange={setValue}
      options={CHART_CHIP_OPTIONS}
      variant="muted"
      size="sm"
      aria-label="Chart families"
    />
  )
}

/** Size comparison — default vs sm on muted variant. */
const FILTER_CHIP_GROUP_SIZES_OPTIONS = [
  { value: "trends", label: "Trends" },
  { value: "bars", label: "Bars" },
  { value: "flow", label: "Flow" },
] as const

export function FilterChipGroupSizesPreview() {
  const [value, setValue] = React.useState("bars")
  return (
    <DocVariantStack>
      <DocVariantRow label='size="default"'>
        <FilterChipGroup
          value={value}
          onValueChange={setValue}
          options={FILTER_CHIP_GROUP_SIZES_OPTIONS}
          variant="muted"
          size="default"
          aria-label="Default size chips"
        />
      </DocVariantRow>
      <DocVariantRow label='size="sm"'>
        <FilterChipGroup
          value={value}
          onValueChange={setValue}
          options={FILTER_CHIP_GROUP_SIZES_OPTIONS}
          variant="muted"
          size="sm"
          aria-label="Small size chips"
        />
      </DocVariantRow>
    </DocVariantStack>
  )
}