"use client"

import * as React from "react"
import { useNavigate } from "react-router"

import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
} from "@/components/ui/command"
import {
  Avatar,
  AvatarFallback,
  AvatarGroup,
  AvatarGroupCount,
  AvatarImage,
  AvatarInitials,
  AvatarStatus,
  AvatarVerified,
} from "@/components/ui/avatar"
import { Field, FieldContent, FieldDescription, FieldGroup, FieldLabel } from "@/components/ui/field"
import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectLabel,
  SelectSeparator,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"
import { SelectionTileGrid } from "@/components/ui/selection-tile-grid"
import { Tip } from "@/components/ui/tip"
import { Kbd, KbdGroup } from "@/components/ui/kbd"
import { Shortcut } from "@/components/ui/dropdown-menu"
import { useModKeyLabel, useAltKeyLabel } from "@/hooks/use-mod-key-label"
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table"
import { ToggleSwitch } from "@/components/ui/toggle-switch"
import { Button } from "@/components/ui/button"
import { ColumnsShowcase } from "@/components/columns-showcase"
import { DataTable } from "@/components/data-table"
import { useTableState } from "@/components/data-table/use-table-state"
import type { ColumnDef } from "@/components/data-table/types"
import type { ResponsiveAction } from "@/components/ui/responsive-action-row"
import { DS_DOC_BODY, DS_DOC_BODY_EMPHASIS } from "@/lib/design-system/doc-typography"
import { useProductDashboardHref } from "@/contexts/product-route-sync"
import { stockPortraitUrl } from "@/lib/stock-portrait"

const DS_PEOPLE = [
  { initials: "AC", name: "Alex Chen" },
  { initials: "MR", name: "Morgan Rivera" },
  { initials: "JT", name: "Jordan Taylor" },
  { initials: "PL", name: "Priya Lakshmi" },
] as const

export function AvatarInitialsPreview() {
  return <AvatarInitials initials="AC" size="lg" decorative />
}

export function AvatarSizesPreview() {
  return (
    <div className="flex flex-wrap items-end gap-3">
      <AvatarInitials initials="SM" size="sm" decorative />
      <AvatarInitials initials="MD" size="default" decorative />
      <AvatarInitials initials="LG" size="lg" decorative />
    </div>
  )
}

export function AvatarImagePreview() {
  return (
    <Avatar size="lg">
      <AvatarImage src={stockPortraitUrl("ds-avatar-doc")} alt="Alex Chen" referrerPolicy="no-referrer" />
      <AvatarFallback>AC</AvatarFallback>
    </Avatar>
  )
}

export function AvatarStatusPreview() {
  return (
    <div className="flex flex-wrap items-center gap-4">
      <AvatarStatus status="online" label="Online">
        <AvatarInitials initials="AC" decorative />
      </AvatarStatus>
      <AvatarStatus status="busy" label="Busy">
        <AvatarInitials initials="MR" decorative />
      </AvatarStatus>
      <AvatarStatus status="away" label="Away" position="top-end">
        <AvatarInitials initials="JT" decorative />
      </AvatarStatus>
    </div>
  )
}

export function AvatarGroupPreview() {
  const visible = DS_PEOPLE.slice(0, 3)
  const overflow = DS_PEOPLE.length - visible.length
  return (
    <AvatarGroup data-size="default">
      {visible.map((person) => (
        <Tip key={person.initials} side="top" label={person.name}>
          <AvatarInitials initials={person.initials} decorative />
        </Tip>
      ))}
      {overflow > 0 ? (
        <Tip
          side="top"
          label={DS_PEOPLE.slice(3).map((p) => p.name).join(", ")}
        >
          <AvatarGroupCount tabIndex={0} aria-label={`${overflow} more`}>
            +{overflow}
          </AvatarGroupCount>
        </Tip>
      ) : null}
    </AvatarGroup>
  )
}

export function AvatarVerifiedPreview() {
  return (
    <AvatarVerified label="Verified coordinator">
      <AvatarInitials initials="PL" size="lg" decorative />
    </AvatarVerified>
  )
}

/** @deprecated Use section-specific previews — kept for catalog re-export. */
export function AvatarPreview() {
  return <AvatarInitialsPreview />
}

export function TablePreview() {
  return (
    <Table>
      <TableHeader>
        <TableRow>
          <TableHead>Name</TableHead>
          <TableHead>Kind</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        <TableRow>
          <TableCell>HubTable</TableCell>
          <TableCell>Composition</TableCell>
        </TableRow>
      </TableBody>
    </Table>
  )
}

/** Full column catalog — same HubTable as `/columns` (Column types showcase). */
export function TableColumnsPreview() {
  const navigate = useNavigate()
  const dashboardHref = useProductDashboardHref()
  const columnsHref = `${dashboardHref.replace(/\/dashboard$/, "")}/columns`

  return (
    <div className="flex min-w-0 flex-col gap-3">
      <p className={DS_DOC_BODY}>
        Every shipped cell pattern: person identity, status, progress, currency, rating, tags,
        attachments, links, and row actions. Preview shows five rows —{" "}
        <span className={DS_DOC_BODY_EMPHASIS}>View more</span> opens the Column types hub.
        Select rows to open the floating bulk-action bar.
      </p>
      <ColumnsShowcase
        view="table"
        onViewChange={() => {}}
        embeddedPreview
        persistKey="design-system-table-columns"
        onEmbeddedPreviewViewMore={() => navigate(columnsHref)}
      />
    </div>
  )
}

type BulkBarDemoRow = {
  id: string
  name: string
  status: string
} & Record<string, unknown>

const BULK_BAR_DEMO_ROWS: BulkBarDemoRow[] = [
  { id: "q_101", name: "Diaphragm innervation", status: "Published" },
  { id: "q_102", name: "Brachial plexus roots", status: "Draft" },
  { id: "q_103", name: "Cranial nerve functions", status: "In review" },
  { id: "q_104", name: "Lower limb dermatomes", status: "Published" },
]

const BULK_BAR_DEMO_COLUMNS: ColumnDef<BulkBarDemoRow>[] = [
  { key: "select", label: "", width: 40, minWidth: 40, defaultPin: "left", lockPin: true },
  { key: "name", label: "Question", width: 280 },
  { key: "status", label: "Status", width: 120 },
]

/** Compact grid with two rows pre-selected so the bulk-action bar is visible in docs. */
export function TableBulkActionBarPreview() {
  const columns = React.useMemo(() => BULK_BAR_DEMO_COLUMNS, [])
  const state = useTableState(BULK_BAR_DEMO_ROWS, columns, { key: "name", dir: "asc" })
  const { setSelected } = state
  const seededRef = React.useRef(false)
  const mod = useModKeyLabel()
  const alt = useAltKeyLabel()
  const exportShortcut = `${mod}${alt}E`
  const archiveShortcut = `${mod}${alt}A`
  const deleteShortcut = `${mod}${alt}Backspace`

  React.useEffect(() => {
    if (seededRef.current) return
    seededRef.current = true
    setSelected(new Set(["q_101", "q_102"]))
  }, [setSelected])

  return (
    <div className="flex min-w-0 flex-col gap-3">
      <p className={DS_DOC_BODY}>
        Two rows are pre-selected. The bar is a full-width inverse slab pinned to
        the viewport bottom, aligned to the table width. It takes the canvas ink
        as its surface, so it reads near-black on a light theme and near-white on
        a dark one, and accents keep their own meaning on it. Pass structured{" "}
        <span className={DS_DOC_BODY_EMPHASIS}>bulkActions</span> on{" "}
        <span className={DS_DOC_BODY_EMPHASIS}>HubTable</span> or a custom{" "}
        <span className={DS_DOC_BODY_EMPHASIS}>bulkActionsSlot</span> on{" "}
        <span className={DS_DOC_BODY_EMPHASIS}>DataTable</span>. Every action
        must declare a <span className={DS_DOC_BODY_EMPHASIS}>shortcut</span>.{" "}
        <span className={DS_DOC_BODY_EMPHASIS}>Esc</span> clears selection.
        Destructive actions use solid{" "}
        <span className={DS_DOC_BODY_EMPHASIS}>destructive</span> fill here, since
        the usual tint all but disappears on a slab.
      </p>
      <div className="overflow-hidden rounded-lg border border-border bg-background">
        <DataTable
          data={BULK_BAR_DEMO_ROWS}
          columns={columns}
          getRowId={(row) => row.id}
          getRowSelectionLabel={(row) => row.name}
          state={state}
          defaultSort={{ key: "name", dir: "asc" }}
          emptyState="No questions match your filters."
          edgeInset={false}
          bulkActionsSlot={() => (
            <>
              <Button
                type="button"
                size="sm"
                variant="outline"
                className="shrink-0"
                aria-keyshortcuts={exportShortcut}
              >
                <i className="fa-light fa-arrow-up-from-bracket" aria-hidden="true" /> Export
                <KbdGroup className="ms-1.5">
                  <Kbd variant="bare">{exportShortcut}</Kbd>
                </KbdGroup>
              </Button>
              <Shortcut keys={exportShortcut} onInvoke={() => {}} />
              <Button
                type="button"
                size="sm"
                variant="outline"
                className="shrink-0"
                aria-keyshortcuts={archiveShortcut}
              >
                <i className="fa-light fa-box-archive" aria-hidden="true" /> Archive
                <KbdGroup className="ms-1.5">
                  <Kbd variant="bare">{archiveShortcut}</Kbd>
                </KbdGroup>
              </Button>
              <Shortcut keys={archiveShortcut} onInvoke={() => {}} />
              <Button
                type="button"
                size="sm"
                variant="destructive-solid"
                className="shrink-0"
                aria-keyshortcuts={deleteShortcut}
              >
                <i className="fa-light fa-trash" aria-hidden="true" /> Delete
                <KbdGroup className="ms-1.5">
                  <Kbd variant="bare">{deleteShortcut}</Kbd>
                </KbdGroup>
              </Button>
              <Shortcut keys={deleteShortcut} onInvoke={() => {}} />
            </>
          )}
        />
      </div>
    </div>
  )
}

export function TableToolbarActionsPreview() {
  const columns = React.useMemo(() => BULK_BAR_DEMO_COLUMNS, [])
  const state = useTableState(BULK_BAR_DEMO_ROWS, columns, { key: "name", dir: "asc" })
  const mod = useModKeyLabel()
  const alt = useAltKeyLabel()

  const toolbarActions = React.useMemo<ResponsiveAction[]>(
    () => [
      {
        id: "add",
        label: "Add question",
        icon: "fa-plus",
        variant: "default",
        shortcut: `${mod}${alt}N`,
        onSelect: () => {},
      },
      {
        id: "import",
        label: "Import",
        icon: "fa-file-import",
        shortcut: `${mod}${alt}I`,
        onSelect: () => {},
      },
      {
        id: "export",
        label: "Export",
        icon: "fa-arrow-up-from-bracket",
        shortcut: `${mod}${alt}E`,
        onSelect: () => {},
      },
      {
        id: "archive",
        label: "View archive",
        icon: "fa-box-archive",
        placement: "overflow",
        shortcut: `${mod}${alt}A`,
        onSelect: () => {},
      },
    ],
    [alt, mod],
  )

  return (
    <div className="flex min-w-0 flex-col gap-3">
      <p className={DS_DOC_BODY}>
        Pass <span className={DS_DOC_BODY_EMPHASIS}>toolbarActions</span> to put a
        hub&apos;s commands on the toolbar row. They land after{" "}
        <span className={DS_DOC_BODY_EMPHASIS}>Properties</span>, behind a
        separator, so the row reads as view controls first and commands second.
        Three row actions show at most; the rest join anything marked{" "}
        <span className={DS_DOC_BODY_EMPHASIS}>placement: &quot;overflow&quot;</span>{" "}
        under More. Narrow the window to watch labels drop to glyphs, then
        secondaries move into More while the filled primary stays. Every action
        needs a <span className={DS_DOC_BODY_EMPHASIS}>shortcut</span>, and it
        stays bound from wherever the action currently sits.
      </p>
      <p className={DS_DOC_BODY}>
        These act on the hub, so they never wait for a selection. Commands that
        act on <span className={DS_DOC_BODY_EMPHASIS}>selected rows</span> belong
        in <span className={DS_DOC_BODY_EMPHASIS}>bulkActions</span> instead. A
        page gets one filled primary, so put it here or in{" "}
        <span className={DS_DOC_BODY_EMPHASIS}>PageHeader.actionItems</span>, not
        both.
      </p>
      <div className="overflow-hidden rounded-lg border border-border bg-background">
        <DataTable
          data={BULK_BAR_DEMO_ROWS}
          columns={columns}
          getRowId={(row) => row.id}
          getRowSelectionLabel={(row) => row.name}
          state={state}
          defaultSort={{ key: "name", dir: "asc" }}
          emptyState="No questions match your filters."
          edgeInset={false}
          selectable={false}
          toolbarActions={toolbarActions}
        />
      </div>
    </div>
  )
}

const PROGRAM_OPTIONS = [
  { value: "pt", label: "Physical therapy" },
  { value: "ot", label: "Occupational therapy" },
  { value: "nursing", label: "Nursing" },
  { value: "pa", label: "Physician assistant" },
  { value: "slp", label: "Speech language pathology" },
] as const

export function SelectPreview({
  position = "item-aligned",
}: {
  position?: "item-aligned" | "popper"
}) {
  const [value, setValue] = React.useState("pt")
  const triggerId = position === "popper" ? "ds-select-popper" : "ds-select"
  return (
    <Field orientation="vertical" className="max-w-sm">
      <FieldLabel htmlFor={triggerId}>Program</FieldLabel>
      <Select value={value} onValueChange={setValue}>
        <SelectTrigger id={triggerId} className="w-full" aria-label="Program">
          <SelectValue placeholder="Choose program" />
        </SelectTrigger>
        <SelectContent position={position}>
          <SelectGroup>
            {PROGRAM_OPTIONS.map((opt) => (
              <SelectItem key={opt.value} value={opt.value}>
                {opt.label}
              </SelectItem>
            ))}
          </SelectGroup>
        </SelectContent>
      </Select>
    </Field>
  )
}

/** Groups, labels, and separators. */
export function SelectGroupsPreview() {
  const [value, setValue] = React.useState("pt-dpt")
  return (
    <Field orientation="vertical" className="max-w-sm">
      <FieldLabel htmlFor="ds-select-groups">Placement track</FieldLabel>
      <Select value={value} onValueChange={setValue}>
        <SelectTrigger id="ds-select-groups" className="w-full" aria-label="Placement track">
          <SelectValue placeholder="Choose track" />
        </SelectTrigger>
        <SelectContent>
          <SelectGroup>
            <SelectLabel>Clinical</SelectLabel>
            <SelectItem value="pt-dpt">PT · DPT</SelectItem>
            <SelectItem value="ot-mot">OT · MOT</SelectItem>
            <SelectItem value="nursing-bsn">Nursing · BSN</SelectItem>
          </SelectGroup>
          <SelectSeparator />
          <SelectGroup>
            <SelectLabel>Administrative</SelectLabel>
            <SelectItem value="coord">Program coordinator</SelectItem>
            <SelectItem value="site">Site liaison</SelectItem>
            <SelectItem value="faculty" disabled>
              Faculty (coming soon)
            </SelectItem>
          </SelectGroup>
        </SelectContent>
      </Select>
    </Field>
  )
}

/** Long scrollable list. */
export function SelectScrollablePreview() {
  const [value, setValue] = React.useState("site-12")
  return (
    <Field orientation="vertical" className="max-w-sm">
      <FieldLabel htmlFor="ds-select-scroll">Clinical site</FieldLabel>
      <Select value={value} onValueChange={setValue}>
        <SelectTrigger id="ds-select-scroll" className="w-full" aria-label="Clinical site">
          <SelectValue placeholder="Choose site" />
        </SelectTrigger>
        <SelectContent className="max-h-60">
          <SelectGroup>
            {Array.from({ length: 24 }, (_, i) => {
              const n = i + 1
              const id = `site-${n}`
              return (
                <SelectItem key={id} value={id}>
                  Site {String(n).padStart(2, "0")} · Region {(n % 4) + 1}
                </SelectItem>
              )
            })}
          </SelectGroup>
        </SelectContent>
      </Select>
    </Field>
  )
}

/** Invalid + disabled + size variants. */
export function SelectStatesPreview() {
  return (
    <FieldGroup className="max-w-sm">
      <Field orientation="vertical" data-invalid={true}>
        <FieldLabel htmlFor="ds-select-invalid">Required program</FieldLabel>
        <Select>
          <SelectTrigger id="ds-select-invalid" className="w-full" aria-invalid aria-label="Required program">
            <SelectValue placeholder="Choose program" />
          </SelectTrigger>
          <SelectContent>
            <SelectGroup>
              {PROGRAM_OPTIONS.map((opt) => (
                <SelectItem key={opt.value} value={opt.value}>
                  {opt.label}
                </SelectItem>
              ))}
            </SelectGroup>
          </SelectContent>
        </Select>
        <FieldDescription>Select a program to continue.</FieldDescription>
      </Field>
      <Field orientation="vertical" data-disabled={true}>
        <FieldLabel htmlFor="ds-select-disabled">Locked cohort</FieldLabel>
        <Select disabled value="pt">
          <SelectTrigger id="ds-select-disabled" className="w-full" aria-label="Locked cohort">
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            <SelectGroup>
              <SelectItem value="pt">Physical therapy</SelectItem>
            </SelectGroup>
          </SelectContent>
        </Select>
      </Field>
      <Field orientation="vertical">
        <FieldLabel htmlFor="ds-select-sm">Compact size</FieldLabel>
        <Select defaultValue="ot">
          <SelectTrigger id="ds-select-sm" size="sm" className="w-full" aria-label="Compact size">
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            <SelectGroup>
              {PROGRAM_OPTIONS.map((opt) => (
                <SelectItem key={opt.value} value={opt.value}>
                  {opt.label}
                </SelectItem>
              ))}
            </SelectGroup>
          </SelectContent>
        </Select>
      </Field>
    </FieldGroup>
  )
}

export function CommandPreview() {
  return (
    <Command className="max-w-sm rounded-lg border border-border shadow-sm">
      <CommandInput placeholder="Search commands…" aria-label="Search commands" />
      <CommandList>
        <CommandEmpty>No results.</CommandEmpty>
        <CommandGroup heading="Navigation">
          <CommandItem>Go to Library</CommandItem>
          <CommandItem>Open settings</CommandItem>
        </CommandGroup>
      </CommandList>
    </Command>
  )
}

export function SelectionTileGridPreview() {
  const [tile, setTile] = React.useState("csv")
  return (
    <SelectionTileGrid
      sectionLabel="Format"
      interaction="radio"
      options={[
        { value: "csv", label: "CSV", icon: "fa-file-csv" },
        { value: "xlsx", label: "Excel", icon: "fa-file-excel" },
      ]}
      value={tile}
      onValueChange={setTile}
      columns={2}
    />
  )
}

/** Settings rows — fixed label column prevents wrap in doc examples */
const TOGGLE_SETTINGS_LABEL = "min-w-0 shrink-0 sm:min-w-[9rem]"

export function ToggleSwitchLabelLeftPreview() {
  const [on, setOn] = React.useState(true)
  return (
    <Field orientation="horizontal" className="w-full items-center gap-4">
      <FieldLabel htmlFor="ds-toggle-switch-left" className={TOGGLE_SETTINGS_LABEL}>
        Notifications
      </FieldLabel>
      <FieldContent className="flex min-w-0 flex-1 flex-col items-end gap-1">
        <ToggleSwitch checked={on} onChange={setOn} id="ds-toggle-switch-left" />
        <FieldDescription className="text-right">Email when published</FieldDescription>
      </FieldContent>
    </Field>
  )
}

export function ToggleSwitchLabelRightPreview() {
  const [on, setOn] = React.useState(false)
  return (
    <Field orientation="horizontal" className="w-full items-center gap-3">
      <ToggleSwitch checked={on} onChange={setOn} id="ds-toggle-switch-right" />
      <FieldLabel htmlFor="ds-toggle-switch-right" className="min-w-0 flex-1 font-normal">
        Dark mode
      </FieldLabel>
    </Field>
  )
}

export function ToggleSwitchGroupPreview() {
  const [email, setEmail] = React.useState(true)
  const [push, setPush] = React.useState(false)
  const [digest, setDigest] = React.useState(true)
  return (
    <FieldGroup className="w-full gap-4">
      <Field orientation="horizontal" className="w-full items-center justify-between gap-4">
        <FieldLabel htmlFor="ds-toggle-email" className={TOGGLE_SETTINGS_LABEL}>
          Email alerts
        </FieldLabel>
        <ToggleSwitch checked={email} onChange={setEmail} id="ds-toggle-email" />
      </Field>
      <Field orientation="horizontal" className="w-full items-center justify-between gap-4">
        <FieldLabel htmlFor="ds-toggle-push" className={TOGGLE_SETTINGS_LABEL}>
          Push notifications
        </FieldLabel>
        <ToggleSwitch checked={push} onChange={setPush} id="ds-toggle-push" />
      </Field>
      <Field orientation="horizontal" className="w-full items-center justify-between gap-4">
        <FieldLabel htmlFor="ds-toggle-digest" className={TOGGLE_SETTINGS_LABEL}>
          Weekly digest
        </FieldLabel>
        <ToggleSwitch checked={digest} onChange={setDigest} id="ds-toggle-digest" />
      </Field>
    </FieldGroup>
  )
}

/** @deprecated Use section-specific previews — kept for catalog re-export. */
export function ToggleSwitchPreview() {
  return <ToggleSwitchLabelLeftPreview />
}