"use client"

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

import { Button } from "@/components/ui/button"
import { ButtonGroup } from "@/components/ui/button-group"
import { ButtonSegmentedControl } from "@/components/ui/button-segmented-control"
import {
  DropdownMenuGroup,
  DropdownMenuItem,
} from "@/components/ui/dropdown-menu"
import { DropdownButton } from "@/components/ui/dropdown-button"
import { Toggle } from "@/components/ui/toggle"
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"

/** Neutral hierarchy — primary through link. Destructive tones live in {@link ButtonDestructivePreview}. */
const NEUTRAL_VARIANTS = [
  { variant: "default" as const, label: "Default" },
  { variant: "outline" as const, label: "Outline" },
  { variant: "secondary" as const, label: "Secondary" },
  { variant: "ghost" as const, label: "Ghost" },
  { variant: "link" as const, label: "Link" },
]

/** Same hierarchy as neutral, mapped to destructive tokens. */
const DESTRUCTIVE_VARIANTS = [
  { variant: "destructive-solid" as const, label: "Default" },
  { variant: "destructive-outline" as const, label: "Outline" },
  { variant: "destructive" as const, label: "Secondary" },
  { variant: "destructive-ghost" as const, label: "Ghost" },
  { variant: "destructive-link" as const, label: "Link" },
]

const DROPDOWN_MENU_SAMPLE = (
  <DropdownMenuGroup>
    <DropdownMenuItem>
      <i className="fa-light fa-pen" aria-hidden="true" />
      Edit
    </DropdownMenuItem>
    <DropdownMenuItem>
      <i className="fa-light fa-copy" aria-hidden="true" />
      Duplicate
    </DropdownMenuItem>
    <DropdownMenuItem>
      <i className="fa-light fa-arrow-down-to-line" aria-hidden="true" />
      Export
    </DropdownMenuItem>
  </DropdownMenuGroup>
)

function ButtonVariantRow({
  variants,
  disabled = false,
}: {
  variants: ReadonlyArray<{ variant: React.ComponentProps<typeof Button>["variant"]; label: string }>
  disabled?: boolean
}) {
  return (
    <div className="flex flex-wrap gap-2">
      {variants.map(({ variant, label }) => (
        <Button key={`${variant}-${disabled ? "disabled" : "enabled"}`} type="button" variant={variant} disabled={disabled}>
          {label}
        </Button>
      ))}
    </div>
  )
}

export function ButtonVariantsPreview() {
  return <ButtonVariantRow variants={NEUTRAL_VARIANTS} />
}

/** Enabled destructive hierarchy — mirrors Variants. Disabled states live in {@link ButtonDisabledPreview}. */
export function ButtonDestructivePreview() {
  return <ButtonVariantRow variants={DESTRUCTIVE_VARIANTS} />
}

/** Disabled: neutral row, then destructive row (same labels as Variants / Destructive). */
export function ButtonDisabledPreview() {
  return (
    <div className="flex flex-col gap-3">
      <ButtonVariantRow variants={NEUTRAL_VARIANTS} disabled />
      <ButtonVariantRow variants={DESTRUCTIVE_VARIANTS} disabled />
    </div>
  )
}

export function ButtonSizesPreview() {
  return (
    <div className="flex flex-col items-start gap-6 sm:flex-row sm:flex-wrap">
      {(
        [
          { size: "xs" as const, iconSize: "icon-xs" as const, label: "Extra Small" },
          { size: "sm" as const, iconSize: "icon-sm" as const, label: "Small" },
          { size: "default" as const, iconSize: "icon" as const, label: "Default" },
          { size: "lg" as const, iconSize: "icon-lg" as const, label: "Large" },
        ] as const
      ).map(({ size, iconSize, label }) => (
        <div key={size} className="flex items-start gap-2">
          <Button type="button" size={size} variant="outline">
            {label}
          </Button>
          <Button type="button" size={iconSize} variant="outline" aria-label="Submit">
            <i className="fa-light fa-arrow-up-right" aria-hidden="true" />
          </Button>
        </div>
      ))}
    </div>
  )
}

export function ButtonIconPreview() {
  return (
    <div className="flex flex-wrap items-center gap-4">
      <Button type="button" variant="ghost" size="icon-sm" aria-label="Refresh">
        <i className="fa-light fa-arrows-rotate" aria-hidden="true" />
      </Button>
      <Button type="button" variant="outline" size="icon" aria-label="Refresh outline">
        <i className="fa-light fa-arrows-rotate" aria-hidden="true" />
      </Button>
    </div>
  )
}

/** Toolbar ghost icon — filter bars, search chrome, breadcrumb utility menus. */
export function ButtonGhostIconToolbarPreview() {
  return (
    <div className="flex w-fit items-center gap-0.5 rounded-md border border-border bg-muted/30 p-1">
      <Button type="button" size="icon-sm" variant="ghost" aria-label="Search">
        <i className="fa-light fa-magnifying-glass" aria-hidden="true" />
      </Button>
      <Button type="button" size="icon-sm" variant="ghost" aria-label="Filter">
        <i className="fa-light fa-sliders" aria-hidden="true" />
      </Button>
      <Button type="button" size="icon-sm" variant="ghost" aria-label="More options">
        <i className="fa-light fa-ellipsis" aria-hidden="true" />
      </Button>
    </div>
  )
}

export function ButtonWithIconPreview() {
  return (
    <div className="flex flex-wrap gap-2">
      <Button type="button" variant="outline" size="sm">
        <i className="fa-light fa-code-branch" data-icon="inline-start" aria-hidden="true" />
        New branch
      </Button>
      <Button type="button" variant="outline" size="sm">
        Continue
        <i className="fa-light fa-arrow-right" data-icon="inline-end" aria-hidden="true" />
      </Button>
    </div>
  )
}

export function ButtonLoadingPreview() {
  return (
    <div className="flex flex-wrap gap-2">
      <Button type="button" variant="default" disabled aria-busy="true">
        <i
          className="fa-light fa-spinner-third fa-spin"
          data-icon="inline-start"
          aria-hidden="true"
        />
        Generating
      </Button>
      <Button type="button" variant="outline" disabled aria-busy="true">
        Downloading
        <i
          className="fa-light fa-spinner-third fa-spin"
          data-icon="inline-end"
          aria-hidden="true"
        />
      </Button>
    </div>
  )
}

export function ButtonGroupPreview() {
  return (
    <div className="flex flex-col items-start gap-4">
      <ButtonGroup aria-label="Text alignment, labels only">
        <Button type="button" size="sm" variant="outline">
          Left
        </Button>
        <Button type="button" size="sm" variant="outline">
          Center
        </Button>
        <Button type="button" size="sm" variant="outline">
          Right
        </Button>
      </ButtonGroup>

      <ButtonGroup aria-label="Text alignment, icon and label">
        <Button type="button" size="sm" variant="outline">
          <i className="fa-light fa-align-left" data-icon="inline-start" aria-hidden="true" />
          Left
        </Button>
        <Button type="button" size="sm" variant="outline">
          <i className="fa-light fa-align-center" data-icon="inline-start" aria-hidden="true" />
          Center
        </Button>
        <Button type="button" size="sm" variant="outline">
          <i className="fa-light fa-align-right" data-icon="inline-start" aria-hidden="true" />
          Right
        </Button>
      </ButtonGroup>

      <ButtonGroup aria-label="Text alignment, icon only">
        <Button type="button" size="icon-sm" variant="outline" aria-label="Align left">
          <i className="fa-light fa-align-left" aria-hidden="true" />
        </Button>
        <Button type="button" size="icon-sm" variant="outline" aria-label="Align center">
          <i className="fa-light fa-align-center" aria-hidden="true" />
        </Button>
        <Button type="button" size="icon-sm" variant="outline" aria-label="Align right">
          <i className="fa-light fa-align-right" aria-hidden="true" />
        </Button>
      </ButtonGroup>
    </div>
  )
}

export function ButtonGroupSegmentedPreview() {
  const [mode, setMode] = React.useState<"list" | "grid" | "board">("list")
  return (
    <ButtonSegmentedControl
      aria-label="View mode"
      value={mode}
      onValueChange={setMode}
      iconOnly
      options={[
        { value: "list", label: "List", icon: "fa-light fa-list" },
        { value: "grid", label: "Grid", icon: "fa-light fa-grid-2" },
        { value: "board", label: "Board", icon: "fa-light fa-columns-3" },
      ]}
    />
  )
}

export function ButtonDropdownVariantsPreview() {
  return (
    <div className="flex flex-wrap gap-2">
      {NEUTRAL_VARIANTS.map(({ variant, label }) => (
        <DropdownButton
          key={variant}
          variant={variant}
          size="sm"
          menu={DROPDOWN_MENU_SAMPLE}
        >
          {label}
        </DropdownButton>
      ))}
    </div>
  )
}

export function ButtonDropdownSplitPreview() {
  return (
    <div className="flex flex-wrap gap-2">
      <DropdownButton
        variant="default"
        size="sm"
        menu={DROPDOWN_MENU_SAMPLE}
        onPrimaryClick={() => undefined}
      >
        Save draft
      </DropdownButton>
      <DropdownButton
        variant="outline"
        size="sm"
        menu={DROPDOWN_MENU_SAMPLE}
        onPrimaryClick={() => undefined}
      >
        Export
      </DropdownButton>
    </div>
  )
}

export function TogglePreview() {
  const [bold, setBold] = React.useState(false)
  const [favorite, setFavorite] = React.useState(true)
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Toggle pressed={bold} onPressedChange={setBold}>
        <i className={bold ? "fa-solid fa-bold" : "fa-light fa-bold"} aria-hidden="true" />
        Bold
      </Toggle>
      <Toggle pressed={favorite} onPressedChange={setFavorite}>
        <i
          className={favorite ? "fa-solid fa-star" : "fa-light fa-star"}
          aria-hidden="true"
        />
        Favorite
      </Toggle>
    </div>
  )
}

export function ToggleGroupPreview() {
  const [alignment, setAlignment] = React.useState("left")
  return (
    <ToggleGroup
      type="single"
      value={alignment}
      onValueChange={(value) => value && setAlignment(value)}
      aria-label="Text alignment"
    >
      <ToggleGroupItem value="left" aria-label="Align left">
        <i className="fa-light fa-align-left" aria-hidden="true" />
      </ToggleGroupItem>
      <ToggleGroupItem value="center" aria-label="Align center">
        <i className="fa-light fa-align-center" aria-hidden="true" />
      </ToggleGroupItem>
      <ToggleGroupItem value="right" aria-label="Align right">
        <i className="fa-light fa-align-right" aria-hidden="true" />
      </ToggleGroupItem>
    </ToggleGroup>
  )
}

export function ButtonAsChildPreview() {
  return (
    <Button type="button" asChild>
      <Link to="#">Login</Link>
    </Button>
  )
}