"use client"

import * as React from "react"

import {
  AttachmentCountCell,
  BooleanToggleCell,
  CurrencyCell,
  EmptyCell,
  ExternalLinkCell,
  FavoriteNameCell,
  NumericCell,
  PeopleAvatarRailCell,
  PillCell,
  ProgressCell,
  RatingCell,
  RelativeTimeCell,
  RowActionsCell,
  SignalBarsCell,
  StatusCell,
  TableNewRowDot,
  TagListCell,
  type StatusCellOption,
} from "@exxatdesignux/ui/components/data-views"
import { Label } from "@/components/ui/label"
import { Slider } from "@/components/ui/slider"

export function ProgressCellPreview() {
  const [progress, setProgress] = React.useState(42)
  return (
    <div className="flex flex-col gap-3">
      <div className="flex flex-col gap-2">
        <Label id="ds-progress-slider-label" htmlFor="ds-progress-slider">
          Adjust value
        </Label>
        <Slider
          id="ds-progress-slider"
          aria-labelledby="ds-progress-slider-label"
          value={[progress]}
          onValueChange={(v) => setProgress(v[0] ?? 0)}
          max={100}
          step={1}
        />
      </div>
      <ProgressCell value={progress} max={100} label={`${progress}% complete`} />
    </div>
  )
}

export function CurrencyCellPreview() {
  return <CurrencyCell value={1240.5} />
}

export function NumericCellPreview() {
  return <NumericCell value={1284} />
}

export function RatingCellPreview() {
  return <RatingCell value={4.2} max={5} />
}

export function SignalBarsCellPreview() {
  return <SignalBarsCell level={3} max={4} tone="info" label="Strong signal" />
}

/**
 * The dot is never a column of its own. It rides in `FavoriteNameCell`'s
 * `leading` slot, which is how every real caller uses it, so the preview shows
 * a new row against a seen row rather than a lone dot with no context. The seen
 * row passes `leading={null}` to prove the gutter stays reserved and the two
 * titles align.
 */
export function TableNewRowDotPreview() {
  const [favorites, setFavorites] = React.useState<Record<string, boolean>>({
    new: false,
    seen: true,
  })
  const toggle = (key: string) =>
    setFavorites((current) => ({ ...current, [key]: !current[key] }))

  return (
    <div className="flex flex-col gap-3">
      <FavoriteNameCell
        label="Cardiopulmonary rotation packet"
        subtitle="ACT-2026-014"
        isFavorite={favorites.new ?? false}
        onToggleFavorite={() => toggle("new")}
        interactive
        leading={<TableNewRowDot />}
      />
      <FavoriteNameCell
        label="Neurology midterm evaluation"
        subtitle="ACT-2026-009"
        isFavorite={favorites.seen ?? false}
        onToggleFavorite={() => toggle("seen")}
        interactive
        leading={null}
      />
      <p className="text-sm text-muted-foreground">
        The swatch is <code>aria-hidden</code> and a sibling <code>sr-only</code>{" "}
        string carries the meaning, so the dot is never the only signal.
      </p>
    </div>
  )
}

export function FavoriteNameCellPreview() {
  const [isFavorite, setIsFavorite] = React.useState(true)
  return (
    <FavoriteNameCell
      label="Cardiopulmonary rotation packet"
      subtitle="ACT-2026-014"
      isFavorite={isFavorite}
      onToggleFavorite={() => setIsFavorite((v) => !v)}
      interactive
    />
  )
}

export function EmptyCellPreview() {
  return (
    <div className="flex flex-col gap-2">
      <EmptyCell />
      <EmptyCell label="No date" />
      <EmptyCell label="No files" />
    </div>
  )
}

/** Lifecycle used by the actionable half of the StatusCell preview. */
const STATUS_CELL_PREVIEW_OPTIONS: StatusCellOption[] = [
  { value: "draft", label: "Draft", tone: "neutral", icon: "fa-pen-line" },
  { value: "in-review", label: "In review", tone: "info", icon: "fa-clock" },
  { value: "changes", label: "Changes requested", tone: "warning", icon: "fa-triangle-exclamation" },
  { value: "published", label: "Published", tone: "success", icon: "fa-circle-check" },
]

export function StatusCellPreview() {
  const [status, setStatus] = React.useState("in-review")
  const current =
    STATUS_CELL_PREVIEW_OPTIONS.find((o) => o.value === status) ??
    STATUS_CELL_PREVIEW_OPTIONS[0]

  return (
    <div className="flex flex-col gap-3">
      <div className="flex items-center gap-3">
        <span className="w-20 text-sm text-muted-foreground">Static</span>
        <StatusCell label="Published" tone="success" icon="fa-circle-check" />
      </div>
      <div className="flex items-center gap-3">
        <span className="w-20 text-sm text-muted-foreground">Actionable</span>
        <StatusCell
          label={current.label}
          tone={current.tone}
          icon={current.icon}
          value={current.value}
          options={STATUS_CELL_PREVIEW_OPTIONS}
          onChange={setStatus}
        />
      </div>
    </div>
  )
}

export function BooleanToggleCellPreview() {
  const [published, setPublished] = React.useState(true)
  return <BooleanToggleCell checked={published} onChange={setPublished} />
}

export function PillCellPreview() {
  return <PillCell label="Clinical" icon="fa-stethoscope" />
}

export function TagListCellPreview() {
  return <TagListCell tags={["Anatomy", "Pharmacology", "Ethics", "Skills"]} visibleMax={2} />
}

export function PeopleAvatarRailCellPreview() {
  return (
    <PeopleAvatarRailCell
      people={[
        { name: "Alex Chen", initials: "AC" },
        { name: "Jordan Lee", initials: "JL" },
        { name: "Sam Rivera", initials: "SR" },
        { name: "Pat Kim", initials: "PK" },
      ]}
    />
  )
}

export function ExternalLinkCellPreview() {
  return <ExternalLinkCell url="https://design.exxat.com/patterns" label="Design OS docs" />
}

export function RelativeTimeCellPreview() {
  return <RelativeTimeCell iso={new Date(Date.now() - 3_600_000 * 5).toISOString()} />
}

export function AttachmentCountCellPreview() {
  return <AttachmentCountCell count={3} />
}

export function RowActionsCellPreview() {
  return (
    <RowActionsCell
      row={{ id: "demo" }}
      actions={[
        { label: "Open", icon: "fa-arrow-up-right-from-square", onSelect: () => {} },
        { label: "Edit", icon: "fa-pen", onSelect: () => {} },
      ]}
    />
  )
}