import * as React from 'react';

import { Button } from '@/components/button';
import {
  Command,
  CommandDialog,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandSeparator,
  CommandShortcut,
} from '@/components/command';
import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from '@/components/dialog';
import {
  Drawer,
  DrawerClose,
  DrawerContent,
  DrawerDescription,
  DrawerFooter,
  DrawerHeader,
  DrawerTitle,
  DrawerTrigger,
} from '@/components/drawer';
import {
  DropdownMenu,
  DropdownMenuCheckboxItem,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuShortcut,
  DropdownMenuTrigger,
} from '@/components/dropdown-menu';
import { Input } from '@/components/input';
import { Label } from '@/components/label';
import {
  Popover,
  PopoverContent,
  PopoverDescription,
  PopoverHeader,
  PopoverTitle,
  PopoverTrigger,
} from '@/components/popover';
import {
  Sheet,
  SheetClose,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from '@/components/sheet';
import { toast, Toaster } from '@/components/toast';
/* Deep import on purpose: `Toast` is the presentational half and is deliberately
   absent from the package's own barrel, so the published surface stays
   `Toaster` + `toast`. The showcase compiles against `src/`, which is the only
   reason it can reach it — see the note at the bottom of `toast.tsx`. */
import { Toast } from '@/components/toast/toast';
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/tooltip';
import { CalendarIcon, SearchIcon } from '@/icons';
import type { Entry } from './types';

/* Overlays get compositions rather than matrices: a variant grid of closed
   dialogs shows seven identical triggers. Each page opens the real thing. */

const SIDES = ['top', 'right', 'bottom', 'left'] as const;

export const dialog: Entry = {
  slug: 'dialog',
  name: 'Dialog',
  group: 'Overlays',
  description:
    'A modal that takes focus until it is answered. Built on Radix Dialog — focus trap, scroll lock and Escape handling are the primitive’s, not ours.',
  imports: { subpath: 'dialog', names: ['Dialog', 'DialogTrigger', 'DialogContent'] },

  compositions: [
    {
      name: 'With a form',
      render: () => (
        <Dialog>
          <DialogTrigger asChild>
            <Button variant="outline">Edit profile</Button>
          </DialogTrigger>
          <DialogContent>
            <DialogHeader>
              <DialogTitle>Edit profile</DialogTitle>
              <DialogDescription>Changes apply the moment you save.</DialogDescription>
            </DialogHeader>
            <div className="space-y-3 py-2">
              <div className="space-y-2">
                <Label htmlFor="d-name">Name</Label>
                <Input id="d-name" defaultValue="Cavid" />
              </div>
              <div className="space-y-2">
                <Label htmlFor="d-handle">Handle</Label>
                <Input id="d-handle" defaultValue="@cavid" />
              </div>
            </div>
            <DialogFooter>
              <DialogClose asChild>
                <Button variant="ghost">Cancel</Button>
              </DialogClose>
              <Button>Save</Button>
            </DialogFooter>
          </DialogContent>
        </Dialog>
      ),
    },
    {
      name: 'Destructive confirmation',
      render: () => (
        <Dialog>
          <DialogTrigger asChild>
            <Button variant="destructive">Delete workspace</Button>
          </DialogTrigger>
          <DialogContent>
            <DialogHeader>
              <DialogTitle>Delete this workspace?</DialogTitle>
              <DialogDescription>
                Every project, deployment and log inside it goes with it. This cannot be undone.
              </DialogDescription>
            </DialogHeader>
            <DialogFooter>
              <DialogClose asChild>
                <Button variant="ghost">Keep it</Button>
              </DialogClose>
              <Button variant="destructive">Delete</Button>
            </DialogFooter>
          </DialogContent>
        </Dialog>
      ),
    },
  ],
};

export const sheet: Entry = {
  slug: 'sheet',
  name: 'Sheet',
  group: 'Overlays',
  description:
    'A panel that slides in from an edge. Same primitive as Dialog, different geometry — reach for it when the content is a side task rather than a question.',
  imports: { subpath: 'sheet', names: ['Sheet', 'SheetTrigger', 'SheetContent'] },

  compositions: [
    {
      name: 'Every side',
      render: () => (
        <div className="flex flex-wrap gap-3">
          {SIDES.map((side) => (
            <Sheet key={side}>
              <SheetTrigger asChild>
                <Button variant="outline">{side}</Button>
              </SheetTrigger>
              <SheetContent side={side}>
                <SheetHeader>
                  <SheetTitle>Filters</SheetTitle>
                  <SheetDescription>Narrow the list without leaving the page.</SheetDescription>
                </SheetHeader>
                <SheetFooter>
                  <SheetClose asChild>
                    <Button>Apply</Button>
                  </SheetClose>
                </SheetFooter>
              </SheetContent>
            </Sheet>
          ))}
        </div>
      ),
    },
  ],
};

export const drawer: Entry = {
  slug: 'drawer',
  name: 'Drawer',
  group: 'Overlays',
  description:
    'A draggable panel with a grab handle. Built on radix-ui’s Dialog rather than vaul — the drag, the snap and the outward direction are the kit’s own code.',
  imports: { subpath: 'drawer', names: ['Drawer', 'DrawerTrigger', 'DrawerContent'] },

  compositions: [
    {
      name: 'Every direction',
      render: () => (
        <div className="flex flex-wrap gap-3">
          {SIDES.map((direction) => (
            <Drawer key={direction} direction={direction}>
              <DrawerTrigger asChild>
                <Button variant="outline">{direction}</Button>
              </DrawerTrigger>
              <DrawerContent>
                <DrawerHeader>
                  <DrawerTitle>Quick settings</DrawerTitle>
                  <DrawerDescription>Drag the handle to dismiss.</DrawerDescription>
                </DrawerHeader>
                <DrawerFooter>
                  <DrawerClose asChild>
                    <Button variant="ghost">Close</Button>
                  </DrawerClose>
                </DrawerFooter>
              </DrawerContent>
            </Drawer>
          ))}
        </div>
      ),
    },
  ],
};

export const popover: Entry = {
  slug: 'popover',
  name: 'Popover',
  group: 'Overlays',
  description:
    'Non-modal content anchored to a trigger. Unlike Dialog it does not trap focus, so the page behind it stays usable.',
  imports: { subpath: 'popover', names: ['Popover', 'PopoverTrigger', 'PopoverContent'] },

  compositions: [
    {
      name: 'With a header',
      render: () => (
        <Popover>
          <PopoverTrigger asChild>
            <Button variant="outline">Dimensions</Button>
          </PopoverTrigger>
          <PopoverContent className="w-72">
            <PopoverHeader>
              <PopoverTitle>Dimensions</PopoverTitle>
              <PopoverDescription>Applies to the selected frame.</PopoverDescription>
            </PopoverHeader>
            <div className="grid grid-cols-2 gap-3 pt-3">
              <div className="space-y-1">
                <Label htmlFor="w">Width</Label>
                <Input id="w" defaultValue="320" size="sm" />
              </div>
              <div className="space-y-1">
                <Label htmlFor="h">Height</Label>
                <Input id="h" defaultValue="240" size="sm" />
              </div>
            </div>
          </PopoverContent>
        </Popover>
      ),
    },
  ],
};

export const tooltip: Entry = {
  slug: 'tooltip',
  name: 'Tooltip',
  group: 'Overlays',
  description:
    'A short label on hover or focus. In CBAR a tooltip inverts against the page rather than sitting on a surface, which is why it has its own `--tooltip` role instead of reusing `--popover`.',
  imports: {
    subpath: 'tooltip',
    names: ['Tooltip', 'TooltipTrigger', 'TooltipContent', 'TooltipProvider'],
  },
  figma: { set: 'Tooltip' },

  compositions: [
    {
      name: 'Every side',
      description: 'One TooltipProvider around the group shares the open/close delay.',
      render: () => (
        <TooltipProvider>
          <div className="flex flex-wrap gap-3">
            {SIDES.map((side) => (
              <Tooltip key={side}>
                <TooltipTrigger asChild>
                  <Button variant="outline">{side}</Button>
                </TooltipTrigger>
                <TooltipContent side={side}>Opens on {side}</TooltipContent>
              </Tooltip>
            ))}
          </div>
        </TooltipProvider>
      ),
    },
  ],
};

export const dropdownMenu: Entry = {
  slug: 'dropdown-menu',
  name: 'DropdownMenu',
  group: 'Overlays',
  description:
    'An action menu anchored to a trigger, with checkbox items, radio groups, submenus and shortcut hints.',
  imports: {
    subpath: 'dropdown-menu',
    names: ['DropdownMenu', 'DropdownMenuTrigger', 'DropdownMenuContent', 'DropdownMenuItem'],
  },

  compositions: [
    {
      name: 'Actions and toggles',
      render: () => (
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <Button variant="outline">Open menu</Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent className="w-56">
            <DropdownMenuLabel>My account</DropdownMenuLabel>
            <DropdownMenuSeparator />
            <DropdownMenuGroup>
              <DropdownMenuItem>
                Profile
                <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
              </DropdownMenuItem>
              <DropdownMenuItem>
                Settings
                <DropdownMenuShortcut>⌘,</DropdownMenuShortcut>
              </DropdownMenuItem>
            </DropdownMenuGroup>
            <DropdownMenuSeparator />
            <DropdownMenuCheckboxItem checked>Show sidebar</DropdownMenuCheckboxItem>
            <DropdownMenuCheckboxItem>Compact rows</DropdownMenuCheckboxItem>
            <DropdownMenuSeparator />
            <DropdownMenuItem variant="destructive">Sign out</DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      ),
    },
  ],
};

/**
 * The ⌘K pattern: you own the shortcut, `CommandDialog` owns everything else.
 *
 * Named, with an explicit `displayName`, for `chrome/lib/codegen.ts` — see the note
 * on `ControlledSortDemo` in `registry/data.tsx`.
 */
function CommandPaletteDemo() {
  const [open, setOpen] = React.useState(false);

  React.useEffect(() => {
    const onKeyDown = (event: KeyboardEvent) => {
      if (event.key === 'k' && (event.metaKey || event.ctrlKey)) {
        event.preventDefault();
        setOpen((value) => !value);
      }
    };
    document.addEventListener('keydown', onKeyDown);
    return () => document.removeEventListener('keydown', onKeyDown);
  }, []);

  return (
    <>
      <Button variant="outline" onClick={() => setOpen(true)}>
        Open palette
        <CommandShortcut>⌘K</CommandShortcut>
      </Button>
      <CommandDialog open={open} onOpenChange={setOpen}>
        <CommandInput placeholder="Type a command or search…" />
        <CommandList>
          <CommandEmpty>Nothing matches.</CommandEmpty>
          <CommandGroup heading="Navigation">
            <CommandItem value="dashboard" onSelect={() => setOpen(false)}>
              Go to dashboard
            </CommandItem>
            <CommandItem value="settings" onSelect={() => setOpen(false)}>
              Go to settings
            </CommandItem>
          </CommandGroup>
        </CommandList>
      </CommandDialog>
    </>
  );
}
CommandPaletteDemo.displayName = 'CommandPaletteDemo';

export const command: Entry = {
  slug: 'command',
  name: 'Command',
  group: 'Overlays',
  description:
    'A filterable command palette. Written locally — cmdk is one of the fifteen dependencies the kit dropped — so it is the kit’s own matcher and keyboard model.',
  imports: { subpath: 'command', names: ['Command', 'CommandInput', 'CommandList', 'CommandItem'] },

  compositions: [
    {
      name: 'Inline palette',
      render: () => (
        <Command className="w-80 rounded-lg border border-border">
          <CommandInput placeholder="Type a command…" />
          <CommandList>
            <CommandEmpty>Nothing matches.</CommandEmpty>
            <CommandGroup heading="Suggestions">
              <CommandItem value="calendar">
                <CalendarIcon />
                Calendar
              </CommandItem>
              <CommandItem value="search">
                <SearchIcon />
                Search projects
              </CommandItem>
            </CommandGroup>
            <CommandSeparator />
            <CommandGroup heading="Settings">
              <CommandItem value="profile">
                Profile
                <CommandShortcut>⌘P</CommandShortcut>
              </CommandItem>
              <CommandItem value="billing">
                Billing
                <CommandShortcut>⌘B</CommandShortcut>
              </CommandItem>
            </CommandGroup>
          </CommandList>
        </Command>
      ),
    },
    {
      name: 'Matching on keywords',
      description:
        '`value` is what an item is matched on; `keywords` adds the synonyms its label does not contain. Type “dark” or “logout” — neither word is on screen.',
      render: () => (
        <Command className="w-80 rounded-lg border border-border">
          <CommandInput placeholder="Try typing “dark” or “logout”…" />
          <CommandList>
            <CommandEmpty>Nothing matches.</CommandEmpty>
            <CommandGroup heading="Commands">
              <CommandItem value="toggle-theme" keywords={['dark', 'light', 'appearance']}>
                Toggle theme
              </CommandItem>
              <CommandItem value="sign-out" keywords={['logout', 'exit']}>
                Sign out
              </CommandItem>
              <CommandItem value="billing" disabled>
                Billing (unavailable)
              </CommandItem>
            </CommandGroup>
          </CommandList>
        </Command>
      ),
    },
    {
      name: 'As a ⌘K palette',
      description:
        'CommandDialog is the same list inside a Dialog. Binding the shortcut is deliberately left to you — a kit that registers a global key handler on import is a kit that fights the app around it.',
      render: () => <CommandPaletteDemo />,
    },
  ],
};

/**
 * Toast's kinds, in the kit's own order. Exported so `pages/toasts.tsx` and
 * `pages/toasts-figma.tsx` read one list — the rule `registry/alert.tsx` and
 * `registry/badge.tsx` state.
 *
 * Unlike every other axis in this registry these are not a prop: a toast's kind
 * is chosen by which function you call (`toast.success(…)`). The list is still
 * an axis for the parity report and for the grids on `/toasts`.
 */
export const TOAST_KINDS = [
  'default',
  'success',
  'info',
  'warning',
  'error',
  'loading',
] as const;

/**
 * CBAR's five states, in canvas order (top to bottom, 90px apart).
 *
 * `neutral` is what the kit calls `default`; `loading` has no counterpart on the
 * canvas and is the one kit-only kind.
 */
export const FIGMA_TOAST_STATES = ['success', 'error', 'warning', 'info', 'neutral'] as const;

export const toastEntry: Entry = {
  slug: 'toast',
  name: 'Toast',
  group: 'Overlays',
  description:
    'Transient notifications, driven by an imperative `toast()` rather than by rendered state. The queue is a standalone subscribable store, which is what lets `toast.promise` update a toast in place. It depends on no theme library — `theme` defaults to `inherit`.',
  imports: { subpath: 'toast', names: ['Toaster', 'toast'] },
  figma: {
    set: 'Toast',
    /* CBAR's axis is called `state` but holds statuses, so it is declared a
       value axis — see `statusAxes` in `./types.ts`. Without that line the
       parity report drops Toast's only axis as a CSS concern. */
    statusAxes: ['state'],
    axisMap: { state: 'kind' },
    /* Paired by the tokens the set names outright (`--surface-subtle-secondary`
       for `info`, `--border-colored-black` for `neutral`), which is already what
       `kindPalettes` in `toast.tsx` maps them to. Only the name differs. */
    valueMap: { state: { default: 'neutral' } },
  },

  /* No `render` on purpose, so no playground and no matrices here: the only
     component that can draw a toast statically is `Toast`, which is internal to
     the kit. `chrome/lib/codegen.ts` would serialise it into
     `import { Toast } from '<pkg>/toast'` — a line that does not resolve. The
     grids live on `/toasts`, where a `snippet` override emits the imperative
     API instead. `chrome/ui/playground.tsx` returns null without a `render`, so
     this axis costs nothing but gives the parity page something to diff. */
  axes: { kind: TOAST_KINDS },

  compositions: [
    {
      /* Every other component page opens with the component on screen; this one
         used to open with five buttons and nothing to look at, because a toast
         only exists once something calls for it. This draws the five CBAR
         states standing still — the same `Toast` the live queue renders, pinned
         with `duration={Infinity}` so no timer runs and nothing is dismissed.
         `snippet` supplies the copy text: the element here is internal, and the
         honest thing to paste is the call. */
      name: 'Every state',
      description:
        "The five states CBAR draws, standing still. One glyph on all of them — Solid/Status/Info-circle — told apart by colour alone, which is the design file's own scheme.",
      snippet: TOAST_KINDS.filter((kind) => kind !== 'loading')
        .map((kind) =>
          kind === 'default'
            ? `toast('Neutral', { description: 'Description' });`
            : `toast.${kind}('${kind[0].toUpperCase()}${kind.slice(1)}', { description: 'Description' });`
        )
        .join('\n'),
      render: () => (
        <ol className="flex w-[306px] flex-col gap-2">
          {(
            [
              ['success', 'Success'],
              ['error', 'Error'],
              ['warning', 'Warning'],
              ['info', 'Info'],
              ['default', 'Neutral'],
            ] as const
          ).map(([kind, title]) => (
            <Toast
              key={kind}
              toast={{ id: `spec-${kind}`, kind, title, description: 'Description' }}
              duration={Infinity}
              position="bottom-right"
              closeButton
            />
          ))}
        </ol>
      ),
    },
    {
      name: 'Every kind',
      description:
        'Mount one <Toaster /> near the root of the app; everything else is a function call.',
      render: () => (
        <div className="flex flex-wrap gap-3">
          <Toaster />
          <Button variant="outline" onClick={() => toast('Draft saved')}>
            default
          </Button>
          <Button
            variant="outline"
            colorPalette="green"
            onClick={() => toast.success('Deployment finished', { description: 'Live in 3 regions.' })}
          >
            success
          </Button>
          <Button variant="outline" colorPalette="tertiary" onClick={() => toast.info('New version available')}>
            info
          </Button>
          <Button
            variant="outline"
            colorPalette="yellow"
            onClick={() => toast.warning('Your session expires in 2 minutes')}
          >
            warning
          </Button>
          <Button
            variant="outline"
            colorPalette="red"
            onClick={() => toast.error('Could not reach the registry')}
          >
            error
          </Button>
        </div>
      ),
    },
    {
      name: 'Promise',
      description: 'Pinned while pending, then replaced in place — one toast, not three.',
      render: () => (
        <div className="flex gap-3">
          <Toaster />
          <Button
            variant="outline"
            onClick={() =>
              toast.promise(new Promise((resolve) => setTimeout(resolve, 1800)), {
                loading: 'Publishing…',
                success: 'Published',
                error: 'Publish failed',
              })
            }
          >
            Run a promise
          </Button>
        </div>
      ),
    },
  ],

  spec: {
    caption:
      "Measured off CBAR's Toast component set (`2414:10758`) through the Figma bridge — `figma_css` for the box, `figma_text` for the type, the instance frames for the glyph. Every row matches what the kit draws. Two deliberate differences are not in the table: the canvas frames each toast at a fixed 306px where the kit's column is 384px and the toast fills it, and the kit adds `shadow-lg` because a notification floating over live content has to read as elevated where a canvas swatch does not.",
    head: ['Property', 'Figma', 'Kit'],
    rows: [
      ['Padding', '12px 16px', 'py-3 px-4'],
      ['Radius', '6px (radius/sm)', 'rounded-sm'],
      ['Leading edge', '3px left border', 'border-l-3 border-l-(--ctl-border)'],
      ['Surface', 'subtle, per status', 'bg-(--ctl-subtle)'],
      ['Icon → text', '10px', 'gap-2.5'],
      ['Title', '14px / 600', 'text-sm font-semibold'],
      ['Description', '14px / 28px', 'text-sm leading-7'],
      ['Title → description', '5px', 'space-y-[5px]'],
      ['Icon', '20px', 'size-5'],
    ],
  },
};