import { useState } from 'react'
import { Hexagon, ArrowRight, Diamond, Eye, Pencil, RotateCcw, Trash2, ChevronDown } from 'lucide-react'
import styles from './CompositesSection.module.css'
import {
  Accordion,
  AlertDialog,
  AreaChart,
  AvatarGroup,
  BarChart,
  Breadcrumb,
  CommandPalette,
  ConfirmDialog,
  DataTable,
  DetailPanel,
  Dropdown,
  EntityList,
  EventFeed,
  FilterBar,
  GroupCard,
  KpiStrip,
  LineChart,
  LoginDialog,
  LoginForm,
  LogViewer,
  MenuItem,
  Modal,
  MultiSelect,
  Popover,
  ProcessorTimeline,
  RouteFlow,
  SegmentedTabs,
  ShortcutsBar,
  SplitPane,
  Tabs,
  ToastProvider,
  useToast,
  TreeView,
} from '../../../design-system/composites'
import type { SearchResult } from '../../../design-system/composites'
import { Avatar, Badge, Button } from '../../../design-system/primitives'

// ── DemoCard helper ──────────────────────────────────────────────────────────

interface DemoCardProps {
  id: string
  title: string
  description: string
  children: React.ReactNode
}

function DemoCard({ id, title, description, children }: DemoCardProps) {
  return (
    <div id={id} className={styles.componentCard}>
      <h3 className={styles.componentTitle}>{title}</h3>
      <p className={styles.componentDesc}>{description}</p>
      <div className={styles.demoArea}>{children}</div>
    </div>
  )
}

// ── Toast demo inner component (must be inside ToastProvider) ─────────────────

function ToastDemo() {
  const { toast } = useToast()
  return (
    <div className={styles.demoAreaRow}>
      <Button size="sm" variant="primary" onClick={() => toast({ title: 'Success!', description: 'Operation completed.', variant: 'success' })}>
        Success toast
      </Button>
      <Button size="sm" variant="secondary" onClick={() => toast({ title: 'Info', description: 'Something to note.', variant: 'info' })}>
        Info toast
      </Button>
      <Button size="sm" variant="danger" onClick={() => toast({ title: 'Error', description: 'Something went wrong.', variant: 'error' })}>
        Error toast
      </Button>
      <Button size="sm" variant="ghost" onClick={() => toast({ title: 'Warning', description: 'Proceed with caution.', variant: 'warning' })}>
        Warning toast
      </Button>
    </div>
  )
}

// ── Sample data ───────────────────────────────────────────────────────────────

const CHART_SERIES = [
  {
    label: 'Requests',
    data: [
      { x: 0, y: 120 }, { x: 1, y: 180 }, { x: 2, y: 150 },
      { x: 3, y: 210 }, { x: 4, y: 190 }, { x: 5, y: 240 },
    ],
  },
  {
    label: 'Errors',
    data: [
      { x: 0, y: 5 }, { x: 1, y: 12 }, { x: 2, y: 8 },
      { x: 3, y: 15 }, { x: 4, y: 7 }, { x: 5, y: 10 },
    ],
    color: 'var(--error)',
  },
]

const BAR_SERIES = [
  {
    label: 'GET',
    data: [
      { x: 'Mon', y: 80 }, { x: 'Tue', y: 95 }, { x: 'Wed', y: 110 },
      { x: 'Thu', y: 72 }, { x: 'Fri', y: 130 },
    ],
  },
  {
    label: 'POST',
    data: [
      { x: 'Mon', y: 40 }, { x: 'Tue', y: 55 }, { x: 'Wed', y: 60 },
      { x: 'Thu', y: 38 }, { x: 'Fri', y: 75 },
    ],
    color: 'var(--success)',
  },
]

const COMMAND_PALETTE_DATA: SearchResult[] = [
  { id: 'r1', category: 'route', title: 'order-ingest', meta: 'POST /orders/ingest' },
  { id: 'r2', category: 'route', title: 'payment-validate', meta: 'POST /payments/validate' },
  { id: 'e1', category: 'exchange', title: 'exch-001', meta: 'Started 2m ago' },
  { id: 'e2', category: 'exchange', title: 'exch-002', meta: 'Completed 5m ago' },
  { id: 'a1', category: 'agent', title: 'camel-agent-prod-1', meta: 'live · 42 tps' },
  { id: 'x1', category: 'exchange', title: 'exch-aabb1122', meta: 'route: order-ingest' },
]

interface TableRow {
  id: string
  name: string
  method: string
  status: string
  exchanges: number
}

const ROUTE_PREFIXES = [
  'order', 'payment', 'inventory', 'customer', 'shipment', 'user', 'cart',
  'refund', 'stock', 'email', 'webhook', 'cache', 'log', 'rate', 'health',
  'session', 'config', 'metrics', 'batch', 'audit', 'invoice', 'product',
  'catalog', 'search', 'report', 'export', 'import', 'sync', 'alert', 'ticket',
]
const ROUTE_SUFFIXES = [
  'ingest', 'validate', 'check', 'notify', 'archive', 'track', 'auth',
  'update', 'process', 'sync', 'dispatch', 'relay', 'invalidate', 'aggregate',
  'limit', 'refresh', 'reload', 'export', 'import', 'purge',
]
const METHODS = ['GET', 'POST', 'PUT', 'DELETE', 'PATCH']
const STATUSES = ['live', 'live', 'live', 'live', 'stale', 'stale', 'dead']

const TABLE_DATA: TableRow[] = Array.from({ length: 500 }, (_, i) => ({
  id: String(i + 1),
  name: `${ROUTE_PREFIXES[i % ROUTE_PREFIXES.length]}-${ROUTE_SUFFIXES[(i * 7) % ROUTE_SUFFIXES.length]}`,
  method: METHODS[i % METHODS.length],
  status: STATUSES[i % STATUSES.length],
  exchanges: ((i * 1337 + 421) % 9990) + 10,
}))

const NOW = new Date()
const minsAgo = (n: number) => new Date(NOW.getTime() - n * 60 * 1000)

const FEED_EVENTS = [
  { id: 'ev1', severity: 'success' as const, message: 'Route order-ingest started successfully', timestamp: minsAgo(1) },
  { id: 'ev2', severity: 'warning' as const, message: 'Agent camel-agent-prod-2 response time elevated', timestamp: minsAgo(3) },
  { id: 'ev3', severity: 'error' as const, message: 'Exchange exch-aabb1122 failed: timeout', timestamp: minsAgo(7) },
  { id: 'ev4', severity: 'running' as const, message: 'Processor payment-validate processing batch', timestamp: minsAgo(10) },
  { id: 'ev5', severity: 'success' as const, message: 'Deployment v3.2.1 completed', timestamp: minsAgo(15) },
]

const TREE_NODES = [
  {
    id: 'app1',
    label: 'cameleer-prod',
    icon: <Hexagon size={14} />,
    children: [
      {
        id: 'route1',
        label: 'order-ingest',
        icon: <ArrowRight size={14} />,
        children: [
          { id: 'proc1', label: 'ValidateOrder', icon: <Diamond size={12} />, meta: '12ms' },
          { id: 'proc2', label: 'EnrichPayload', icon: <Diamond size={12} />, meta: '8ms' },
          { id: 'proc3', label: 'RouteToQueue', icon: <Diamond size={12} />, meta: '3ms' },
        ],
      },
      {
        id: 'route2',
        label: 'payment-validate',
        icon: <ArrowRight size={14} />,
        children: [
          { id: 'proc4', label: 'TokenizeCard', icon: <Diamond size={12} />, meta: '22ms' },
          { id: 'proc5', label: 'AuthorizePayment', icon: <Diamond size={12} />, meta: '45ms' },
        ],
      },
    ],
  },
]

// ── Sample data for new composites ───────────────────────────────────────────

const KPI_ITEMS = [
  {
    label: 'Exchanges',
    value: '12,847',
    trend: { label: '\u2191 +8.2%', variant: 'success' as const },
    subtitle: 'Last 24h',
    sparkline: [40, 55, 48, 62, 70, 65, 78],
    borderColor: 'var(--amber)',
  },
  {
    label: 'Error Rate',
    value: '0.34%',
    trend: { label: '\u2191 +0.12pp', variant: 'error' as const },
    subtitle: 'Above threshold',
    sparkline: [10, 12, 11, 15, 18, 22, 19],
    borderColor: 'var(--error)',
  },
  {
    label: 'Avg Latency',
    value: '142ms',
    trend: { label: '\u2193 -12ms', variant: 'success' as const },
    subtitle: 'P95: 380ms',
    borderColor: 'var(--success)',
  },
  {
    label: 'Active Routes',
    value: '37',
    trend: { label: '\u00b10', variant: 'muted' as const },
    subtitle: '3 paused',
    borderColor: 'var(--running)',
  },
]

const ENTITY_LIST_ITEMS = [
  { id: '1', name: 'Alice Johnson', email: 'alice@example.com', role: 'Admin' },
  { id: '2', name: 'Bob Chen', email: 'bob@example.com', role: 'Editor' },
  { id: '3', name: 'Carol Smith', email: 'carol@example.com', role: 'Viewer' },
  { id: '4', name: 'David Park', email: 'david@example.com', role: 'Editor' },
  { id: '5', name: 'Eva Martinez', email: 'eva@example.com', role: 'Admin' },
]

const LOG_ENTRIES = [
  { timestamp: '2026-03-24T10:00:01Z', level: 'info' as const, message: 'Route timer-aggregator started successfully' },
  { timestamp: '2026-03-24T10:00:03Z', level: 'debug' as const, message: 'Polling endpoint https://api.internal/health \u2014 200 OK' },
  { timestamp: '2026-03-24T10:00:15Z', level: 'warn' as const, message: 'Retry queue depth at 847 \u2014 approaching threshold (1000)' },
  { timestamp: '2026-03-24T10:00:22Z', level: 'error' as const, message: 'Exchange failed: Connection refused to jdbc:postgresql://db-primary:5432/orders' },
  { timestamp: '2026-03-24T10:00:23Z', level: 'info' as const, message: 'Failover activated \u2014 routing to db-secondary' },
  { timestamp: '2026-03-24T10:00:30Z', level: 'info' as const, message: 'Exchange completed in 142ms via fallback route' },
  { timestamp: '2026-03-24T10:00:45Z', level: 'debug' as const, message: 'Metrics flush: 328 data points written to InfluxDB' },
  { timestamp: '2026-03-24T10:01:00Z', level: 'warn' as const, message: 'Memory usage at 78% \u2014 GC scheduled' },
]

// ── CompositesSection ─────────────────────────────────────────────────────────

export function CompositesSection() {
  // 1. Accordion
  const accordionItems = [
    { id: 'a1', title: 'What is Apache Camel?', content: 'Apache Camel is an open-source integration framework based on enterprise integration patterns.' },
    { id: 'a2', title: 'How do routes work?', content: 'Routes define the path a message takes through the system, from consumer to producer.', defaultOpen: true },
    { id: 'a3', title: 'What are processors?', content: 'Processors transform, filter, enrich, or route messages as they flow through a route.' },
  ]

  // 2. AlertDialog
  const [alertOpen, setAlertOpen] = useState(false)
  const [alertVariant, setAlertVariant] = useState<'danger' | 'warning' | 'info'>('danger')

  // 7. CommandPalette
  const [cmdOpen, setCmdOpen] = useState(false)

  // 8. DataTable
  const tableColumns = [
    { key: 'name', header: 'Route', sortable: true },
    { key: 'method', header: 'Method', sortable: true },
    { key: 'status', header: 'Status', sortable: true },
    { key: 'exchanges', header: 'Exchanges', sortable: true },
  ]

  // 9. DetailPanel
  const [panelOpen, setPanelOpen] = useState(false)

  // 12. FilterBar
  const filterOptions = [
    { label: 'Live', value: 'live', color: 'success' as const, count: 12 },
    { label: 'Stale', value: 'stale', count: 3 },
    { label: 'Dead', value: 'dead', color: 'error' as const, count: 1 },
  ]
  const [activeFilters, setActiveFilters] = useState([{ label: 'Live', value: 'live' }])

  // ConfirmDialog
  const [confirmOpen, setConfirmOpen] = useState(false)
  const [confirmDone, setConfirmDone] = useState(false)

  // MultiSelect
  const [multiValue, setMultiValue] = useState<string[]>(['admin'])

  // EntityList state
  const [selectedEntityId, setSelectedEntityId] = useState<string | undefined>('1')
  const [entitySearch, setEntitySearch] = useState('')

  // LoginDialog
  const [loginDialogOpen, setLoginDialogOpen] = useState(false)
  const [loginLoading, setLoginLoading] = useState(false)
  const [loginError, setLoginError] = useState<string | undefined>()

  // 15. Modal
  const [modalOpen, setModalOpen] = useState(false)

  // 19. Tabs
  const tabItems = [
    { label: 'Overview', value: 'overview', count: undefined },
    { label: 'Routes', value: 'routes', count: 14 },
    { label: 'Agents', value: 'agents', count: 6 },
  ]
  const [activeTab, setActiveTab] = useState('overview')
  const [segTab, setSegTab] = useState('account')

  // 21. TreeView
  const [selectedNode, setSelectedNode] = useState<string | undefined>('proc1')

  return (
    <ToastProvider>
      <section id="composites" className={styles.section}>
        <h2 className={styles.sectionTitle}>Composites</h2>

        {/* 1. Accordion */}
        <DemoCard
          id="accordion"
          title="Accordion"
          description="Collapsible panels with single or multiple open mode."
        >
          <div className={styles.demoAreaColumn} style={{ width: '100%' }}>
            <span className={styles.demoLabel}>Single mode (default)</span>
            <Accordion items={accordionItems} />
            <span className={styles.demoLabel}>Multiple mode</span>
            <Accordion
              items={[
                { id: 'm1', title: 'Section A', content: 'Content for section A.' },
                { id: 'm2', title: 'Section B', content: 'Content for section B.', defaultOpen: true },
                { id: 'm3', title: 'Section C', content: 'Content for section C.', defaultOpen: true },
              ]}
              multiple
            />
          </div>
        </DemoCard>

        {/* 2. AlertDialog */}
        <DemoCard
          id="alertdialog"
          title="AlertDialog"
          description="Modal confirmation dialog in danger, warning, and info variants."
        >
          <div className={styles.demoAreaRow}>
            <Button
              size="sm"
              variant="danger"
              onClick={() => { setAlertVariant('danger'); setAlertOpen(true) }}
            >
              Danger dialog
            </Button>
            <Button
              size="sm"
              variant="secondary"
              onClick={() => { setAlertVariant('warning'); setAlertOpen(true) }}
            >
              Warning dialog
            </Button>
            <Button
              size="sm"
              variant="ghost"
              onClick={() => { setAlertVariant('info'); setAlertOpen(true) }}
            >
              Info dialog
            </Button>
          </div>
          <AlertDialog
            open={alertOpen}
            onClose={() => setAlertOpen(false)}
            onConfirm={() => setAlertOpen(false)}
            title={alertVariant === 'danger' ? 'Delete route?' : alertVariant === 'warning' ? 'Proceed with caution?' : 'Confirm action'}
            description={
              alertVariant === 'danger'
                ? 'This will permanently delete the route and all its exchange history. This action cannot be undone.'
                : alertVariant === 'warning'
                ? 'This operation will restart all active processors. Running exchanges may be interrupted.'
                : 'This will update the route configuration and apply changes immediately.'
            }
            variant={alertVariant}
            confirmLabel={alertVariant === 'danger' ? 'Delete' : 'Confirm'}
          />
        </DemoCard>

        {/* 2b. ConfirmDialog */}
        <DemoCard id="confirm-dialog" title="ConfirmDialog" description="Type-to-confirm destructive action dialog. Built on Modal.">
          <Button size="sm" variant="danger" onClick={() => { setConfirmOpen(true); setConfirmDone(false) }}>
            Delete project
          </Button>
          {confirmDone && <span style={{ color: 'var(--success)', fontSize: 12, marginLeft: 8 }}>Deleted!</span>}
          <ConfirmDialog
            open={confirmOpen}
            onClose={() => setConfirmOpen(false)}
            onConfirm={() => { setConfirmOpen(false); setConfirmDone(true) }}
            message={'Delete project "my-project"? This cannot be undone.'}
            confirmText="my-project"
          />
        </DemoCard>

        {/* 3. AreaChart */}
        <DemoCard
          id="areachart"
          title="AreaChart"
          description="SVG area chart with hover tooltip, threshold line, and legend."
        >
          <AreaChart series={CHART_SERIES} xLabel="Time (minutes)" yLabel="Count" width={420} height={180} />
        </DemoCard>

        {/* 4. AvatarGroup */}
        <DemoCard
          id="avatargroup"
          title="AvatarGroup"
          description="Stacked avatar group showing up to max avatars with an overflow count."
        >
          <div className={styles.demoAreaColumn}>
            <span className={styles.demoLabel}>max=3, size=sm</span>
            <AvatarGroup names={['Alice Johnson', 'Bob Smith', 'Carol White', 'David Lee', 'Eve Brown']} max={3} size="sm" />
            <span className={styles.demoLabel}>max=4, size=md</span>
            <AvatarGroup names={['Alice Johnson', 'Bob Smith', 'Carol White', 'David Lee', 'Eve Brown']} max={4} size="md" />
            <span className={styles.demoLabel}>max=2, size=lg</span>
            <AvatarGroup names={['Alice Johnson', 'Bob Smith', 'Carol White', 'David Lee', 'Eve Brown']} max={2} size="lg" />
          </div>
        </DemoCard>

        {/* 5. BarChart */}
        <DemoCard
          id="barchart"
          title="BarChart"
          description="Bar chart with grouped and stacked modes, hover tooltips, and legend."
        >
          <div className={styles.demoAreaColumn}>
            <span className={styles.demoLabel}>Grouped</span>
            <BarChart series={BAR_SERIES} width={420} height={180} xLabel="Day" />
            <span className={styles.demoLabel}>Stacked</span>
            <BarChart series={BAR_SERIES} stacked width={420} height={180} xLabel="Day" />
          </div>
        </DemoCard>

        {/* 6. Breadcrumb */}
        <DemoCard
          id="breadcrumb"
          title="Breadcrumb"
          description="Slash-separated navigation breadcrumb with linked and plain segments."
        >
          <Breadcrumb
            items={[
              { label: 'Dashboard', href: '#' },
              { label: 'Applications', href: '#' },
              { label: 'order-ingest' },
            ]}
          />
        </DemoCard>

        {/* 7. CommandPalette */}
        <DemoCard
          id="commandpalette"
          title="CommandPalette"
          description="Full-screen search palette with category tabs, keyboard navigation, and highlight."
        >
          <Button size="sm" variant="secondary" onClick={() => setCmdOpen(true)}>
            Open CommandPalette
          </Button>
          <CommandPalette
            open={cmdOpen}
            onClose={() => setCmdOpen(false)}
            onSelect={() => setCmdOpen(false)}
            data={COMMAND_PALETTE_DATA}
          />
        </DemoCard>

        {/* 8. DataTable */}
        <DemoCard
          id="datatable"
          title="DataTable"
          description="Sortable, paginated table with row click, accent rows, and page size selector."
        >
          <div style={{ width: '100%', height: 500, display: 'flex', flexDirection: 'column' }}>
            <DataTable
              columns={tableColumns}
              data={TABLE_DATA}
              sortable
              pageSize={25}
              fillHeight
            />
          </div>
        </DemoCard>

        {/* 9. DetailPanel */}
        <DemoCard
          id="detailpanel"
          title="DetailPanel"
          description="Slide-in side panel with tabbed content and close button."
        >
          <Button size="sm" variant="secondary" onClick={() => setPanelOpen(true)}>
            Open DetailPanel
          </Button>
          <DetailPanel
            open={panelOpen}
            onClose={() => setPanelOpen(false)}
            title="Route: order-ingest"
            tabs={[
              { label: 'Overview', value: 'overview', content: <div style={{ padding: '12px 0', fontSize: 13 }}>Route processes ~1,243 exchanges/day with avg latency 42ms.</div> },
              { label: 'Processors', value: 'processors', content: <div style={{ padding: '12px 0', fontSize: 13 }}>ValidateOrder → EnrichPayload → RouteToQueue</div> },
              { label: 'Errors', value: 'errors', content: <div style={{ padding: '12px 0', fontSize: 13 }}>3 errors in last 24h. Last: timeout at EnrichPayload.</div> },
            ]}
          />
        </DemoCard>

        {/* 10. Dropdown */}
        <DemoCard
          id="dropdown"
          title="Dropdown"
          description="Click-triggered dropdown menu with icons, dividers, and disabled items."
        >
          <Dropdown
            trigger={<Button size="sm" variant="secondary">Actions <ChevronDown size={12} /></Button>}
            items={[
              { label: 'View details', icon: <Eye size={14} />, onClick: () => undefined },
              { label: 'Edit route', icon: <Pencil size={14} />, onClick: () => undefined },
              { divider: true, label: '' },
              { label: 'Restart', icon: <RotateCcw size={14} />, onClick: () => undefined },
              { label: 'Delete', icon: <Trash2 size={14} />, onClick: () => undefined, disabled: true },
            ]}
          />
        </DemoCard>

        {/* 11. EventFeed */}
        <DemoCard
          id="eventfeed"
          title="EventFeed"
          description="Scrollable live event log with severity filters and auto-scroll."
        >
          <div style={{ width: '100%' }}>
            <EventFeed events={FEED_EVENTS} maxItems={10} />
          </div>
        </DemoCard>

        {/* EntityList */}
        <DemoCard
          id="entitylist"
          title="EntityList"
          description="Searchable, selectable entity list with add button — designed to pair with SplitPane."
        >
          <div style={{ width: '100%', height: 260 }}>
            <EntityList
              items={ENTITY_LIST_ITEMS.filter(u =>
                u.name.toLowerCase().includes(entitySearch.toLowerCase())
              )}
              renderItem={(item, isSelected) => (
                <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                  <Avatar name={item.name} size="sm" />
                  <div>
                    <div style={{ fontSize: 13, fontWeight: isSelected ? 600 : 400 }}>{item.name}</div>
                    <div style={{ fontSize: 11, color: 'var(--text-muted)' }}>{item.email}</div>
                  </div>
                  <span style={{ marginLeft: 'auto' }}><Badge label={item.role} /></span>
                </div>
              )}
              getItemId={(item) => item.id}
              selectedId={selectedEntityId}
              onSelect={setSelectedEntityId}
              searchPlaceholder="Search users..."
              onSearch={setEntitySearch}
              addLabel="+ Add user"
              onAdd={() => {}}
            />
          </div>
        </DemoCard>

        {/* 11b. GroupCard */}
        <DemoCard
          id="groupcard"
          title="GroupCard"
          description="Generic card with header, meta row, children, and optional footer. Used for grouping instances by application."
        >
          <div style={{ maxWidth: 500 }}>
            <GroupCard
              title="order-service"
              accent="success"
              headerRight={<span style={{ fontSize: 11, fontFamily: 'var(--font-mono)', color: 'var(--text-muted)', background: 'var(--bg-inset)', padding: '2px 8px', borderRadius: 10 }}>3 instances</span>}
              meta={<div style={{ display: 'flex', gap: 16, fontSize: 11, color: 'var(--text-muted)' }}><span><strong>34.4</strong> msg/s</span><span><strong>9</strong>/9 routes</span></div>}
              footer={undefined}
            >
              <div style={{ padding: '8px 16px', fontSize: 12, color: 'var(--text-secondary)' }}>Instance rows go here</div>
            </GroupCard>
          </div>
        </DemoCard>

        {/* KpiStrip */}
        <DemoCard
          id="kpistrip"
          title="KpiStrip"
          description="Horizontal row of KPI cards with coloured left border, trend indicator, subtitle, and optional sparkline."
        >
          <div style={{ width: '100%' }}>
            <KpiStrip items={KPI_ITEMS} />
          </div>
        </DemoCard>

        {/* 12. FilterBar */}
        <DemoCard
          id="filterbar"
          title="FilterBar"
          description="Search input combined with filter pills and active filter tag chips."
        >
          <div style={{ width: '100%' }}>
            <FilterBar
              filters={filterOptions}
              activeFilters={activeFilters}
              onFilterChange={setActiveFilters}
              searchPlaceholder="Search routes..."
            />
          </div>
        </DemoCard>

        {/* 13. LineChart */}
        <DemoCard
          id="linechart"
          title="LineChart"
          description="Multi-series SVG line chart with hover crosshair, tooltip, and legend."
        >
          <LineChart series={CHART_SERIES} xLabel="Time (minutes)" yLabel="Count" width={420} height={180} />
        </DemoCard>

        {/* LoginDialog */}
        <DemoCard
          id="logindialog"
          title="LoginDialog"
          description="Modal login dialog wrapping LoginForm. Supports social providers, credentials, and error states."
        >
          <div className={styles.demoAreaRow}>
            <Button size="sm" variant="primary" onClick={() => setLoginDialogOpen(true)}>
              Open LoginDialog
            </Button>
            <Button size="sm" variant="secondary" onClick={() => { setLoginError('Invalid email or password.'); setLoginDialogOpen(true) }}>
              With error
            </Button>
          </div>
          <LoginDialog
            open={loginDialogOpen}
            onClose={() => { setLoginDialogOpen(false); setLoginError(undefined); setLoginLoading(false) }}
            logo={<div style={{ width: 40, height: 40, borderRadius: 'var(--radius-md)', background: 'var(--amber)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'white', fontWeight: 700, fontSize: 16 }}>C</div>}
            title="Sign in to Cameleer"
            socialProviders={[
              { label: 'Continue with Google', onClick: () => {} },
              { label: 'Continue with GitHub', onClick: () => {} },
            ]}
            onSubmit={() => {
              setLoginLoading(true)
              setTimeout(() => { setLoginLoading(false); setLoginDialogOpen(false) }, 1500)
            }}
            onForgotPassword={() => {}}
            onSignUp={() => {}}
            error={loginError}
            loading={loginLoading}
          />
        </DemoCard>

        {/* LoginForm */}
        <DemoCard
          id="loginform"
          title="LoginForm"
          description="Standalone login form with configurable social providers, validation, and loading state."
        >
          <div style={{ maxWidth: 360 }}>
            <LoginForm
              title="Sign in"
              socialProviders={[
                { label: 'Continue with Google', onClick: () => {} },
              ]}
              onSubmit={() => {}}
              onForgotPassword={() => {}}
              onSignUp={() => {}}
            />
          </div>
        </DemoCard>

        {/* LogViewer */}
        <DemoCard
          id="logviewer"
          title="LogViewer"
          description="Scrollable log output with timestamped, severity-coloured monospace entries and auto-scroll."
        >
          <div style={{ width: '100%' }}>
            <LogViewer entries={LOG_ENTRIES} maxHeight={240} />
          </div>
        </DemoCard>

        {/* 14. MenuItem */}
        <DemoCard
          id="menuitem"
          title="MenuItem"
          description="Navigation menu row with health dot, meta text, count badge, and active state."
        >
          <div className={styles.demoAreaColumn} style={{ minWidth: 200 }}>
            <MenuItem label="order-ingest" meta="POST route" count={1243} health="live" />
            <MenuItem label="payment-validate" meta="POST route" count={987} health="live" active />
            <MenuItem label="inventory-check" meta="GET route" count={432} health="stale" />
            <MenuItem label="archive-order" meta="PUT route" count={54} health="dead" indent={1} />
          </div>
        </DemoCard>

        {/* 15. Modal */}
        <DemoCard
          id="modal"
          title="Modal"
          description="Portal-rendered modal dialog in sm, md, and lg sizes with backdrop dismiss."
        >
          <Button size="sm" variant="secondary" onClick={() => setModalOpen(true)}>
            Open Modal
          </Button>
          <Modal
            open={modalOpen}
            onClose={() => setModalOpen(false)}
            title="Configure Route"
            size="md"
          >
            <div style={{ fontSize: 13, lineHeight: 1.6 }}>
              <p style={{ margin: '0 0 12px' }}>Adjust the route settings below. Changes will take effect immediately after saving.</p>
              <p style={{ margin: 0, color: 'var(--text-muted)' }}>Route: order-ingest · Processor chain: 3 steps · Avg latency: 42ms</p>
            </div>
          </Modal>
        </DemoCard>

        {/* 15b. MultiSelect */}
        <DemoCard id="multi-select" title="MultiSelect" description="Dropdown with searchable checkbox list and Apply action.">
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8, maxWidth: 260 }}>
            <MultiSelect
              options={[
                { value: 'admin', label: 'ADMIN' },
                { value: 'editor', label: 'EDITOR' },
                { value: 'viewer', label: 'VIEWER' },
                { value: 'operator', label: 'OPERATOR' },
                { value: 'auditor', label: 'AUDITOR' },
              ]}
              value={multiValue}
              onChange={setMultiValue}
              placeholder="Add roles..."
            />
            <span style={{ fontSize: 11, color: 'var(--text-muted)' }}>
              Selected: {multiValue.join(', ') || 'none'}
            </span>
          </div>
        </DemoCard>

        {/* 16. Popover */}
        <DemoCard
          id="popover"
          title="Popover"
          description="Portal-positioned popover in all four positions with arrow indicator."
        >
          <div className={styles.demoAreaRow} style={{ paddingTop: 8, paddingBottom: 8 }}>
            <Popover
              position="top"
              trigger={<Button size="sm" variant="secondary">Top</Button>}
              content={<div style={{ padding: '8px 12px', fontSize: 12 }}>Popover on top</div>}
            />
            <Popover
              position="bottom"
              trigger={<Button size="sm" variant="secondary">Bottom</Button>}
              content={<div style={{ padding: '8px 12px', fontSize: 12 }}>Popover on bottom</div>}
            />
            <Popover
              position="left"
              trigger={<Button size="sm" variant="secondary">Left</Button>}
              content={<div style={{ padding: '8px 12px', fontSize: 12 }}>Popover on left</div>}
            />
            <Popover
              position="right"
              trigger={<Button size="sm" variant="secondary">Right</Button>}
              content={<div style={{ padding: '8px 12px', fontSize: 12 }}>Popover on right</div>}
            />
          </div>
        </DemoCard>

        {/* 17. ProcessorTimeline */}
        <DemoCard
          id="processortimeline"
          title="ProcessorTimeline"
          description="Horizontal Gantt-style timeline with selectable rows and optional action menus via actions or getActions prop."
        >
          <div style={{ width: '100%' }}>
            <ProcessorTimeline
              totalMs={120}
              processors={[
                { name: 'ValidateOrder', type: 'validator', durationMs: 12, status: 'ok', startMs: 0 },
                { name: 'EnrichPayload', type: 'enricher', durationMs: 35, status: 'slow', startMs: 12 },
                { name: 'RouteToQueue', type: 'router', durationMs: 8, status: 'ok', startMs: 47 },
                { name: 'AuditLog', type: 'logger', durationMs: 65, status: 'fail', startMs: 55 },
              ]}
              getActions={(proc) => [
                { label: 'Change Log Level', onClick: () => {} },
                { label: 'View Configuration', onClick: () => {} },
                ...(proc.status === 'fail' ? [{ label: 'View Stack Trace', onClick: () => {} }] : []),
              ]}
            />
          </div>
        </DemoCard>

        {/* 17b. RouteFlow */}
        <DemoCard
          id="routeflow"
          title="RouteFlow"
          description="Vertical processor node diagram with status coloring, connectors, and optional action menus."
        >
          <div style={{ width: '100%', maxWidth: 360 }}>
            <RouteFlow
              nodes={[
                { name: 'jms:orders', type: 'from', durationMs: 4, status: 'ok' },
                { name: 'OrderValidator', type: 'process', durationMs: 8, status: 'ok' },
                { name: 'sql:INSERT INTO orders', type: 'to', durationMs: 24, status: 'ok' },
                { name: 'header.priority == HIGH', type: 'choice', durationMs: 1, status: 'ok' },
                { name: 'http:payment-api/charge', type: 'to', durationMs: 187, status: 'slow', isBottleneck: true },
                { name: 'ResponseMapper', type: 'process', durationMs: 3, status: 'ok' },
                { name: 'kafka:order-completed', type: 'to', durationMs: 11, status: 'ok' },
                { name: 'dead-letter:failed-orders', type: 'error-handler', durationMs: 14, status: 'fail' },
              ]}
              actions={[
                { label: 'Change Log Level', onClick: () => {} },
                { label: 'Enable Tracing', onClick: () => {} },
              ]}
            />
          </div>
        </DemoCard>

        {/* 17c. RouteFlow (Multi-Flow) */}
        <DemoCard
          id="routeflow-multi"
          title="RouteFlow (Multi-Flow)"
          description="Multiple flow segments with labels, showing a main route alongside an exception handler."
        >
          <div style={{ width: '100%', maxWidth: 360 }}>
            <RouteFlow
              flows={[
                {
                  label: 'Main Route',
                  nodes: [
                    { name: 'jms:orders', type: 'from', durationMs: 4, status: 'ok' },
                    { name: 'OrderValidator', type: 'process', durationMs: 8, status: 'ok' },
                    { name: 'http:payment-api/charge', type: 'to', durationMs: 187, status: 'slow' },
                    { name: 'kafka:order-completed', type: 'to', durationMs: 11, status: 'ok' },
                  ],
                },
                {
                  label: 'onException(IOException)',
                  variant: 'error',
                  nodes: [
                    { name: 'log:error-logger', type: 'process', durationMs: 2, status: 'ok' },
                    { name: 'dead-letter:failed-orders', type: 'to', durationMs: 14, status: 'fail' },
                  ],
                },
              ]}
            />
          </div>
        </DemoCard>

        {/* 18. ShortcutsBar */}
        <DemoCard
          id="shortcutsbar"
          title="ShortcutsBar"
          description="Row of keyboard shortcut hints, each pairing a key badge with a label."
        >
          <ShortcutsBar
            shortcuts={[
              { keys: 'Ctrl+K', label: 'Search' },
              { keys: '↑↓', label: 'Navigate' },
              { keys: 'Enter', label: 'Open' },
              { keys: 'Esc', label: 'Close' },
              { keys: '?', label: 'Help' },
            ]}
          />
        </DemoCard>

        {/* SplitPane */}
        <DemoCard
          id="splitpane"
          title="SplitPane"
          description="Two-column master/detail layout with configurable ratio and empty-state placeholder."
        >
          <div style={{ width: '100%', height: 200 }}>
            <SplitPane
              list={
                <div style={{ padding: 16, fontSize: 13 }}>
                  <div style={{ fontWeight: 600, marginBottom: 8 }}>Items</div>
                  <div>Item A</div>
                  <div>Item B</div>
                  <div>Item C</div>
                </div>
              }
              detail={
                <div style={{ padding: 16, fontSize: 13 }}>
                  <div style={{ fontWeight: 600, marginBottom: 8 }}>Detail View</div>
                  <div>Select an item on the left to see its details here.</div>
                </div>
              }
              ratio="1:2"
            />
          </div>
        </DemoCard>

        {/* 19. Tabs */}
        <DemoCard
          id="tabs"
          title="Tabs"
          description="Tab bar with optional count badges and active indicator."
        >
          <div className={styles.demoAreaColumn} style={{ width: '100%' }}>
            <Tabs tabs={tabItems} active={activeTab} onChange={setActiveTab} />
            <div style={{ fontSize: 13, color: 'var(--text-muted)' }}>
              Active tab: <strong>{activeTab}</strong>
            </div>
          </div>
        </DemoCard>

        {/* 19b. SegmentedTabs */}
        <DemoCard
          id="segmented-tabs"
          title="SegmentedTabs"
          description="Pill-style segmented tab bar with elevated active state. Same API as Tabs."
        >
          <div className={styles.demoAreaColumn} style={{ width: '100%' }}>
            <SegmentedTabs
              tabs={[
                { label: 'Account', value: 'account' },
                { label: 'Password', value: 'password' },
                { label: 'Notifications', value: 'notifications', count: 3 },
              ]}
              active={segTab}
              onChange={setSegTab}
            />
            <div style={{ fontSize: 13, color: 'var(--text-muted)' }}>
              Active tab: <strong>{segTab}</strong>
            </div>
          </div>
        </DemoCard>

        {/* 20. Toast */}
        <DemoCard
          id="toast"
          title="Toast"
          description="Stacked portal toast notifications in four variants with auto-dismiss and manual close."
        >
          <ToastDemo />
        </DemoCard>

        {/* 21. TreeView */}
        <DemoCard
          id="treeview"
          title="TreeView"
          description="Keyboard-navigable tree showing App → Routes → Processors hierarchy."
        >
          <TreeView
            nodes={TREE_NODES}
            selectedId={selectedNode}
            onSelect={setSelectedNode}
          />
        </DemoCard>
      </section>
    </ToastProvider>
  )
}
