'use client';

import { ReactNode, useState } from 'react';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Checkbox } from '@/components/ui/checkbox';
import { Switch } from '@/components/ui/switch';
import { Textarea } from '@/components/ui/textarea';
import { Skeleton } from '@/components/ui/skeleton';
import { Separator } from '@/components/ui/separator';
import { Progress } from '@/components/ui/progress';
import { Alert, AlertTitle, AlertDescription } from '@/components/ui/alert';
import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs';
import { Card, CardHeader, CardTitle, CardDescription, CardContent } from '@/components/ui/card';
import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
import { Slider } from '@/components/ui/slider';
import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from '@/components/ui/tooltip';
import { LoadingSpinner } from '@/components/ui/loading-spinner';
import { EmptyState } from '@/components/ui/empty-state';
import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '@/components/ui/accordion';
import {
  AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader,
  AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogCancel, AlertDialogAction,
} from '@/components/ui/alert-dialog';
import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '@/components/ui/collapsible';
import { Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem } from '@/components/ui/command';
import { ConfirmDialog } from '@/components/ui/confirm-dialog';
import { CurrencyInput } from '@/components/ui/currency-input';
import { DatePicker } from '@/components/ui/date-picker';
import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogDescription } from '@/components/ui/dialog';
import { Drawer, DrawerTrigger, DrawerContent, DrawerHeader, DrawerTitle, DrawerDescription } from '@/components/ui/drawer';
import {
  DropdownMenu, DropdownMenuTrigger, DropdownMenuContent,
  DropdownMenuItem, DropdownMenuSeparator, DropdownMenuLabel,
} from '@/components/ui/dropdown-menu';
import { ErrorCard } from '@/components/ui/error-card';
import { ErrorMessage } from '@/components/ui/error-message';
import { NumberInput } from '@/components/ui/number-input';
import { PhoneInput } from '@/components/ui/phone-input';
import { AccountNumberInput } from '@/components/ui/account-number-input';
import { BusinessNumberInput } from '@/components/ui/business-number-input';
import { CardNumberInput } from '@/components/ui/card-number-input';
import { PersonalNumberInput } from '@/components/ui/personal-number-input';
import { QuantityInput } from '@/components/ui/quantity-input';
import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '@/components/ui/select';
import { ScrollArea } from '@/components/ui/scroll-area';
import { Sheet, SheetTrigger, SheetContent, SheetHeader, SheetTitle, SheetDescription } from '@/components/ui/sheet';
import { TimePicker } from '@/components/ui/time-picker';
import { Popover, PopoverTrigger, PopoverContent } from '@/components/ui/popover';
import { FileDropzone } from '@/components/ui/file-dropzone';
import { FileInput } from '@/components/ui/file-input';
import { ImageUpload } from '@/components/ui/image-upload';
import { SearchableSelect } from '@/components/ui/searchable-select';
import { MultiSelectCombobox } from '@/components/ui/multi-select-combobox';
import { BadgeSm } from '@/components/atoms/BadgeSm';
import { ScrollableButtonGroup } from '@/components/atoms/ScrollableButtonGroup';
import { TabChip } from '@/components/atoms/TabChip';
// UI - 추가 컴포넌트
import { StatusBadge } from '@/components/ui/status-badge';
import { Table, TableHeader, TableBody, TableHead, TableRow, TableCell } from '@/components/ui/table';
import { FileList } from '@/components/ui/file-list';
import { Calendar } from '@/components/ui/calendar';
import { ChartWrapper } from '@/components/ui/chart-wrapper';
// Molecules
import { FormField } from '@/components/molecules/FormField';
import { IconWithBadge } from '@/components/molecules/IconWithBadge';
import { StatusBadge as MoleculeStatusBadge } from '@/components/molecules/StatusBadge';
import { TableActions } from '@/components/molecules/TableActions';
import { StandardDialog } from '@/components/molecules/StandardDialog';
import { DateRangeSelector } from '@/components/molecules/DateRangeSelector';
import { YearQuarterFilter } from '@/components/molecules/YearQuarterFilter';
import { MobileFilter } from '@/components/molecules/MobileFilter';
// Organisms
import { EmptyState as OrganismEmptyState } from '@/components/ui/empty-state';
import { FormActions } from '@/components/organisms/FormActions';
import { FormSection } from '@/components/organisms/FormSection';
import { PageHeader } from '@/components/organisms/PageHeader';
import { StatCards } from '@/components/organisms/StatCards';
import { MobileCard } from '@/components/organisms/MobileCard';
import { FormFieldGrid } from '@/components/organisms/FormFieldGrid';
// Organisms - 추가
import { SearchFilter } from '@/components/organisms/SearchFilter';
import { ScreenVersionHistory } from '@/components/organisms/ScreenVersionHistory';
import { PageLayout } from '@/components/organisms/PageLayout';
// Common
import { EmptyPage } from '@/components/common/EmptyPage';
import { ServerErrorPage } from '@/components/common/ServerErrorPage';
import { AccessDenied } from '@/components/common/AccessDenied';
import { EditableTable } from '@/components/common/EditableTable/EditableTable';
import { NoticePopupModal } from '@/components/common/NoticePopupModal/NoticePopupModal';
import { ScheduleCalendar } from '@/components/common/ScheduleCalendar/ScheduleCalendar';
// Organisms - 추가
import { DataTable } from '@/components/organisms/DataTable';
import { SearchableSelectionModal } from '@/components/organisms/SearchableSelectionModal/SearchableSelectionModal';
// UI - 추가
import { VisuallyHidden } from '@/components/ui/visually-hidden';
import { DateRangePicker } from '@/components/ui/date-range-picker';
import { DateTimePicker } from '@/components/ui/date-time-picker';
// Molecules - 추가
import { ColumnSettingsPopover } from '@/components/molecules/ColumnSettingsPopover';
import { GenericCRUDDialog } from '@/components/molecules/GenericCRUDDialog';
import { ReorderButtons } from '@/components/molecules/ReorderButtons';
// Organisms - 추가
import { LineItemsTable } from '@/components/organisms/LineItemsTable/LineItemsTable';
// Lucide icons for demos
import { Bell, Package, FileText, Users, TrendingUp, Settings, Inbox } from 'lucide-react';

// ── Stateful demo wrappers (hooks 사용이 필요한 컴포넌트) ──

function CurrencyInputDemo() {
  const [v, setV] = useState<number | undefined>(50000);
  return (
    <div className="flex flex-col gap-2 max-w-xs">
      <CurrencyInput value={v} onChange={setV} />
      <CurrencyInput value={v} onChange={setV} currency="$" />
    </div>
  );
}

function DatePickerDemo() {
  const [d, setD] = useState<string | undefined>();
  return <DatePicker value={d} onChange={(date: string) => setD(date)} placeholder="날짜 선택" />;
}

function NumberInputDemo() {
  const [v, setV] = useState<number | undefined>(1234);
  return (
    <div className="flex flex-col gap-2 max-w-xs">
      <NumberInput value={v} onChange={setV} useComma suffix="원" />
      <NumberInput value={v} onChange={setV} allowDecimal decimalPlaces={2} />
    </div>
  );
}

function PhoneInputDemo() {
  const [v, setV] = useState('01012345678');
  return <PhoneInput value={v} onChange={setV} />;
}

function AccountNumberInputDemo() {
  const [v, setV] = useState('');
  return <AccountNumberInput value={v} onChange={setV} />;
}

function BusinessNumberInputDemo() {
  const [v, setV] = useState('');
  return <BusinessNumberInput value={v} onChange={setV} showValidation />;
}

function CardNumberInputDemo() {
  const [v, setV] = useState('');
  return <CardNumberInput value={v} onChange={setV} />;
}

function PersonalNumberInputDemo() {
  const [v, setV] = useState('');
  return <PersonalNumberInput value={v} onChange={setV} maskBack />;
}

function QuantityInputDemo() {
  const [v, setV] = useState<number | undefined>(5);
  return (
    <div className="flex gap-2">
      <QuantityInput value={v} onChange={setV} showButtons suffix="개" />
      <QuantityInput value={v} onChange={setV} min={0} max={100} step={10} />
    </div>
  );
}

function TimePickerDemo() {
  const [v, setV] = useState('09:30');
  return <TimePicker value={v} onChange={setV} />;
}

function ConfirmDialogDemo() {
  const [open, setOpen] = useState(false);
  return (
    <>
      <Button variant="outline" size="sm" onClick={() => setOpen(true)}>확인 다이얼로그 열기</Button>
      <ConfirmDialog
        open={open}
        onOpenChange={setOpen}
        title="삭제 확인"
        description="정말 삭제하시겠습니까? 이 작업은 취소할 수 없습니다."
        variant="destructive"
        confirmText="삭제"
        onConfirm={() => setOpen(false)}
        onCancel={() => setOpen(false)}
      />
    </>
  );
}

function SearchableSelectDemo() {
  const [v, setV] = useState('');
  const opts = [
    { value: 'apple', label: '사과' },
    { value: 'banana', label: '바나나' },
    { value: 'cherry', label: '체리' },
    { value: 'grape', label: '포도' },
  ];
  return <SearchableSelect options={opts} value={v} onChange={setV} placeholder="과일 선택" />;
}

function MultiSelectDemo() {
  const [v, setV] = useState<string[]>([]);
  const opts = [
    { value: 'react', label: 'React' },
    { value: 'next', label: 'Next.js' },
    { value: 'vue', label: 'Vue' },
    { value: 'svelte', label: 'Svelte' },
  ];
  return <MultiSelectCombobox options={opts} value={v} onChange={setV} placeholder="프레임워크 선택" />;
}

function ImageUploadDemo() {
  const [v, setV] = useState<string | undefined>();
  return <ImageUpload value={v} onChange={() => setV('/placeholder.png')} onRemove={() => setV(undefined)} size="sm" hint="JPG, PNG (최대 10MB)" />;
}

function StandardDialogDemo() {
  const [open, setOpen] = useState(false);
  return (
    <>
      <Button variant="outline" size="sm" onClick={() => setOpen(true)}>표준 다이얼로그 열기</Button>
      <StandardDialog open={open} onOpenChange={setOpen} title="품목 등록" description="새로운 품목을 등록합니다" size="md">
        <p className="text-sm">다이얼로그 내용이 여기에 표시됩니다.</p>
      </StandardDialog>
    </>
  );
}

function DateRangeSelectorDemo() {
  const [startDate, setStartDate] = useState('2026-01-01');
  const [endDate, setEndDate] = useState('2026-02-12');
  return (
    <div className="max-w-lg">
      <DateRangeSelector startDate={startDate} endDate={endDate} onStartDateChange={setStartDate} onEndDateChange={setEndDate} presets={['today', 'thisMonth', 'thisYear']} />
    </div>
  );
}

function YearQuarterFilterDemo() {
  const [year, setYear] = useState(2026);
  const [quarter, setQuarter] = useState<'전체' | 'Q1' | 'Q2' | 'Q3' | 'Q4'>('전체');
  return <YearQuarterFilter year={year} quarter={quarter} onYearChange={setYear} onQuarterChange={setQuarter} />;
}

function SearchFilterDemo() {
  const [v, setV] = useState('');
  return (
    <div className="max-w-md">
      <SearchFilter searchValue={v} onSearchChange={setV} searchPlaceholder="품목명, 코드 검색..." />
    </div>
  );
}

function MobileFilterDemo() {
  const [values, setValues] = useState<Record<string, string | string[]>>({ status: 'all' });
  const fields = [
    { key: 'status', label: '상태', type: 'single' as const, options: [
      { value: 'active', label: '활성' },
      { value: 'inactive', label: '비활성' },
      { value: 'pending', label: '대기' },
    ]},
  ];
  return <MobileFilter fields={fields} values={values} onChange={(k, v) => setValues(prev => ({ ...prev, [k]: v }))} onReset={() => setValues({ status: 'all' })} />;
}

function EditableTableDemo() {
  const [data, setData] = useState([
    { id: '1', name: '볼트 M10', spec: 'M10x30', qty: 100 },
    { id: '2', name: '너트 M10', spec: 'M10', qty: 200 },
  ]);
  return (
    <EditableTable
      title="자재 목록"
      columns={[
        { key: 'name' as const, header: '품목명', placeholder: '품목명 입력' },
        { key: 'spec' as const, header: '규격', placeholder: '규격 입력' },
        { key: 'qty' as const, header: '수량', type: 'number' as const, align: 'right' as const },
      ]}
      data={data}
      onChange={setData}
      createNewRow={() => ({ id: String(Date.now()), name: '', spec: '', qty: 0 })}
      compact
      maxRows={5}
    />
  );
}

function NoticePopupDemo() {
  const [open, setOpen] = useState(false);
  return (
    <>
      <Button variant="outline" size="sm" onClick={() => setOpen(true)}>공지 팝업 열기</Button>
      <NoticePopupModal
        open={open}
        onOpenChange={setOpen}
        popup={{
          id: 'demo-1',
          title: '시스템 점검 안내',
          content: '<p>2026년 2월 15일 (토) 02:00~06:00 시스템 점검이 예정되어 있습니다.</p>',
        }}
      />
    </>
  );
}

function SearchableSelectionDemo() {
  const [open, setOpen] = useState(false);
  const mockItems = [
    { id: '1', name: '볼트 M10', code: 'BLT-001' },
    { id: '2', name: '너트 M10', code: 'NUT-001' },
    { id: '3', name: '와셔 M10', code: 'WSH-001' },
    { id: '4', name: '스프링 와셔', code: 'SWS-001' },
  ];
  return (
    <>
      <Button variant="outline" size="sm" onClick={() => setOpen(true)}>검색 선택 모달 열기</Button>
      <SearchableSelectionModal
        open={open}
        onOpenChange={setOpen}
        title="품목 검색"
        mode="single"
        searchPlaceholder="품목명, 코드 검색..."
        fetchData={async (query: string) => {
          await new Promise(r => setTimeout(r, 300));
          if (!query) return mockItems;
          return mockItems.filter(item =>
            item.name.includes(query) || item.code.includes(query)
          );
        }}
        keyExtractor={(item) => item.id}
        renderItem={(item) => (
          <div className="px-3 py-2 hover:bg-muted">
            <div className="font-medium text-sm">{item.name}</div>
            <div className="text-xs text-muted-foreground">{item.code}</div>
          </div>
        )}
        onSelect={() => setOpen(false)}
        loadOnOpen
      />
    </>
  );
}

// ── 추가 Demo Wrappers ──

function DateRangePickerDemo() {
  const [start, setStart] = useState<string | undefined>();
  const [end, setEnd] = useState<string | undefined>();
  return (
    <div className="max-w-sm">
      <DateRangePicker startDate={start} endDate={end} onStartDateChange={setStart} onEndDateChange={setEnd} />
    </div>
  );
}

function DateTimePickerDemo() {
  const [v, setV] = useState<string | undefined>();
  return (
    <div className="max-w-sm">
      <DateTimePicker value={v} onChange={setV} />
    </div>
  );
}

function ColumnSettingsPopoverDemo() {
  const [cols, setCols] = useState([
    { key: 'name', label: '품목명', visible: true, locked: true },
    { key: 'spec', label: '규격', visible: true, locked: false },
    { key: 'qty', label: '수량', visible: true, locked: false },
    { key: 'price', label: '단가', visible: false, locked: false },
    { key: 'note', label: '비고', visible: false, locked: false },
  ]);
  return (
    <ColumnSettingsPopover
      columns={cols}
      onToggle={(key) => setCols((prev) => prev.map((c) => (c.key === key && !c.locked ? { ...c, visible: !c.visible } : c)))}
      onReset={() => setCols((prev) => prev.map((c) => ({ ...c, visible: true })))}
      hasHiddenColumns={cols.some((c) => !c.visible)}
    />
  );
}

function GenericCRUDDialogDemo() {
  const [open, setOpen] = useState(false);
  return (
    <>
      <Button variant="outline" size="sm" onClick={() => setOpen(true)}>CRUD 다이얼로그 열기</Button>
      <GenericCRUDDialog
        isOpen={open}
        onOpenChange={setOpen}
        mode="add"
        entityName="직급"
        fields={[
          { key: 'name', label: '직급명', type: 'text', placeholder: '직급명 입력' },
          { key: 'status', label: '상태', type: 'select', options: [{ value: 'active', label: '활성' }, { value: 'inactive', label: '비활성' }], defaultValue: 'active' },
        ]}
        onSubmit={() => setOpen(false)}
      />
    </>
  );
}

function LineItemsTableDemo() {
  const [items, setItems] = useState([
    { id: '1', itemName: '볼트 M10x30', quantity: 100, unitPrice: 500, supplyAmount: 50000, vat: 5000, note: '' },
    { id: '2', itemName: '너트 M10', quantity: 200, unitPrice: 300, supplyAmount: 60000, vat: 6000, note: '' },
  ]);
  return (
    <div className="max-w-3xl overflow-x-auto">
      <LineItemsTable
        items={items}
        getItemName={(i) => i.itemName}
        getQuantity={(i) => i.quantity}
        getUnitPrice={(i) => i.unitPrice}
        getSupplyAmount={(i) => i.supplyAmount}
        getVat={(i) => i.vat}
        getNote={(i) => i.note}
        onItemChange={(idx, field, value) => setItems((prev) => prev.map((item, i) => (i === idx ? { ...item, [field]: value } : item)))}
        onAddItem={() => setItems((prev) => [...prev, { id: String(prev.length + 1), itemName: '', quantity: 1, unitPrice: 0, supplyAmount: 0, vat: 0, note: '' }])}
        onRemoveItem={(idx) => setItems((prev) => prev.filter((_, i) => i !== idx))}
        totals={{ supplyAmount: items.reduce((s, i) => s + i.supplyAmount, 0), vat: items.reduce((s, i) => s + i.vat, 0), total: items.reduce((s, i) => s + i.supplyAmount + i.vat, 0) }}
      />
    </div>
  );
}

// ── Preview Registry ──

type PreviewEntry = {
  label: string;
  render: () => ReactNode;
};

export const UI_PREVIEWS: Record<string, PreviewEntry[]> = {
  // ─── Basic ───
  'button.tsx': [
    {
      label: 'Variants',
      render: () => (
        <div className="flex flex-wrap gap-2">
          <Button variant="default" size="sm">Default</Button>
          <Button variant="secondary" size="sm">Secondary</Button>
          <Button variant="outline" size="sm">Outline</Button>
          <Button variant="ghost" size="sm">Ghost</Button>
          <Button variant="destructive" size="sm">Destructive</Button>
          <Button variant="link" size="sm">Link</Button>
        </div>
      ),
    },
    {
      label: 'Sizes',
      render: () => (
        <div className="flex items-center gap-2">
          <Button size="sm">Small</Button>
          <Button size="default">Default</Button>
          <Button size="lg">Large</Button>
          <Button size="icon">+</Button>
        </div>
      ),
    },
  ],

  'badge.tsx': [
    {
      label: 'Variants',
      render: () => (
        <div className="flex flex-wrap gap-2">
          <Badge variant="default">Default</Badge>
          <Badge variant="secondary">Secondary</Badge>
          <Badge variant="outline">Outline</Badge>
          <Badge variant="destructive">Destructive</Badge>
        </div>
      ),
    },
  ],

  'input.tsx': [
    {
      label: 'States',
      render: () => (
        <div className="flex flex-col gap-2 max-w-xs">
          <Input placeholder="기본 입력" />
          <Input placeholder="비활성화" disabled />
        </div>
      ),
    },
  ],

  'label.tsx': [
    {
      label: 'Basic',
      render: () => (
        <div className="flex flex-col gap-2">
          <Label>기본 라벨</Label>
          <Label className="text-sm text-muted-foreground">보조 라벨</Label>
        </div>
      ),
    },
  ],

  'checkbox.tsx': [
    {
      label: 'States',
      render: () => (
        <div className="flex items-center gap-4">
          <div className="flex items-center gap-2">
            <Checkbox id="prev-c1" />
            <Label htmlFor="prev-c1">미체크</Label>
          </div>
          <div className="flex items-center gap-2">
            <Checkbox id="prev-c2" defaultChecked />
            <Label htmlFor="prev-c2">체크됨</Label>
          </div>
          <div className="flex items-center gap-2">
            <Checkbox id="prev-c3" disabled />
            <Label htmlFor="prev-c3">비활성</Label>
          </div>
        </div>
      ),
    },
  ],

  'switch.tsx': [
    {
      label: 'States',
      render: () => (
        <div className="flex items-center gap-4">
          <div className="flex items-center gap-2">
            <Switch id="prev-s1" />
            <Label htmlFor="prev-s1">Off</Label>
          </div>
          <div className="flex items-center gap-2">
            <Switch id="prev-s2" defaultChecked />
            <Label htmlFor="prev-s2">On</Label>
          </div>
        </div>
      ),
    },
  ],

  'textarea.tsx': [
    {
      label: 'Basic',
      render: () => <Textarea placeholder="텍스트를 입력하세요..." className="max-w-xs" rows={3} />,
    },
  ],

  'separator.tsx': [
    {
      label: 'Horizontal',
      render: () => (
        <div className="space-y-2 max-w-xs">
          <p className="text-sm text-muted-foreground">위 영역</p>
          <Separator />
          <p className="text-sm text-muted-foreground">아래 영역</p>
        </div>
      ),
    },
  ],

  'skeleton.tsx': [
    {
      label: 'Shapes',
      render: () => (
        <div className="flex items-center gap-3">
          <Skeleton className="h-10 w-10 rounded-full" />
          <div className="space-y-2">
            <Skeleton className="h-4 w-48" />
            <Skeleton className="h-4 w-32" />
          </div>
        </div>
      ),
    },
  ],

  'progress.tsx': [
    {
      label: 'Values',
      render: () => (
        <div className="flex flex-col gap-3 max-w-xs">
          <Progress value={25} />
          <Progress value={60} />
          <Progress value={100} />
        </div>
      ),
    },
  ],

  'slider.tsx': [
    {
      label: 'Basic',
      render: () => <Slider defaultValue={[50]} max={100} step={1} className="max-w-xs" />,
    },
  ],

  // ─── Text / Feedback ───
  'alert.tsx': [
    {
      label: 'Variants',
      render: () => (
        <div className="flex flex-col gap-2 max-w-md">
          <Alert>
            <AlertTitle>알림</AlertTitle>
            <AlertDescription>기본 알림 메시지입니다.</AlertDescription>
          </Alert>
          <Alert variant="destructive">
            <AlertTitle>오류</AlertTitle>
            <AlertDescription>오류 알림 메시지입니다.</AlertDescription>
          </Alert>
        </div>
      ),
    },
  ],

  'error-card.tsx': [
    {
      label: 'Types',
      render: () => (
        <div className="flex flex-col gap-3 max-w-sm">
          <ErrorCard type="not-found" showBackButton={false} showHomeButton={false} />
          <ErrorCard type="error" message="서버 오류가 발생했습니다." showBackButton={false} showHomeButton={false} />
        </div>
      ),
    },
  ],

  'error-message.tsx': [
    {
      label: 'Basic',
      render: () => (
        <div className="max-w-sm">
          <ErrorMessage message="데이터를 불러오는데 실패했습니다." onRetry={() => {}} />
        </div>
      ),
    },
  ],

  'empty-state.tsx': [
    {
      label: 'Presets',
      render: () => (
        <div className="flex gap-4">
          <EmptyState preset="noData" variant="compact" />
          <EmptyState preset="noResults" variant="compact" />
        </div>
      ),
    },
  ],

  'loading-spinner.tsx': [
    {
      label: 'Sizes',
      render: () => (
        <div className="flex items-center gap-4">
          <LoadingSpinner size="xs" />
          <LoadingSpinner size="sm" />
          <LoadingSpinner size="md" />
          <LoadingSpinner size="lg" />
        </div>
      ),
    },
  ],

  // ─── Layout / Container ───
  'card.tsx': [
    {
      label: 'Basic',
      render: () => (
        <Card className="max-w-xs">
          <CardHeader>
            <CardTitle>카드 제목</CardTitle>
            <CardDescription>카드 설명입니다.</CardDescription>
          </CardHeader>
          <CardContent>
            <p className="text-sm">카드 본문 내용</p>
          </CardContent>
        </Card>
      ),
    },
  ],

  'tabs.tsx': [
    {
      label: 'Basic',
      render: () => (
        <Tabs defaultValue="tab1" className="max-w-xs">
          <TabsList>
            <TabsTrigger value="tab1">탭 1</TabsTrigger>
            <TabsTrigger value="tab2">탭 2</TabsTrigger>
            <TabsTrigger value="tab3">탭 3</TabsTrigger>
          </TabsList>
          <TabsContent value="tab1" className="text-sm p-2">첫 번째 탭 내용</TabsContent>
          <TabsContent value="tab2" className="text-sm p-2">두 번째 탭 내용</TabsContent>
          <TabsContent value="tab3" className="text-sm p-2">세 번째 탭 내용</TabsContent>
        </Tabs>
      ),
    },
  ],

  'accordion.tsx': [
    {
      label: 'Basic',
      render: () => (
        <Accordion type="single" collapsible className="max-w-sm">
          <AccordionItem value="item-1">
            <AccordionTrigger>섹션 1</AccordionTrigger>
            <AccordionContent>첫 번째 섹션의 내용입니다.</AccordionContent>
          </AccordionItem>
          <AccordionItem value="item-2">
            <AccordionTrigger>섹션 2</AccordionTrigger>
            <AccordionContent>두 번째 섹션의 내용입니다.</AccordionContent>
          </AccordionItem>
          <AccordionItem value="item-3">
            <AccordionTrigger>섹션 3</AccordionTrigger>
            <AccordionContent>세 번째 섹션의 내용입니다.</AccordionContent>
          </AccordionItem>
        </Accordion>
      ),
    },
  ],

  'collapsible.tsx': [
    {
      label: 'Basic',
      render: () => (
        <Collapsible className="max-w-xs">
          <CollapsibleTrigger asChild>
            <Button variant="outline" size="sm">펼치기 / 접기</Button>
          </CollapsibleTrigger>
          <CollapsibleContent className="mt-2 p-3 bg-gray-50 rounded text-sm">
            숨겨진 내용이 여기에 표시됩니다.
          </CollapsibleContent>
        </Collapsible>
      ),
    },
  ],

  'scroll-area.tsx': [
    {
      label: 'Basic',
      render: () => (
        <ScrollArea className="h-32 w-48 rounded-md border p-3">
          {Array.from({ length: 20 }, (_, i) => (
            <div key={i} className="text-sm py-1">항목 {i + 1}</div>
          ))}
        </ScrollArea>
      ),
    },
  ],

  // ─── Form Inputs ───
  'radio-group.tsx': [
    {
      label: 'Basic',
      render: () => (
        <RadioGroup defaultValue="opt1">
          <div className="flex items-center gap-2">
            <RadioGroupItem value="opt1" id="prev-r1" />
            <Label htmlFor="prev-r1">옵션 1</Label>
          </div>
          <div className="flex items-center gap-2">
            <RadioGroupItem value="opt2" id="prev-r2" />
            <Label htmlFor="prev-r2">옵션 2</Label>
          </div>
        </RadioGroup>
      ),
    },
  ],

  'select.tsx': [
    {
      label: 'Basic',
      render: () => (
        <div className="max-w-xs">
          <Select>
            <SelectTrigger>
              <SelectValue placeholder="옵션 선택" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="opt1">옵션 1</SelectItem>
              <SelectItem value="opt2">옵션 2</SelectItem>
              <SelectItem value="opt3">옵션 3</SelectItem>
            </SelectContent>
          </Select>
        </div>
      ),
    },
  ],

  'currency-input.tsx': [
    { label: 'Currency', render: () => <CurrencyInputDemo /> },
  ],

  'number-input.tsx': [
    { label: 'Formats', render: () => <NumberInputDemo /> },
  ],

  'phone-input.tsx': [
    { label: 'Phone', render: () => <PhoneInputDemo /> },
  ],

  'account-number-input.tsx': [
    { label: 'Account', render: () => <AccountNumberInputDemo /> },
  ],

  'business-number-input.tsx': [
    { label: 'Business No.', render: () => <BusinessNumberInputDemo /> },
  ],

  'card-number-input.tsx': [
    { label: 'Card No.', render: () => <CardNumberInputDemo /> },
  ],

  'personal-number-input.tsx': [
    { label: 'Personal No.', render: () => <PersonalNumberInputDemo /> },
  ],

  'quantity-input.tsx': [
    { label: 'Quantity', render: () => <QuantityInputDemo /> },
  ],

  'date-picker.tsx': [
    { label: 'DatePicker', render: () => <DatePickerDemo /> },
  ],

  'time-picker.tsx': [
    { label: 'TimePicker', render: () => <TimePickerDemo /> },
  ],

  'searchable-select.tsx': [
    { label: 'Searchable', render: () => <SearchableSelectDemo /> },
  ],

  'multi-select-combobox.tsx': [
    { label: 'Multi Select', render: () => <MultiSelectDemo /> },
  ],

  'image-upload.tsx': [
    { label: 'Upload', render: () => <ImageUploadDemo /> },
  ],

  'file-dropzone.tsx': [
    {
      label: 'Dropzone',
      render: () => (
        <div className="max-w-sm">
          <FileDropzone onFilesSelect={() => {}} title="파일 업로드" description="클릭 또는 드래그하여 파일 업로드" />
        </div>
      ),
    },
  ],

  'file-input.tsx': [
    {
      label: 'FileInput',
      render: () => <FileInput onFileSelect={() => {}} buttonText="파일 선택" placeholder="선택된 파일 없음" />,
    },
  ],

  // ─── Overlay / Dialog ───
  'tooltip.tsx': [
    {
      label: 'Basic',
      render: () => (
        <TooltipProvider>
          <Tooltip>
            <TooltipTrigger asChild>
              <Button variant="outline" size="sm">마우스를 올려보세요</Button>
            </TooltipTrigger>
            <TooltipContent>
              <p>툴팁 내용입니다</p>
            </TooltipContent>
          </Tooltip>
        </TooltipProvider>
      ),
    },
  ],

  'popover.tsx': [
    {
      label: 'Basic',
      render: () => (
        <Popover>
          <PopoverTrigger asChild>
            <Button variant="outline" size="sm">팝오버 열기</Button>
          </PopoverTrigger>
          <PopoverContent className="w-60">
            <div className="text-sm space-y-2">
              <p className="font-medium">팝오버 제목</p>
              <p className="text-muted-foreground">팝오버 내용이 여기에 표시됩니다.</p>
            </div>
          </PopoverContent>
        </Popover>
      ),
    },
  ],

  'dropdown-menu.tsx': [
    {
      label: 'Basic',
      render: () => (
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <Button variant="outline" size="sm">메뉴 열기</Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent>
            <DropdownMenuLabel>작업</DropdownMenuLabel>
            <DropdownMenuSeparator />
            <DropdownMenuItem>수정</DropdownMenuItem>
            <DropdownMenuItem>복사</DropdownMenuItem>
            <DropdownMenuSeparator />
            <DropdownMenuItem variant="destructive">삭제</DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      ),
    },
  ],

  'dialog.tsx': [
    {
      label: 'Basic',
      render: () => (
        <Dialog>
          <DialogTrigger asChild>
            <Button variant="outline" size="sm">다이얼로그 열기</Button>
          </DialogTrigger>
          <DialogContent>
            <DialogHeader>
              <DialogTitle>다이얼로그 제목</DialogTitle>
              <DialogDescription>다이얼로그 설명 내용입니다.</DialogDescription>
            </DialogHeader>
            <div className="py-4 text-sm">다이얼로그 본문</div>
          </DialogContent>
        </Dialog>
      ),
    },
  ],

  'alert-dialog.tsx': [
    {
      label: 'Basic',
      render: () => (
        <AlertDialog>
          <AlertDialogTrigger asChild>
            <Button variant="outline" size="sm">경고 다이얼로그 열기</Button>
          </AlertDialogTrigger>
          <AlertDialogContent>
            <AlertDialogHeader>
              <AlertDialogTitle>정말 삭제하시겠습니까?</AlertDialogTitle>
              <AlertDialogDescription>이 작업은 취소할 수 없습니다.</AlertDialogDescription>
            </AlertDialogHeader>
            <AlertDialogFooter>
              <AlertDialogCancel>취소</AlertDialogCancel>
              <AlertDialogAction>삭제</AlertDialogAction>
            </AlertDialogFooter>
          </AlertDialogContent>
        </AlertDialog>
      ),
    },
  ],

  'confirm-dialog.tsx': [
    { label: 'ConfirmDialog', render: () => <ConfirmDialogDemo /> },
  ],

  'sheet.tsx': [
    {
      label: 'Basic',
      render: () => (
        <Sheet>
          <SheetTrigger asChild>
            <Button variant="outline" size="sm">시트 열기</Button>
          </SheetTrigger>
          <SheetContent>
            <SheetHeader>
              <SheetTitle>시트 제목</SheetTitle>
              <SheetDescription>시트 설명입니다.</SheetDescription>
            </SheetHeader>
            <div className="py-4 text-sm">시트 본문 내용</div>
          </SheetContent>
        </Sheet>
      ),
    },
  ],

  'drawer.tsx': [
    {
      label: 'Basic',
      render: () => (
        <Drawer>
          <DrawerTrigger asChild>
            <Button variant="outline" size="sm">드로어 열기</Button>
          </DrawerTrigger>
          <DrawerContent>
            <DrawerHeader>
              <DrawerTitle>드로어 제목</DrawerTitle>
              <DrawerDescription>드로어 설명입니다.</DrawerDescription>
            </DrawerHeader>
            <div className="p-4 text-sm">드로어 본문 내용</div>
          </DrawerContent>
        </Drawer>
      ),
    },
  ],

  'command.tsx': [
    {
      label: 'Basic',
      render: () => (
        <Command className="rounded-lg border max-w-xs">
          <CommandInput placeholder="검색..." />
          <CommandList>
            <CommandEmpty>결과 없음</CommandEmpty>
            <CommandGroup heading="제안">
              <CommandItem>프로필</CommandItem>
              <CommandItem>설정</CommandItem>
              <CommandItem>알림</CommandItem>
            </CommandGroup>
          </CommandList>
        </Command>
      ),
    },
  ],

  'date-range-picker.tsx': [
    { label: 'DateRangePicker', render: () => <DateRangePickerDemo /> },
  ],

  'date-time-picker.tsx': [
    { label: 'DateTimePicker', render: () => <DateTimePickerDemo /> },
  ],

  // ─── Atoms ───
  'BadgeSm.tsx': [
    {
      label: 'Variants',
      render: () => (
        <div className="flex flex-wrap gap-2">
          <BadgeSm variant="converted">수주전환</BadgeSm>
          <BadgeSm variant="finalized">견적완료</BadgeSm>
          <BadgeSm variant="revising">2차 수정</BadgeSm>
          <BadgeSm variant="initial">최초 작성</BadgeSm>
          <BadgeSm variant="current">현재버전</BadgeSm>
          <BadgeSm variant="default">기본</BadgeSm>
          <BadgeSm variant="outline">외곽선</BadgeSm>
        </div>
      ),
    },
  ],

  'ScrollableButtonGroup.tsx': [
    {
      label: 'Scroll',
      render: () => (
        <div className="max-w-[280px] border rounded p-2">
          <ScrollableButtonGroup gap="sm">
            <Button size="sm" variant="outline">전체</Button>
            <Button size="sm" variant="outline">진행중</Button>
            <Button size="sm" variant="outline">완료</Button>
            <Button size="sm" variant="outline">대기</Button>
            <Button size="sm" variant="outline">취소</Button>
            <Button size="sm" variant="outline">보류</Button>
          </ScrollableButtonGroup>
        </div>
      ),
    },
  ],

  'TabChip.tsx': [
    {
      label: 'States',
      render: () => (
        <div className="flex flex-wrap gap-2">
          <TabChip label="전체" count={42} active />
          <TabChip label="진행중" count={15} />
          <TabChip label="완료" count={20} />
          <TabChip label="대기" count={7} />
        </div>
      ),
    },
  ],

  // ─── UI 추가 ───
  'status-badge.tsx': [
    {
      label: 'Variants',
      render: () => (
        <div className="flex flex-wrap gap-2">
          <StatusBadge variant="success">완료</StatusBadge>
          <StatusBadge variant="warning">대기</StatusBadge>
          <StatusBadge variant="destructive">취소</StatusBadge>
          <StatusBadge variant="info">진행중</StatusBadge>
          <StatusBadge variant="default">초안</StatusBadge>
          <StatusBadge variant="purple">보류</StatusBadge>
        </div>
      ),
    },
    {
      label: 'Sizes',
      render: () => (
        <div className="flex items-center gap-2">
          <StatusBadge variant="success" size="sm">Small</StatusBadge>
          <StatusBadge variant="success" size="md">Medium</StatusBadge>
          <StatusBadge variant="success" size="lg">Large</StatusBadge>
        </div>
      ),
    },
  ],

  'table.tsx': [
    {
      label: 'Basic',
      render: () => (
        <div className="max-w-md">
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>품목명</TableHead>
                <TableHead>수량</TableHead>
                <TableHead>단가</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              <TableRow>
                <TableCell>볼트 M10</TableCell>
                <TableCell>100</TableCell>
                <TableCell>500원</TableCell>
              </TableRow>
              <TableRow>
                <TableCell>너트 M10</TableCell>
                <TableCell>200</TableCell>
                <TableCell>300원</TableCell>
              </TableRow>
            </TableBody>
          </Table>
        </div>
      ),
    },
  ],

  'file-list.tsx': [
    {
      label: 'Files',
      render: () => (
        <div className="max-w-sm">
          <FileList
            existingFiles={[
              { id: '1', name: '견적서_2026.pdf', size: 2048000 },
              { id: '2', name: '도면_v3.dwg', size: 5120000 },
              { id: '3', name: '사진.jpg', size: 1024000 },
            ]}
            readOnly
          />
        </div>
      ),
    },
  ],

  'calendar.tsx': [
    {
      label: 'Calendar',
      render: () => (
        <div className="max-w-[300px] border rounded-lg p-2">
          <Calendar mode="single" />
        </div>
      ),
    },
  ],

  'chart-wrapper.tsx': [
    {
      label: 'Loading',
      render: () => (
        <div className="max-w-xs">
          <ChartWrapper height={120} delay={3000}>
            <div className="h-[120px] flex items-center justify-center bg-blue-50 rounded-lg text-sm text-blue-600">차트 콘텐츠</div>
          </ChartWrapper>
        </div>
      ),
    },
  ],

  // ─── Molecules ───
  'FormField.tsx': [
    {
      label: 'Types',
      render: () => (
        <div className="grid grid-cols-2 gap-3 max-w-md">
          <FormField label="품목명" required placeholder="품목명 입력" />
          <FormField label="상태" type="select" options={[{ value: 'active', label: '활성' }, { value: 'inactive', label: '비활성' }]} />
          <FormField label="오류 예시" error="필수 입력 항목입니다" value="" />
          <FormField label="비고" type="textarea" placeholder="메모 입력" rows={2} />
        </div>
      ),
    },
  ],

  'IconWithBadge.tsx': [
    {
      label: 'Sizes',
      render: () => (
        <div className="flex flex-col gap-3">
          <IconWithBadge icon={Bell} iconColor="text-blue-600" iconBgColor="bg-blue-100" label="알림" badge={{ label: '3', variant: 'destructive' }} size="sm" />
          <IconWithBadge icon={Package} iconColor="text-green-600" iconBgColor="bg-green-100" label="품목 관리" badge={{ label: '활성', variant: 'default' }} size="md" />
          <IconWithBadge icon={Users} iconColor="text-purple-600" iconBgColor="bg-purple-100" label="사용자" size="lg" />
        </div>
      ),
    },
  ],

  'StatusBadge.tsx': [
    {
      label: 'Variants',
      render: () => (
        <div className="flex flex-wrap gap-2">
          <MoleculeStatusBadge label="완료" variant="success" />
          <MoleculeStatusBadge label="진행중" variant="warning" />
          <MoleculeStatusBadge label="취소" variant="danger" />
          <MoleculeStatusBadge label="대기" variant="info" />
          <MoleculeStatusBadge label="초안" variant="default" />
          <MoleculeStatusBadge label="보류" variant="secondary" />
        </div>
      ),
    },
    {
      label: 'Sizes',
      render: () => (
        <div className="flex items-center gap-2">
          <MoleculeStatusBadge label="Small" variant="success" size="sm" />
          <MoleculeStatusBadge label="Medium" variant="success" size="md" />
          <MoleculeStatusBadge label="Large" variant="success" size="lg" />
        </div>
      ),
    },
  ],

  'TableActions.tsx': [
    {
      label: 'Layouts',
      render: () => (
        <div className="flex flex-col gap-3">
          <div className="flex items-center gap-2">
            <span className="text-xs text-muted-foreground w-16">Buttons:</span>
            <TableActions layout="buttons" actions={[
              { type: 'view', label: '보기', onClick: () => {} },
              { type: 'edit', label: '수정', onClick: () => {} },
              { type: 'delete', label: '삭제', onClick: () => {}, variant: 'destructive' },
            ]} />
          </div>
          <div className="flex items-center gap-2">
            <span className="text-xs text-muted-foreground w-16">Dropdown:</span>
            <TableActions layout="dropdown" actions={[
              { type: 'view', label: '보기', onClick: () => {} },
              { type: 'edit', label: '수정', onClick: () => {} },
              { type: 'copy', label: '복사', onClick: () => {} },
              { type: 'delete', label: '삭제', onClick: () => {}, variant: 'destructive' },
            ]} />
          </div>
        </div>
      ),
    },
  ],

  'StandardDialog.tsx': [
    { label: 'Dialog', render: () => <StandardDialogDemo /> },
  ],

  'DateRangeSelector.tsx': [
    { label: 'DateRange', render: () => <DateRangeSelectorDemo /> },
  ],

  'YearQuarterFilter.tsx': [
    { label: 'Filter', render: () => <YearQuarterFilterDemo /> },
  ],

  'MobileFilter.tsx': [
    { label: 'Filter', render: () => <MobileFilterDemo /> },
  ],

  'ColumnSettingsPopover.tsx': [
    { label: 'Popover', render: () => <ColumnSettingsPopoverDemo /> },
  ],

  'GenericCRUDDialog.tsx': [
    { label: 'CRUD Dialog', render: () => <GenericCRUDDialogDemo /> },
  ],

  'ReorderButtons.tsx': [
    {
      label: 'Sizes',
      render: () => (
        <div className="flex items-center gap-6">
          <div className="flex items-center gap-2">
            <span className="text-xs text-muted-foreground">sm:</span>
            <ReorderButtons onMoveUp={() => {}} onMoveDown={() => {}} isFirst={false} isLast={false} size="sm" />
          </div>
          <div className="flex items-center gap-2">
            <span className="text-xs text-muted-foreground">xs:</span>
            <ReorderButtons onMoveUp={() => {}} onMoveDown={() => {}} isFirst={false} isLast={false} size="xs" />
          </div>
          <div className="flex items-center gap-2">
            <span className="text-xs text-muted-foreground">disabled:</span>
            <ReorderButtons onMoveUp={() => {}} onMoveDown={() => {}} isFirst={true} isLast={true} size="sm" />
          </div>
        </div>
      ),
    },
  ],

  // ─── Organisms ───
  'EmptyState.tsx': [
    {
      label: 'Variants',
      render: () => (
        <div className="flex gap-4">
          <OrganismEmptyState icon={<Inbox className="w-8 h-8" />} message="데이터 없음" description="등록된 항목이 없습니다." />
        </div>
      ),
    },
  ],

  'FormActions.tsx': [
    {
      label: 'Alignments',
      render: () => (
        <div className="flex flex-col gap-3 max-w-sm">
          <FormActions onSave={() => {}} onCancel={() => {}} align="right" />
          <FormActions onSave={() => {}} onCancel={() => {}} saveLabel="등록" cancelLabel="돌아가기" align="left" />
        </div>
      ),
    },
  ],

  'FormSection.tsx': [
    {
      label: 'Variants',
      render: () => (
        <div className="flex flex-col gap-3 max-w-sm">
          <FormSection title="기본 정보" description="품목 기본 정보를 입력합니다" icon={Settings}>
            <p className="text-sm text-muted-foreground">폼 필드 영역</p>
          </FormSection>
          <FormSection title="강조 섹션" variant="highlighted" icon={Package}>
            <p className="text-sm text-muted-foreground">하이라이트 영역</p>
          </FormSection>
        </div>
      ),
    },
  ],

  'PageHeader.tsx': [
    {
      label: 'Basic',
      render: () => (
        <div className="max-w-lg">
          <PageHeader
            title="품목 관리"
            description="품목 목록을 조회하고 관리합니다"
            icon={Package}
            actions={<Button size="sm">등록</Button>}
          />
        </div>
      ),
    },
  ],

  'StatCards.tsx': [
    {
      label: 'Stats',
      render: () => (
        <div className="max-w-lg">
          <StatCards stats={[
            { label: '총 품목', value: '1,234', icon: Package, iconColor: 'text-blue-600' },
            { label: '사용자', value: 42, icon: Users, iconColor: 'text-green-600' },
            { label: '매출', value: '₩12.5M', icon: TrendingUp, iconColor: 'text-purple-600', trend: { value: '+12%', isPositive: true } },
            { label: '문서', value: 89, icon: FileText, iconColor: 'text-orange-600' },
          ]} />
        </div>
      ),
    },
  ],

  'MobileCard.tsx': [
    {
      label: 'Variants',
      render: () => (
        <div className="flex flex-col gap-3 max-w-xs">
          <MobileCard
            title="볼트 M10x30"
            subtitle="BLT-001"
            badge={{ label: '활성', variant: 'default' }}
            details={[
              { label: '규격', value: 'M10x30' },
              { label: '수량', value: '1,200개' },
              { label: '단가', value: '500원' },
              { label: '재고', value: '충분', badge: true },
            ]}
          />
        </div>
      ),
    },
  ],

  'FormFieldGrid.tsx': [
    {
      label: 'Grid',
      render: () => (
        <div className="max-w-lg">
          <FormFieldGrid columns={3}>
            <FormField label="품목명" placeholder="입력" />
            <FormField label="규격" placeholder="입력" />
            <FormField label="단위" type="select" options={[{ value: 'ea', label: 'EA' }, { value: 'kg', label: 'KG' }]} />
          </FormFieldGrid>
        </div>
      ),
    },
  ],

  // ─── Organisms 추가 ───
  'SearchFilter.tsx': [
    { label: 'Search', render: () => <SearchFilterDemo /> },
  ],

  'ScreenVersionHistory.tsx': [
    {
      label: 'History',
      render: () => (
        <div className="max-w-md">
          <ScreenVersionHistory versionHistory={[
            { id: '1', version: 3, changeDescription: '단가 수정', changedBy: '김철수', changedAt: '2026-02-12' },
            { id: '2', version: 2, changeDescription: '규격 변경', changedBy: '이영희', changedAt: '2026-02-10' },
            { id: '3', version: 1, changeDescription: '최초 등록', changedBy: '박민수', changedAt: '2026-02-08' },
          ]} />
        </div>
      ),
    },
  ],

  'PageLayout.tsx': [
    {
      label: 'Max Widths',
      render: () => (
        <div className="space-y-2">
          <PageLayout maxWidth="sm">
            <div className="p-3 bg-blue-50 rounded text-xs text-center">maxWidth=&quot;sm&quot; (max-w-3xl)</div>
          </PageLayout>
          <PageLayout maxWidth="full">
            <div className="p-3 bg-green-50 rounded text-xs text-center">maxWidth=&quot;full&quot; (기본값)</div>
          </PageLayout>
        </div>
      ),
    },
  ],

  // ─── Common ───
  'EmptyPage.tsx': [
    {
      label: 'Under Construction',
      render: () => (
        <div className="max-h-[280px] overflow-auto rounded-lg border">
          <EmptyPage title="품목 관리" description="이 페이지는 현재 개발 중입니다." showBackButton={false} showHomeButton={false} />
        </div>
      ),
    },
  ],

  'ServerErrorPage.tsx': [
    {
      label: 'Server Error',
      render: () => (
        <div className="max-h-[280px] overflow-auto rounded-lg border">
          <ServerErrorPage errorCode="500" showBackButton={false} showHomeButton={false} showContactInfo={false} onRetry={() => {}} />
        </div>
      ),
    },
  ],

  'AccessDenied.tsx': [
    {
      label: 'Access Denied',
      render: () => (
        <div className="max-h-[280px] overflow-auto rounded-lg border">
          <AccessDenied showBackButton={false} showHomeButton={false} />
        </div>
      ),
    },
  ],

  'EditableTable.tsx': [
    { label: 'Editable', render: () => <EditableTableDemo /> },
  ],

  'NoticePopupModal.tsx': [
    { label: 'Popup', render: () => <NoticePopupDemo /> },
  ],

  'ScheduleCalendar.tsx': [
    {
      label: 'Calendar',
      render: () => (
        <div className="max-w-lg">
          <ScheduleCalendar
            events={[
              { id: '1', title: '김담당 - 현장A', startDate: '2026-02-09', endDate: '2026-02-13', color: 'blue' },
              { id: '2', title: '이과장 - 현장B', startDate: '2026-02-11', endDate: '2026-02-14', color: 'green' },
              { id: '3', title: '박대리 - 출장', startDate: '2026-02-15', endDate: '2026-02-15', color: 'orange' },
            ]}
            badges={[
              { date: '2026-02-09', count: 2, color: 'blue' },
              { date: '2026-02-15', count: 1, color: 'red' },
            ]}
          />
        </div>
      ),
    },
  ],

  // ─── UI 추가 ───
  'visually-hidden.tsx': [
    {
      label: 'Concept',
      render: () => (
        <div className="space-y-2 max-w-sm">
          <p className="text-sm">스크린리더 전용 숨김 텍스트:</p>
          <div className="flex items-center gap-2 p-2 border rounded">
            <Button size="sm" variant="outline">
              <Bell className="w-4 h-4" />
              <VisuallyHidden>알림 버튼</VisuallyHidden>
            </Button>
            <span className="text-xs text-muted-foreground">아이콘만 표시, 접근성 텍스트 포함</span>
          </div>
        </div>
      ),
    },
  ],

  // ─── Organisms 추가 ───
  'DataTable.tsx': [
    {
      label: 'Mock Table',
      render: () => (
        <div className="max-w-lg [&_.hidden]:!block">
          <DataTable
            keyField="id"
            columns={[
              { key: 'name', label: '품목명' },
              { key: 'spec', label: '규격' },
              { key: 'qty', label: '수량', type: 'number' as const },
              { key: 'price', label: '단가', type: 'currency' as const },
            ]}
            data={[
              { id: '1', name: '볼트 M10x30', spec: 'M10', qty: 100, price: 500 },
              { id: '2', name: '너트 M10', spec: 'M10', qty: 200, price: 300 },
              { id: '3', name: '와셔 M10', spec: 'M10', qty: 50, price: 100 },
            ]}
            compact
            striped
          />
        </div>
      ),
    },
  ],

  'SearchableSelectionModal.tsx': [
    { label: 'Modal', render: () => <SearchableSelectionDemo /> },
  ],

  'LineItemsTable.tsx': [
    { label: 'Line Items', render: () => <LineItemsTableDemo /> },
  ],
};
