'use client';

/**
 * Overlays - section 4 of /design-system.
 *
 * Live demos for Dialog, AlertDialog, Drawer, Popover, DropdownMenu,
 * Tooltip, and Toast (via the useToast hook).
 */

import { useState, useCallback } from 'react';
import { Button } from '@/components/ui/primitives/Button';
import { Stack } from '@/components/ui/layout/Stack';
import { Row } from '@/components/ui/layout/Row';
import {
  Dialog,
  DialogTrigger,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
  DialogFooter,
  DialogClose,
} from '@/components/ui/overlays/Dialog';
import {
  AlertDialog,
  AlertDialogTrigger,
  AlertDialogContent,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogAction,
  AlertDialogCancel,
} from '@/components/ui/overlays/AlertDialog';
import {
  Drawer,
  DrawerTrigger,
  DrawerContent,
  DrawerHeader,
  DrawerTitle,
  DrawerDescription,
  DrawerFooter,
  DrawerClose,
} from '@/components/ui/overlays/Drawer';
import { Popover, PopoverTrigger, PopoverContent } from '@/components/ui/overlays/Popover';
import {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuDestructiveItem,
  DropdownMenuSeparator,
} from '@/components/ui/overlays/DropdownMenu';
import {
  TooltipProvider,
  Tooltip,
  TooltipTrigger,
  TooltipPortal,
  TooltipContent,
} from '@/components/ui/overlays/Tooltip';
import {
  ToastProvider,
  ToastViewport,
  Toast,
  ToastTitle,
  ToastDescription,
  ToastClose,
  useToast,
} from '@/components/ui/overlays/Toast';
import { Icon } from '@/components/ui/icons/Icon';
import { CommandPalette } from '@/components/ui/overlays/CommandPalette';
import { useT } from '@/lib/i18n/react';
import { ComponentEntry } from '../../components/ComponentEntry';
import { SectionShell } from '../../components/SectionShell';

function ToastDemo() {
  const t = useT('design_system');
  const { toasts, toast, dismiss } = useToast();
  return (
    <ToastProvider swipeDirection="right">
      <Stack gap="3">
        <Row gap="2" wrap>
          <Button
            onClick={() =>
              toast({
                title: t('sample_toast_title'),
                description: t('sample_toast_desc'),
                tone: 'success',
              })
            }
          >
            {t('show_toast')} (success)
          </Button>
          <Button
            variant="secondary"
            onClick={() =>
              toast({
                title: t('sample_toast_title'),
                description: t('sample_toast_desc'),
                tone: 'info',
              })
            }
          >
            {t('show_toast')} (info)
          </Button>
          <Button
            variant="danger"
            onClick={() =>
              toast({
                title: t('sample_toast_title'),
                description: t('sample_toast_desc'),
                tone: 'danger',
              })
            }
          >
            {t('show_toast')} (danger)
          </Button>
        </Row>
      </Stack>
      {toasts.map((tdata) => (
        <Toast
          key={tdata.id}
          tone={tdata.tone ?? 'neutral'}
          duration={tdata.duration ?? 5000}
          onOpenChange={(open) => {
            if (!open) dismiss(tdata.id);
          }}
        >
          <div className="flex flex-col gap-1">
            <ToastTitle>{tdata.title}</ToastTitle>
            {tdata.description && <ToastDescription>{tdata.description}</ToastDescription>}
          </div>
          <ToastClose />
        </Toast>
      ))}
      <ToastViewport />
    </ToastProvider>
  );
}

export function Overlays() {
  const t = useT('design_system');
  const [dialogOpen, setDialogOpen] = useState(false);
  const [alertOpen, setAlertOpen] = useState(false);
  const [drawerOpen, setDrawerOpen] = useState(false);
  const [cmdkOpen, setCmdkOpen] = useState(false);
  const onCmdkOpenChange = useCallback((open: boolean) => setCmdkOpen(open), []);

  return (
    <SectionShell id="overlays" title={t('sidebar_overlays')} description={t('section_intro')}>
      {/* Dialog */}
      <ComponentEntry
        name="Dialog"
        id="dialog-overlay"
        path="src/components/ui/overlays/Dialog"
        description="Modal dialog with overlay, focus trap, and Esc-to-close (Radix Dialog)."
        tokens={['z-modal', 'shadow-xl', 'radius-xl']}
        a11yNotes={[
          'Focus trapped while open',
          'Title wired via aria-labelledby',
          'Esc closes',
          'motion-reduce respected',
        ]}
        importSnippet={`import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter, DialogClose } from '@/components/ui/overlays/Dialog';`}
      >
        <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
          <DialogTrigger asChild>
            <Button>{t('open_dialog')}</Button>
          </DialogTrigger>
          <DialogContent>
            <DialogHeader>
              <DialogTitle>{t('sample_dialog_title')}</DialogTitle>
              <DialogDescription>{t('sample_dialog_desc')}</DialogDescription>
            </DialogHeader>
            <DialogFooter>
              <Button onClick={() => setDialogOpen(false)}>OK</Button>
            </DialogFooter>
            <DialogClose />
          </DialogContent>
        </Dialog>
      </ComponentEntry>

      {/* AlertDialog */}
      <ComponentEntry
        name="AlertDialog"
        id="alertdialog-overlay"
        path="src/components/ui/overlays/AlertDialog"
        description="Destructive confirmation dialog. Action button uses the danger variant."
        tokens={['color-danger-600', 'z-modal', 'shadow-xl']}
        a11yNotes={[
          'Modal with required title + description',
          'Cancel + Action focused on open',
          'Esc closes',
        ]}
        importSnippet={`import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogAction, AlertDialogCancel } from '@/components/ui/overlays/AlertDialog';`}
      >
        <AlertDialog open={alertOpen} onOpenChange={setAlertOpen}>
          <AlertDialogTrigger asChild>
            <Button variant="danger">{t('open_alert')}</Button>
          </AlertDialogTrigger>
          <AlertDialogContent>
            <AlertDialogHeader>
              <AlertDialogTitle>{t('sample_alert_title')}</AlertDialogTitle>
              <AlertDialogDescription>{t('sample_alert_desc')}</AlertDialogDescription>
            </AlertDialogHeader>
            <AlertDialogFooter>
              <AlertDialogCancel>Cancel</AlertDialogCancel>
              <AlertDialogAction>Confirm</AlertDialogAction>
            </AlertDialogFooter>
          </AlertDialogContent>
        </AlertDialog>
      </ComponentEntry>

      {/* Drawer */}
      <ComponentEntry
        name="Drawer"
        id="drawer-overlay"
        path="src/components/ui/overlays/Drawer"
        description="Mobile sheet built on Radix Dialog. Slides from bottom / start / end."
        tokens={['z-modal', 'shadow-xl']}
        a11yNotes={[
          'Focus trapped',
          'Title wired via aria-labelledby',
          'Logical start/end avoid LTR assumptions',
        ]}
        importSnippet={`import { Drawer, DrawerTrigger, DrawerContent, DrawerHeader, DrawerTitle, DrawerDescription, DrawerFooter, DrawerClose } from '@/components/ui/overlays/Drawer';`}
      >
        <Drawer open={drawerOpen} onOpenChange={setDrawerOpen}>
          <DrawerTrigger asChild>
            <Button aria-label={t('open_drawer')}>{t('open_drawer')}</Button>
          </DrawerTrigger>
          <DrawerContent side="start">
            <DrawerHeader>
              <DrawerTitle>{t('sample_drawer_title')}</DrawerTitle>
              <DrawerDescription>{t('sample_drawer_desc')}</DrawerDescription>
            </DrawerHeader>
            <DrawerFooter>
              <DrawerClose>Close</DrawerClose>
            </DrawerFooter>
          </DrawerContent>
        </Drawer>
      </ComponentEntry>

      {/* Popover */}
      <ComponentEntry
        name="Popover"
        id="popover-overlay"
        path="src/components/ui/overlays/Popover"
        description="Lightweight floating panel anchored to a trigger."
        tokens={['z-popover', 'shadow-md', 'radius-md']}
        a11yNotes={['Esc closes', 'Click-outside dismisses', 'Focus returns to trigger on close']}
        importSnippet={`import { Popover, PopoverTrigger, PopoverContent } from '@/components/ui/overlays/Popover';`}
      >
        <Popover>
          <PopoverTrigger asChild>
            <Button variant="ghost">{t('open_popover')}</Button>
          </PopoverTrigger>
          <PopoverContent>
            <p className="text-text-primary text-sm">{t('sample_popover_body')}</p>
          </PopoverContent>
        </Popover>
      </ComponentEntry>

      {/* DropdownMenu */}
      <ComponentEntry
        name="DropdownMenu"
        id="dropdownmenu-overlay"
        path="src/components/ui/overlays/DropdownMenu"
        description="Radix dropdown menu - used for the deal-row 3-dot actions menu."
        tokens={['z-popover', 'color-danger-600', 'shadow-md']}
        a11yNotes={[
          'Arrow keys navigate items',
          'Type-ahead supported',
          'Destructive item styled red',
        ]}
        importSnippet={`import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuDestructiveItem, DropdownMenuSeparator } from '@/components/ui/overlays/DropdownMenu';`}
      >
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <Button variant="secondary" iconStart={<Icon name="MoreVertical" size="sm" />}>
              {t('open_dropdown')}
            </Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent>
            <DropdownMenuItem>{t('sample_dropdown_item_a')}</DropdownMenuItem>
            <DropdownMenuItem>{t('sample_dropdown_item_b')}</DropdownMenuItem>
            <DropdownMenuSeparator />
            <DropdownMenuDestructiveItem>{t('sample_dropdown_item_c')}</DropdownMenuDestructiveItem>
          </DropdownMenuContent>
        </DropdownMenu>
      </ComponentEntry>

      {/* Tooltip */}
      <ComponentEntry
        name="Tooltip"
        id="tooltip-overlay"
        path="src/components/ui/overlays/Tooltip"
        description="Hover/focus tooltip. Wrap your app once with TooltipProvider."
        tokens={['z-popover', 'shadow-md', 'radius-md']}
        a11yNotes={[
          'Trigger is a real button',
          'Visible on focus too (not just hover)',
          'Esc dismisses',
        ]}
        importSnippet={`import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from '@/components/ui/overlays/Tooltip';`}
      >
        <TooltipProvider delayDuration={150}>
          <Tooltip>
            <TooltipTrigger asChild>
              <Button variant="ghost">{t('open_tooltip')}</Button>
            </TooltipTrigger>
            <TooltipPortal>
              <TooltipContent>{t('sample_tooltip_body')}</TooltipContent>
            </TooltipPortal>
          </Tooltip>
        </TooltipProvider>
      </ComponentEntry>

      {/* CommandPalette */}
      <ComponentEntry
        name="CommandPalette"
        id="commandpalette-overlay"
        path="src/components/ui/overlays/CommandPalette"
        description="Global ⌘K / Ctrl+K command palette for quick navigation and deal search. Built on cmdk + Radix Dialog."
        tokens={['z-modal', 'shadow-xl', 'radius-xl', 'color-brand-primary-50']}
        a11yNotes={[
          'Focus trapped while open',
          'Arrow keys navigate items',
          'Enter selects, Esc closes',
          'Visually hidden title for screen readers',
          'motion-reduce respected',
        ]}
        importSnippet={`import { CommandPalette } from '@/components/ui/overlays/CommandPalette';`}
      >
        <Button onClick={() => setCmdkOpen(true)}>{t('open_command_palette')}</Button>
        <CommandPalette open={cmdkOpen} onOpenChange={onCmdkOpenChange} />
      </ComponentEntry>

      {/* Toast */}
      <ComponentEntry
        name="Toast"
        id="toast-overlay"
        path="src/components/ui/overlays/Toast"
        description="Radix toast queue with the useToast() hook + ToastViewport."
        tokens={['z-toast', 'shadow-lg', 'color-success-50', 'color-danger-50', 'color-info-50']}
        a11yNotes={[
          'Toasts are role=status by default',
          'Auto-dismiss is paused on hover/focus',
          'motion-reduce respected',
        ]}
        importSnippet={`import { ToastProvider, ToastViewport, Toast, ToastTitle, ToastDescription, ToastClose, useToast } from '@/components/ui/overlays/Toast';`}
      >
        <ToastDemo />
      </ComponentEntry>
    </SectionShell>
  );
}