'use client';

import { useEffect, useId, useRef, useState } from 'react';
import {
  AlertTriangle,
  CalendarDays,
  Check,
  ChevronDown,
  ChevronLeft,
  ChevronRight,
  Command as CommandIcon,
  Copy,
  Download,
  FileText,
  GripVertical,
  Inbox,
  Info,
  MoreHorizontal,
  Paperclip,
  PanelLeft,
  Plus,
  RotateCcw,
  Search,
  Send,
  Trash2,
  Upload,
  X,
} from 'lucide-react';
import styles from './components.module.css';

type ComponentPreviewProps = {
  slug: string;
  compact?: boolean;
};

const days = ['M', 'T', 'W', 'T', 'F', 'S', 'S'];
const dates = [27, 28, 29, 30, 31, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30];

function DemoButton({ children, tone = 'primary', disabled = false, onClick, buttonRef }: { children: React.ReactNode; tone?: 'primary' | 'secondary' | 'quiet' | 'danger'; disabled?: boolean; onClick?: () => void; buttonRef?: React.Ref<HTMLButtonElement> }) {
  return <button ref={buttonRef} className={`${styles.demoButton} ${styles[`demoButton${tone[0].toUpperCase()}${tone.slice(1)}`]}`} type="button" disabled={disabled} onClick={onClick}>{children}</button>;
}

function DemoCheckbox({ label, defaultChecked = false, disabled = false }: { label: string; defaultChecked?: boolean; disabled?: boolean }) {
  return (
    <label className={styles.demoCheckbox}>
      <input type="checkbox" defaultChecked={defaultChecked} disabled={disabled} />
      <span aria-hidden="true"><Check /></span>
      <span className={styles.visuallyHidden}>{label}</span>
    </label>
  );
}

function SelectDemo() {
  const [open, setOpen] = useState(true);
  const [value, setValue] = useState('Epic');
  const [activeIndex, setActiveIndex] = useState(2);
  const listboxId = useId();
  const triggerRef = useRef<HTMLButtonElement>(null);
  const listboxRef = useRef<HTMLDivElement>(null);
  const options = ['Common', 'Rare', 'Epic'];

  function focusOption(index: number) {
    setActiveIndex(index);
    window.requestAnimationFrame(() => listboxRef.current?.querySelectorAll<HTMLElement>('[role="option"]')[index]?.focus());
  }

  function closeSelect() {
    setOpen(false);
    window.requestAnimationFrame(() => triggerRef.current?.focus());
  }

  function handleTriggerKeyDown(event: React.KeyboardEvent<HTMLButtonElement>) {
    if (!['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) return;
    event.preventDefault();
    setOpen(true);
    const selectedIndex = options.indexOf(value);
    focusOption(event.key === 'ArrowUp' || event.key === 'End' ? options.length - 1 : event.key === 'Home' ? 0 : selectedIndex);
  }

  function handleListboxKeyDown(event: React.KeyboardEvent<HTMLDivElement>) {
    if (event.key === 'Escape') {
      event.preventDefault();
      closeSelect();
      return;
    }
    if (event.key === 'Enter' || event.key === ' ') {
      event.preventDefault();
      setValue(options[activeIndex]);
      closeSelect();
      return;
    }
    const nextIndex = event.key === 'ArrowDown'
      ? (activeIndex + 1) % options.length
      : event.key === 'ArrowUp'
        ? (activeIndex + options.length - 1) % options.length
        : event.key === 'Home'
          ? 0
          : event.key === 'End'
            ? options.length - 1
            : undefined;
    if (nextIndex === undefined) return;
    event.preventDefault();
    focusOption(nextIndex);
  }

  return (
    <div className={styles.selectDemo}>
      <span>Member tier</span>
      <button ref={triggerRef} type="button" aria-haspopup="listbox" aria-expanded={open} aria-controls={listboxId} onClick={() => setOpen(!open)} onKeyDown={handleTriggerKeyDown}>
        <span>{value}</span><ChevronDown aria-hidden="true" />
      </button>
      {open && (
        <div ref={listboxRef} id={listboxId} role="listbox" aria-label="Member tier" onKeyDown={handleListboxKeyDown}>
          {options.map((option, index) => (
            <button role="option" aria-selected={value === option} tabIndex={activeIndex === index ? 0 : -1} type="button" onFocus={() => setActiveIndex(index)} onClick={() => { setValue(option); closeSelect(); }} key={option}>
              <span>{option}</span>{value === option && <Check aria-hidden="true" />}
            </button>
          ))}
        </div>
      )}
    </div>
  );
}

function CalendarDemo() {
  return (
    <div className={styles.calendar}>
      <div className={styles.calendarHeader}><button type="button" aria-label="Previous month"><ChevronLeft /></button><strong>August 2026</strong><button type="button" aria-label="Next month"><ChevronRight /></button></div>
      <div className={styles.calendarGrid}>
        {days.map((day, index) => <span className={styles.calendarDay} key={`${day}-${index}`}>{day}</span>)}
        {dates.map((date, index) => <button className={`${index < 5 ? styles.calendarOutside : ''} ${date === 7 && index > 4 ? styles.calendarSelected : ''}`} type="button" key={`${date}-${index}`}>{date}</button>)}
      </div>
    </div>
  );
}

function SwitchDemo() {
  const [enabled, setEnabled] = useState(true);
  return (
    <button className={styles.switchRow} type="button" role="switch" aria-checked={enabled} onClick={() => setEnabled(!enabled)}>
      <span><strong>Member notifications</strong><small>Send a summary when value changes.</small></span>
      <i className={enabled ? styles.switchOn : undefined}><b /></i>
    </button>
  );
}

function ToggleDemo({ multiple = false }: { multiple?: boolean }) {
  const [active, setActive] = useState(multiple ? ['Day'] : ['Grid']);
  const options = multiple ? ['Day', 'Week', 'Month'] : ['List', 'Grid'];
  return (
    <div className={styles.toggleGroup} role="group" aria-label="View options">
      {options.map((option) => {
        const selected = active.includes(option);
        return <button type="button" aria-pressed={selected} className={selected ? styles.toggleActive : undefined} onClick={() => setActive(multiple ? selected ? active.filter((item) => item !== option) : [...active, option] : selected ? [] : [option])} key={option}>{option}</button>;
      })}
    </div>
  );
}

function TabsDemo() {
  const [tab, setTab] = useState('Overview');
  const tabNames = ['Overview', 'Activity', 'Notes'];

  function handleKeyDown(event: React.KeyboardEvent<HTMLButtonElement>, index: number) {
    let nextIndex = index;
    if (event.key === 'ArrowRight') nextIndex = (index + 1) % tabNames.length;
    else if (event.key === 'ArrowLeft') nextIndex = (index + tabNames.length - 1) % tabNames.length;
    else if (event.key === 'Home') nextIndex = 0;
    else if (event.key === 'End') nextIndex = tabNames.length - 1;
    else return;

    event.preventDefault();
    const nextTab = tabNames[nextIndex];
    setTab(nextTab);
    event.currentTarget.parentElement?.querySelectorAll<HTMLButtonElement>('[role="tab"]')[nextIndex]?.focus();
  }

  return (
    <div className={styles.tabsDemo}>
      <div role="tablist" aria-label="Member views">{tabNames.map((name, index) => <button id={`member-tab-${name.toLowerCase()}`} role="tab" aria-selected={tab === name} aria-controls="member-tab-panel" tabIndex={tab === name ? 0 : -1} className={tab === name ? styles.tabActive : undefined} onClick={() => setTab(name)} onKeyDown={(event) => handleKeyDown(event, index)} type="button" key={name}>{name}</button>)}</div>
      <div id="member-tab-panel" role="tabpanel" aria-labelledby={`member-tab-${tab.toLowerCase()}`} tabIndex={0}><span>Current view</span><strong>{tab}</strong><p>Stable navigation, context-specific information.</p></div>
    </div>
  );
}

function DialogDemo({ destructive = false }: { destructive?: boolean }) {
  const [open, setOpen] = useState(false);
  const titleId = useId();
  const triggerRef = useRef<HTMLButtonElement>(null);
  const dialogRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (!open) return;
    dialogRef.current?.querySelector<HTMLElement>('button, input')?.focus();
  }, [open]);

  function closeDialog() {
    setOpen(false);
    window.requestAnimationFrame(() => triggerRef.current?.focus());
  }

  function handleDialogKeyDown(event: React.KeyboardEvent<HTMLDivElement>) {
    if (event.key === 'Escape') {
      event.preventDefault();
      closeDialog();
      return;
    }
    if (event.key !== 'Tab') return;

    const focusable = [...(dialogRef.current?.querySelectorAll<HTMLElement>('button:not(:disabled), input:not(:disabled), [tabindex]:not([tabindex="-1"])') ?? [])];
    if (!focusable.length) return;
    const first = focusable[0];
    const last = focusable[focusable.length - 1];
    if (event.shiftKey && document.activeElement === first) {
      event.preventDefault();
      last.focus();
    } else if (!event.shiftKey && document.activeElement === last) {
      event.preventDefault();
      first.focus();
    }
  }

  return (
    <>
      <DemoButton buttonRef={triggerRef} tone={destructive ? 'danger' : 'primary'} onClick={() => setOpen(true)}>{destructive ? 'Delete program' : 'Edit member'}</DemoButton>
      {open && (
        <div className={styles.dialogBackdrop} role="presentation" onMouseDown={closeDialog}>
          <div ref={dialogRef} className={styles.dialog} role={destructive ? 'alertdialog' : 'dialog'} aria-modal="true" aria-labelledby={titleId} onKeyDown={handleDialogKeyDown} onMouseDown={(event) => event.stopPropagation()}>
            <button className={styles.iconButton} type="button" aria-label="Close dialog" onClick={closeDialog}><X /></button>
            <span>{destructive ? 'Permanent action' : 'Member profile'}</span>
            <h3 id={titleId}>{destructive ? 'Delete this program?' : 'Edit member details'}</h3>
            <p>{destructive ? 'This removes the program and cannot be undone.' : 'Update the member name without leaving this context.'}</p>
            {!destructive && <input aria-label="Member name" defaultValue="Avery Morgan" />}
            <div className={styles.dialogActions}><DemoButton tone="secondary" onClick={closeDialog}>Cancel</DemoButton><DemoButton tone={destructive ? 'danger' : 'primary'} onClick={closeDialog}>{destructive ? 'Delete program' : 'Save changes'}</DemoButton></div>
          </div>
        </div>
      )}
    </>
  );
}

function CarouselDemo() {
  const [slide, setSlide] = useState(0);
  const slides = [
    ['01', 'Store credit', '$128.40 available'],
    ['02', 'Membership', 'Epic tier'],
    ['03', 'Wallet', 'Pass active'],
  ];
  const current = slides[slide];
  return (
    <div className={styles.carousel}>
      <div><span>{current[0]} / 03</span><strong>{current[1]}</strong><p>{current[2]}</p></div>
      <div className={styles.carouselControls}><button type="button" aria-label="Previous slide" onClick={() => setSlide((slide + slides.length - 1) % slides.length)}><ChevronLeft /></button><span>{slides.map((_, index) => <i className={index === slide ? styles.dotActive : undefined} key={index} />)}</span><button type="button" aria-label="Next slide" onClick={() => setSlide((slide + 1) % slides.length)}><ChevronRight /></button></div>
    </div>
  );
}

function QuestionnaireDemo() {
  const [step, setStep] = useState(0);
  const questions = [
    ['What should members earn?', ['Store credit', 'Benefits', 'Both']],
    ['Where do customers shop?', ['Online', 'In store', 'Everywhere']],
    ['What matters most now?', ['Repeat purchase', 'Recognition', 'Community']],
  ] as const;
  const question = questions[step];
  return (
    <div className={styles.questionnaire}>
      <div><span>Question {step + 1} of {questions.length}</span><i><b style={{ width: `${((step + 1) / questions.length) * 100}%` }} /></i></div>
      <strong>{question[0]}</strong>
      <div>{question[1].map((answer) => <button type="button" key={answer}>{answer}<ChevronRight /></button>)}</div>
      <footer><button type="button" disabled={step === 0} onClick={() => setStep(Math.max(0, step - 1))}>Back</button><button type="button" onClick={() => setStep((step + 1) % questions.length)}>Continue</button></footer>
    </div>
  );
}

function StaticChart() {
  const values = [38, 54, 47, 68, 61, 82, 76];
  return (
    <div className={styles.chart}>
      <div><span>Returning member value</span><strong>$284.20</strong><small>+18.4% this period</small></div>
      <div className={styles.chartPlot} aria-label="Returning member value rose over seven periods">{values.map((value, index) => <i key={index}><b style={{ height: `${value}%` }} /><span>{index + 1}</span></i>)}</div>
    </div>
  );
}

function ComponentDemo({ slug }: { slug: string }) {
  switch (slug) {
    case 'button':
      return <div className={styles.demoStack}><div className={styles.demoRow}><DemoButton>Save program</DemoButton><DemoButton tone="secondary">Preview</DemoButton><DemoButton tone="quiet">Cancel</DemoButton></div><div className={styles.demoRow}><DemoButton disabled>Processing</DemoButton><DemoButton tone="danger">Delete</DemoButton></div></div>;
    case 'button-group':
      return <div className={styles.joinedButtons}><button type="button">Issue credit</button><button type="button" aria-label="More issue credit options"><ChevronDown /></button></div>;
    case 'checkbox':
      return <div className={styles.choiceList}>{['Email receipt', 'Include expiration date', 'Notify store team'].map((label, index) => <label key={label}><input type="checkbox" defaultChecked={index === 0} /><span aria-hidden="true"><Check /></span>{label}</label>)}</div>;
    case 'radio-group':
      return <fieldset className={styles.choiceList}><legend>Reward cadence</legend>{['After every purchase', 'At the end of the month', 'When a tier changes'].map((label, index) => <label key={label}><input name="cadence" type="radio" defaultChecked={index === 0} /><span />{label}</label>)}</fieldset>;
    case 'switch': return <SwitchDemo />;
    case 'slider': return <label className={styles.sliderDemo}><span><strong>Cash back</strong><output>10%</output></span><input type="range" min="0" max="20" defaultValue="10" /><small><span>0%</span><span>20%</span></small></label>;
    case 'toggle': return <ToggleDemo />;
    case 'toggle-group': return <ToggleDemo multiple />;
    case 'input': return <label className={styles.fieldDemo}><span>Program name</span><input placeholder="Angle Membership" /><small>Shown to members at checkout.</small></label>;
    case 'textarea': return <label className={styles.fieldDemo}><span>Member note</span><textarea defaultValue="Recognize this member when they visit the flagship store." /><small>88 characters remaining</small></label>;
    case 'label': return <div className={styles.labelSpecimen}><span>Program name <i>Required</i></span><p>Labels use sentence case and remain visible after entry.</p></div>;
    case 'field': return <label className={styles.fieldDemo}><span>Store credit amount <i>USD</i></span><input aria-invalid="true" defaultValue="128.40" /><small className={styles.fieldError}>Enter an amount below $100.00.</small></label>;
    case 'input-group': return <label className={styles.fieldDemo}><span>Store credit amount</span><span className={styles.inputGroup}><i>$</i><input aria-label="Store credit amount" defaultValue="128.40" /><button type="button">USD</button></span></label>;
    case 'native-select': return <label className={styles.fieldDemo}><span>Program status</span><select defaultValue="active"><option value="active">Active</option><option value="draft">Draft</option><option value="paused">Paused</option></select></label>;
    case 'select': return <SelectDemo />;
    case 'combobox': return <div className={styles.comboDemo}><label><span>Find a customer</span><span><Search /><input defaultValue="Avery" /></span></label><div><button type="button"><b>AM</b><span><strong>Avery Morgan</strong><small>avery@example.com</small></span><Check /></button><button type="button"><b>AH</b><span><strong>Avery Hughes</strong><small>ahughes@example.com</small></span></button></div></div>;
    case 'calendar': return <CalendarDemo />;
    case 'input-otp': return <label className={styles.otpDemo}><span>Enter the six-digit code</span><div>{['4', '8', '2', '', '', ''].map((value, index) => <input aria-label={`Digit ${index + 1}`} inputMode="numeric" maxLength={1} defaultValue={value} key={index} />)}</div><small>Paste or type the code from your email.</small></label>;
    case 'date-picker': return <div className={styles.datePicker}><label><span>Send reward</span><button type="button"><CalendarDays />August 7, 2026<ChevronDown /></button></label><CalendarDemo /></div>;
    case 'questionnaire': return <QuestionnaireDemo />;
    case 'accordion': return <div className={styles.disclosure}>{['How store credit works', 'Where members see rewards', 'When credit expires'].map((title, index) => <details open={index === 0} key={title}><summary>{title}<ChevronDown /></summary><p>Angle uses Shopify’s native store credit so value stays clear and usable online or in store.</p></details>)}</div>;
    case 'collapsible': return <details className={styles.singleDisclosure}><summary>Advanced conditions <ChevronDown /></summary><div><label><input type="checkbox" /> Exclude discounted orders</label><label><input type="checkbox" /> Require full-price purchase</label></div></details>;
    case 'dialog': return <DialogDemo />;
    case 'alert-dialog': return <DialogDemo destructive />;
    case 'drawer': return <div className={styles.drawerDemo}><div><i /><span>Filter members</span><button type="button" aria-label="Close filters"><X /></button></div><label><span>Member tier</span><select><option>All tiers</option></select></label><DemoButton>Show 284 members</DemoButton></div>;
    case 'sheet': return <div className={styles.sheetDemo}><div className={styles.sheetPage}><span>Member profile</span><strong>Avery Morgan</strong></div><aside><button className={styles.sheetClose} type="button" aria-label="Close sheet"><X /></button><span>Quick edit</span><h3>Member details</h3><label>Email<input defaultValue="avery@example.com" /></label><div className={styles.sheetActions}><DemoButton>Save changes</DemoButton></div></aside></div>;
    case 'popover': return <details className={styles.popoverDemo} open><summary>Add filter <Plus /></summary><div><span>Filter members by</span><button type="button">Tier <ChevronRight /></button><button type="button">Store credit <ChevronRight /></button><button type="button">Last purchase <ChevronRight /></button></div></details>;
    case 'tooltip': return <div className={styles.tooltipDemo}><span role="tooltip">Copy member ID</span><button type="button" aria-label="Copy member ID"><Copy /></button></div>;
    case 'dropdown-menu': return <details className={styles.menuDemo} open><summary aria-label="Member actions"><MoreHorizontal /></summary><div><button type="button">View member <span>↵</span></button><button type="button">Copy email <span>⌘C</span></button><hr /><button className={styles.dangerText} type="button">Remove access</button></div></details>;
    case 'hover-card': return <div className={styles.hoverCardDemo}><button type="button">Avery Morgan</button><article><div><b>AM</b><span><strong>Avery Morgan</strong><small>Epic member since 2024</small></span></div><p>$1,842 lifetime value · 12 orders</p></article></div>;
    case 'context-menu': return <div className={styles.contextDemo}><div>Right-click member row</div><menu><button type="button">Open profile</button><button type="button">Copy member ID</button><hr /><button className={styles.dangerText} type="button">Remove</button></menu></div>;
    case 'menubar': return <div className={styles.menubarDemo}><nav><button type="button">Program</button><button className={styles.menuSelected} type="button">Members</button><button type="button">View</button><button type="button">Help</button></nav><div><button type="button">Import members <span>⇧⌘I</span></button><button type="button">Export current view <span>⌘E</span></button><hr /><button type="button">Close view <span>⌘W</span></button></div></div>;
    case 'breadcrumb': return <nav className={styles.breadcrumbDemo} aria-label="Breadcrumb"><a href="#">Programs</a><ChevronRight /><a href="#">Membership</a><ChevronRight /><span aria-current="page">Benefits</span></nav>;
    case 'tabs': return <TabsDemo />;
    case 'pagination': return <nav className={styles.paginationDemo} aria-label="Pagination"><button type="button" aria-label="Previous page"><ChevronLeft /></button>{[1, 2, 3, 4].map((page) => <button className={page === 2 ? styles.pageActive : undefined} aria-current={page === 2 ? 'page' : undefined} type="button" key={page}>{page}</button>)}<span>…</span><button type="button">12</button><button type="button" aria-label="Next page"><ChevronRight /></button></nav>;
    case 'navigation-menu': return <div className={styles.navigationMenuDemo}><nav><button type="button">Platform <ChevronDown /></button><button type="button">Resources <ChevronDown /></button><button type="button">Customers</button></nav><div><a href="#"><strong>Experience Manager</strong><span>Build and operate loyalty programs.</span></a><a href="#"><strong>Angle Agentic Loyalty</strong><span>Explore the spatial loyalty system.</span></a></div></div>;
    case 'sidebar': return <div className={styles.sidebarDemo}><aside><div><PanelLeft /><strong>Workspace</strong></div>{['Overview', 'Members', 'Programs', 'Analytics'].map((item, index) => <button className={index === 1 ? styles.sideActive : undefined} type="button" key={item}><span>{item}</span>{item === 'Members' && <small>284</small>}</button>)}<footer><button type="button">Settings</button></footer></aside><main><span>Members</span><strong>284 people</strong></main></div>;
    case 'command': return <div className={styles.commandDemo}><label><Search /><input aria-label="Search commands" placeholder="Search pages and actions…" /><kbd>ESC</kbd></label><div><span>Suggested</span>{[['Open member', '↵'], ['Create program', 'C'], ['View analytics', 'A']].map(([command, key]) => <button type="button" key={command}><CommandIcon /><span>{command}</span><kbd>{key}</kbd></button>)}</div></div>;
    case 'card': return <article className={styles.cardDemo}><header><span>Available store credit</span><button type="button" aria-label="More store credit actions"><MoreHorizontal /></button></header><strong>$128.40</strong><p>Updated after the member’s latest return.</p><footer><DemoButton>View activity</DemoButton></footer></article>;
    case 'item': return <div className={styles.itemDemo}><b>AM</b><span><strong>Avery Morgan</strong><small>avery@example.com · Epic tier</small></span><i>Active</i><button type="button" aria-label="More actions"><MoreHorizontal /></button></div>;
    case 'separator': return <div className={styles.separatorDemo}><span>Program settings</span><hr /><span>Member experience</span><div><i />or<i /></div><span>Advanced</span></div>;
    case 'aspect-ratio': return <div className={styles.aspectDemo}><span>16:9</span><div><strong>Merchant story</strong><small>Media keeps its frame before loading.</small></div></div>;
    case 'direction': return <div className={styles.directionDemo}><div dir="ltr"><span>LTR</span><strong>Member activity</strong><button type="button">Next <ChevronRight /></button></div><div dir="rtl"><span>RTL</span><strong>نشاط العضو</strong><button type="button">التالي <ChevronLeft /></button></div></div>;
    case 'alert': return <div className={styles.alertDemo}><Info /><div><strong>Program saved as a draft</strong><p>Publish when the member experience is ready.</p></div><button type="button">Review</button></div>;
    case 'badge': return <div className={styles.badgeDemo}><span>Active</span><span className={styles.badgeRare}><i />Rare</span><span className={styles.badgeEpic}><i />Epic</span><span className={styles.badgeOutline}>Draft</span></div>;
    case 'progress': return <div className={styles.progressDemo}><div><span>Epic tier progress</span><strong>72%</strong></div><i><b /></i><p>$280 more in eligible spend</p></div>;
    case 'empty': return <div className={styles.emptyDemo}><Inbox /><strong>No members match these filters</strong><p>Clear a filter or search for a different customer.</p><DemoButton tone="secondary">Clear filters</DemoButton></div>;
    case 'skeleton': return <div className={styles.skeletonDemo} role="status" aria-label="Loading member"><i /><div><b /><b /><b /></div></div>;
    case 'spinner': return <div className={styles.spinnerDemo}><i /><span>Updating member value…</span></div>;
    case 'sonner': return <div className={styles.sonnerDemo}><div><Check /><span><strong>Program published</strong><small>Members can now see their benefits.</small></span><button type="button">View</button><button type="button" aria-label="Dismiss"><X /></button></div></div>;
    case 'table': return <div className={styles.tableWrap} tabIndex={0} aria-label="Recent member activity, horizontally scrollable"><table><caption>Recent member activity</caption><thead><tr><th>Member</th><th>Event</th><th>Value</th><th>Status</th></tr></thead><tbody><tr><td>Avery Morgan</td><td>Credit issued</td><td>$24.00</td><td><span>Complete</span></td></tr><tr><td>Jamie Chen</td><td>Tier changed</td><td>Epic</td><td><span>Complete</span></td></tr><tr><td>Robin Hale</td><td>Return</td><td>−$18.40</td><td><span>Review</span></td></tr></tbody></table></div>;
    case 'avatar': return <div className={styles.avatarDemo}><div><span>AM</span></div><div className={styles.avatarImage}>JC</div><div className={styles.avatarGroup}><i>AM</i><i>JC</i><i>RH</i><i>+8</i></div></div>;
    case 'kbd': return <div className={styles.kbdDemo}><span>Open command menu</span><kbd>⌘</kbd><b>+</b><kbd>K</kbd></div>;
    case 'typography': return <div className={styles.typeDemo}><span>Display / 48</span><h3>Recognize every customer.</h3><span>Body / 16</span><p>Build a loyalty experience that adapts to the member, their value, and the moment.</p><code>MEMBER_VALUE&nbsp;&nbsp;$284.20&nbsp;&nbsp;+18.4%</code></div>;
    case 'data-table': return <div className={styles.dataTableDemo}><header><label><Search /><input aria-label="Filter members" placeholder="Filter members…" /></label><button type="button">Tier <ChevronDown /></button><span>2 selected</span><DemoButton tone="secondary">Export</DemoButton></header><div className={styles.tableWrap} tabIndex={0} aria-label="Member table, horizontally scrollable"><table><thead><tr><th><DemoCheckbox label="Select all" /></th><th>Member</th><th>Tier</th><th>Value</th></tr></thead><tbody>{[['Avery Morgan', 'Epic', '$1,842'], ['Jamie Chen', 'Rare', '$980'], ['Robin Hale', 'Common', '$220']].map((row, index) => <tr key={row[0]}><td><DemoCheckbox label={`Select ${row[0]}`} defaultChecked={index < 2} /></td>{row.map((cell) => <td key={cell}>{cell}</td>)}</tr>)}</tbody></table></div><footer><span>1–3 of 284</span><div><button type="button" aria-label="Previous page"><ChevronLeft /></button><button type="button" aria-label="Next page"><ChevronRight /></button></div></footer></div>;
    case 'chart': return <StaticChart />;
    case 'carousel': return <CarouselDemo />;
    case 'scroll-area': return <div className={styles.scrollAreaDemo} tabIndex={0}>{Array.from({ length: 8 }, (_, index) => <div key={index}><span>{String(index + 1).padStart(2, '0')}</span><p><strong>{['Credit issued', 'Member joined', 'Tier advanced', 'Wallet added'][index % 4]}</strong><small>August {7 - Math.min(index, 6)}, 2026</small></p></div>)}</div>;
    case 'resizable': return <div className={styles.resizableDemo}><section><span>Members</span><strong>284</strong></section><button type="button" aria-label="Resize panels"><GripVertical /></button><section><span>Selected member</span><strong>Avery Morgan</strong><button type="button"><RotateCcw /> Reset</button></section></div>;
    case 'attachment': return <div className={styles.attachmentDemo}><FileText /><span><strong>member-import.csv</strong><small>42 KB · Upload complete</small><i><b /></i></span><button type="button" aria-label="Remove attachment"><X /></button></div>;
    case 'bubble': return <div className={styles.bubblesDemo}><div><span>Angle</span><p>Your member import is ready to review.</p><small>10:42 AM</small></div><div><span>You</span><p>Show me any rows that need attention.</p><small>10:43 AM · Sent</small></div></div>;
    case 'marker': return <div className={styles.markerDemo}><div><i /><span>3 new messages</span><i /></div><div><i /><span>Today · 10:42 AM</span><i /></div></div>;
    case 'message': return <article className={styles.messageDemo}><header><b>A</b><span><strong>Angle</strong><small>10:42 AM</small></span></header><p>I found three members whose imported email addresses need review before enrollment.</p><div><button type="button"><FileText /> Review import</button></div><footer><button type="button"><Copy /> Copy</button><button type="button"><Download /> Export</button></footer></article>;
    case 'message-scroller': return <div className={styles.messageScrollerDemo}><div><article><b>A</b><p>The import contains 284 members.</p></article><article><b>Y</b><p>Check the file for anything that needs attention.</p></article><div className={styles.newMessageMarker}><i />New messages<i /></div><article><b>A</b><p>Three email addresses need review.</p></article></div><button type="button">Jump to latest <ChevronDown /></button></div>;
    case 'form': return <div className={styles.replaceDemo}><span>Angle decision / Replace</span><h3>Compose with Field.</h3><p>Keep one visual and accessibility contract, then connect the form library required by the product.</p><div><label>Program name<input defaultValue="Angle Membership" /></label><label>Reward<select><option>10% store credit</option></select></label><DemoButton>Save program</DemoButton></div></div>;
    case 'toast': return <div className={styles.replaceDemo}><span>Angle decision / Replace</span><h3>Use Sonner.</h3><p>One notification system means one placement, timing model, accessibility behavior, and upgrade path.</p><div className={styles.miniToast}><Check /><span><strong>Changes saved</strong><small>Program settings are up to date.</small></span></div></div>;
    default: return <div className={styles.emptyDemo}><AlertTriangle /><strong>Preview in progress</strong><p>This visual standard is ready for its first Angle pass.</p></div>;
  }
}

export default function ComponentPreview({ slug, compact = false }: ComponentPreviewProps) {
  return (
    <div className={`${styles.previewStage} ${compact ? styles.previewStageCompact : ''}`} data-component={slug}>
      <div className={styles.previewGrid} aria-hidden="true" />
      <div className={styles.previewContent}><ComponentDemo slug={slug} /></div>
    </div>
  );
}