import { Link } from 'react-router-dom'
import styles from './Inventory.module.css'
import { PrimitivesSection } from './sections/PrimitivesSection'
import { CompositesSection } from './sections/CompositesSection'
import { LayoutSection } from './sections/LayoutSection'

const NAV_SECTIONS = [
  {
    label: 'Primitives',
    href: '#primitives',
    components: [
      { label: 'Alert', href: '#alert' },
      { label: 'Avatar', href: '#avatar' },
      { label: 'Badge', href: '#badge' },
      { label: 'Button', href: '#button' },
      { label: 'ButtonGroup', href: '#buttongroup' },
      { label: 'Card', href: '#card' },
      { label: 'Checkbox', href: '#checkbox' },
      { label: 'CodeBlock', href: '#codeblock' },
      { label: 'Collapsible', href: '#collapsible' },
      { label: 'DateRangePicker', href: '#daterangepicker' },
      { label: 'DateTimePicker', href: '#datetimepicker' },
      { label: 'EmptyState', href: '#emptystate' },
      { label: 'FilterPill', href: '#filterpill' },
      { label: 'FormField', href: '#formfield' },
      { label: 'InfoCallout', href: '#infocallout' },
      { label: 'InlineEdit', href: '#inline-edit' },
      { label: 'Input', href: '#input' },
      { label: 'KeyboardHint', href: '#keyboardhint' },
      { label: 'Label', href: '#label' },
      { label: 'MonoText', href: '#monotext' },
      { label: 'Pagination', href: '#pagination' },
      { label: 'ProgressBar', href: '#progressbar' },
      { label: 'Radio', href: '#radio' },
      { label: 'SectionHeader', href: '#sectionheader' },
      { label: 'Select', href: '#select' },
      { label: 'Skeleton', href: '#skeleton' },
      { label: 'Sparkline', href: '#sparkline' },
      { label: 'Spinner', href: '#spinner' },
      { label: 'StatCard', href: '#statcard' },
      { label: 'StatusDot', href: '#statusdot' },
      { label: 'StatusText', href: '#statustext' },
      { label: 'Tag', href: '#tag' },
      { label: 'Textarea', href: '#textarea' },
      { label: 'Toggle', href: '#toggle' },
      { label: 'Tooltip', href: '#tooltip' },
    ],
  },
  {
    label: 'Composites',
    href: '#composites',
    components: [
      { label: 'Accordion', href: '#accordion' },
      { label: 'AlertDialog', href: '#alertdialog' },
      { label: 'AreaChart', href: '#areachart' },
      { label: 'AvatarGroup', href: '#avatargroup' },
      { label: 'BarChart', href: '#barchart' },
      { label: 'Breadcrumb', href: '#breadcrumb' },
      { label: 'CommandPalette', href: '#commandpalette' },
      { label: 'ConfirmDialog', href: '#confirm-dialog' },
      { label: 'DataTable', href: '#datatable' },
      { label: 'DetailPanel', href: '#detailpanel' },
      { label: 'Dropdown', href: '#dropdown' },
      { label: 'EntityList', href: '#entitylist' },
      { label: 'EventFeed', href: '#eventfeed' },
      { label: 'FilterBar', href: '#filterbar' },
      { label: 'GroupCard', href: '#groupcard' },
      { label: 'KpiStrip', href: '#kpistrip' },
      { label: 'LineChart', href: '#linechart' },
      { label: 'LoginDialog', href: '#logindialog' },
      { label: 'LoginForm', href: '#loginform' },
      { label: 'LogViewer', href: '#logviewer' },
      { label: 'MenuItem', href: '#menuitem' },
      { label: 'Modal', href: '#modal' },
      { label: 'MultiSelect', href: '#multi-select' },
      { label: 'Popover', href: '#popover' },
      { label: 'ProcessorTimeline', href: '#processortimeline' },
      { label: 'RouteFlow', href: '#routeflow' },
      { label: 'SegmentedTabs', href: '#segmented-tabs' },
      { label: 'ShortcutsBar', href: '#shortcutsbar' },
      { label: 'SplitPane', href: '#splitpane' },
      { label: 'Tabs', href: '#tabs' },
      { label: 'Toast', href: '#toast' },
      { label: 'TreeView', href: '#treeview' },
    ],
  },
  {
    label: 'Layout',
    href: '#layout',
    components: [
      { label: 'AppShell', href: '#appshell' },
      { label: 'Sidebar', href: '#sidebar' },
      { label: 'TopBar', href: '#topbar' },
    ],
  },
]

export function Inventory() {
  return (
    <div className={styles.page}>
      <header className={styles.header}>
        <h1 className={styles.headerTitle}>Component Inventory</h1>
        <Link to="/apps" className={styles.backLink}>← Back to app</Link>
      </header>

      <div className={styles.body}>
        <nav className={styles.nav} aria-label="Component categories">
          {NAV_SECTIONS.map((section) => (
            <div key={section.href} className={styles.navSection}>
              <span className={styles.navLabel}>{section.label}</span>
              {section.components.map((component) => (
                <a key={component.href} href={component.href} className={styles.navSubLink}>
                  {component.label}
                </a>
              ))}
            </div>
          ))}
        </nav>

        <main className={styles.content}>
          <PrimitivesSection />
          <CompositesSection />
          <LayoutSection />
        </main>
      </div>
    </div>
  )
}