design-system/src/pages/Inventory/sections/LayoutSection.tsx

import styles from './LayoutSection.module.css'
import { Sidebar } from '../../../design-system/layout/Sidebar/Sidebar'
import type { SidebarApp } from '../../../design-system/layout/Sidebar/Sidebar'
import { TopBar } from '../../../design-system/layout/TopBar/TopBar'

// ── 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>
  )
}

// ── Sample data (hierarchical) ───────────────────────────────────────────────

const SAMPLE_APPS: SidebarApp[] = [
  {
    id: 'app1',
    name: 'cameleer-prod',
    health: 'live' as const,
    exchangeCount: 14320,
    routes: [
      { id: 'r1', name: 'order-ingest', exchangeCount: 5421 },
      { id: 'r2', name: 'payment-validate', exchangeCount: 3102 },
    ],
    agents: [
      { id: 'ag1', name: 'agent-prod-1', status: 'live' as const, tps: 42 },
      { id: 'ag2', name: 'agent-prod-2', status: 'live' as const, tps: 38 },
    ],
  },
  {
    id: 'app2',
    name: 'cameleer-staging',
    health: 'stale' as const,
    exchangeCount: 871,
    routes: [
      { id: 'r3', name: 'notify-customer', exchangeCount: 2201 },
    ],
    agents: [
      { id: 'ag3', name: 'agent-staging-1', status: 'stale' as const, tps: 5 },
    ],
  },
  {
    id: 'app3',
    name: 'cameleer-dev',
    health: 'dead' as const,
    exchangeCount: 42,
    routes: [],
    agents: [],
  },
]

// ── LayoutSection ─────────────────────────────────────────────────────────────

export function LayoutSection() {
  return (
    <section id="layout" className={styles.section}>
      <h2 className={styles.sectionTitle}>Layout</h2>

      {/* 1. AppShell */}
      <DemoCard
        id="appshell"
        title="AppShell"
        description="Full-page shell that composes Sidebar + TopBar + main content area. Cannot be nested — shown as a structural diagram."
      >
        <div className={styles.shellDiagram}>
          <div className={styles.shellDiagramTop}>
            TopBar — breadcrumb · search · filters · time range · env badge · user avatar
          </div>
          <div className={styles.shellDiagramBody}>
            <div className={styles.shellDiagramSide}>
              <span>Sidebar</span>
              <span style={{ fontWeight: 400, fontSize: 10, marginTop: 4 }}>Logo</span>
              <span style={{ fontWeight: 400, fontSize: 10 }}>Search</span>
              <span style={{ fontWeight: 400, fontSize: 10 }}>Navigation</span>
              <span style={{ fontWeight: 400, fontSize: 10 }}>Applications tree</span>
              <span style={{ fontWeight: 400, fontSize: 10 }}>Agents tree</span>
              <span style={{ fontWeight: 400, fontSize: 10 }}>Starred</span>
            </div>
            <div className={styles.shellDiagramMain}>
              &lt;children&gt; — page content rendered here
            </div>
          </div>
        </div>
      </DemoCard>

      {/* 2. Sidebar */}
      <DemoCard
        id="sidebar"
        title="Sidebar"
        description="Navigation sidebar with hierarchical app/route/agent trees, starring, search filter, and bottom links."
      >
        <div className={styles.sidebarPreview}>
          <Sidebar apps={SAMPLE_APPS} />
        </div>
      </DemoCard>

      {/* 3. TopBar */}
      <DemoCard
        id="topbar"
        title="TopBar"
        description="Top navigation bar with breadcrumb, search trigger, status filters, time range, environment badge, and user avatar."
      >
        <div className={styles.topbarPreview}>
          <TopBar
            breadcrumb={[
              { label: 'Dashboard', href: '#' },
              { label: 'Applications', href: '#' },
              { label: 'order-ingest' },
            ]}
            environment="production"

            user={{ name: 'Hendrik' }}
          />
        </div>
      </DemoCard>
    </section>
  )
}