// Top-level page — wires terminal + screens into a DesignCanvas.

const W = 760;

function Card({ children, variant = 'color', title = 'bash — devforgeai install', padTop = false, wrap = false }) {
  return (
    <Term variant={variant} title={title} padTop={padTop} wrap={wrap}>
      {children}
    </Term>
  );
}

function App() {
  return (
    <DesignCanvas storageKey="devforgeai-installer-design" background="#0f0f12">
      {/* ───── Worked Example ───── */}
      <DCSection
        id="worked-example"
        title="Worked Example — Welcome / Banner"
        subtitle="Section 6 of design.md · the canonical screen all others extend"
      >
        <DCArtboard id="welcome-color" label="A · Default (color + Unicode)" width={W} height={420}>
          <Card variant="color"><WelcomeScreen /></Card>
        </DCArtboard>
        <DCArtboard id="welcome-mono" label="B · NO_COLOR=1" width={W} height={420}>
          <Card variant="mono" title="bash — NO_COLOR=1 devforgeai install"><WelcomeScreen /></Card>
        </DCArtboard>
        <DCArtboard id="welcome-ascii" label="C · TERM=dumb (ASCII fallback)" width={W} height={420}>
          <Card variant="ascii" title="bash — TERM=dumb devforgeai install"><WelcomeScreen /></Card>
        </DCArtboard>
      </DCSection>

      {/* ───── Component Inventory ───── */}
      <DCSection
        id="inventory"
        title="Component Inventory"
        subtitle="Every reusable fragment · one library primitive per component"
      >
        <DCArtboard id="inv-messages" label="Messages — success / warning / error / info / skipped" width={W} height={500}>
          <Card><InventoryMessages /></Card>
        </DCArtboard>
        <DCArtboard id="inv-prompts" label="Prompts — input · confirm · list · checkbox" width={W} height={480}>
          <Card><InventoryPrompts /></Card>
        </DCArtboard>
        <DCArtboard id="inv-indicators" label="Indicators — spinner · progress · panel · drift" width={W} height={540}>
          <Card><InventoryIndicators /></Card>
        </DCArtboard>
      </DCSection>

      {/* ───── Interaction Patterns ───── */}
      <DCSection
        id="interactions"
        title="Interaction Patterns"
        subtitle="Sequential flow · validation retry · SIGINT arm · destructive confirm"
      >
        <DCArtboard id="seq-flow" label="A · Sequential prompts (history collapses above)" width={W} height={480}>
          <Card><SequentialFlow /></Card>
        </DCArtboard>
        <DCArtboard id="validation" label="B · Validation retry — 3-failure threshold" width={W} height={380}>
          <Card><ValidationRetry /></Card>
        </DCArtboard>
        <DCArtboard id="sigint" label="C · SIGINT — two-stage cancel" width={W} height={380}>
          <Card><SigintArm /></Card>
        </DCArtboard>
        <DCArtboard id="confirm" label="D · Destructive confirm — channel downgrade" width={W} height={480}>
          <Card><ConfirmGate /></Card>
        </DCArtboard>
      </DCSection>

      {/* ───── State Patterns ───── */}
      <DCSection
        id="states"
        title="State Patterns"
        subtitle="Pending → in-progress → (success | warning | error) — fixed treatment"
      >
        <DCArtboard id="state-table" label="State table — visual treatment per state" width={W} height={440}>
          <Card><StatePatterns /></Card>
        </DCArtboard>
      </DCSection>

      {/* ───── Prompt 2 — Happy-Path Screens (canonical mockups) ───── */}
      <DCSection
        id="happy-path"
        title="Prompt 2 · Happy-Path Screens"
        subtitle="Canonical mockups consumed verbatim by docs/installer/design-core/screens.md"
      >
        <DCArtboard id="hp-3" label="Step 3/12 · Detection — list with 3 choices" width={W} height={500}>
          <Card><Step3DetectionList /></Card>
        </DCArtboard>
        <DCArtboard id="hp-4" label="Step 4/12 · Channel — stable / beta / edge" width={W} height={340}>
          <Card><Step4ChannelSelect /></Card>
        </DCArtboard>
        <DCArtboard id="hp-5" label="Step 5/12 · Components — all 11 (6 required pinned)" width={W} height={460}>
          <Card><Step5ComponentsFull /></Card>
        </DCArtboard>
        <DCArtboard id="hp-8" label="Step 8/12 · Pre-flight summary — confirm gate" width={W} height={580}>
          <Card><Step8Preflight /></Card>
        </DCArtboard>
        <DCArtboard id="hp-9a" label="Step 9a/12 · Phase header transition" width={W} height={340}>
          <Card><Step9aPhaseHeader /></Card>
        </DCArtboard>
        <DCArtboard id="hp-10" label="Step 10/12 · Post-install verify" width={W} height={380}>
          <Card><Step10Verify /></Card>
        </DCArtboard>
        <DCArtboard id="hp-12" label="Step 12/12 · Next steps panel" width={W} height={480}>
          <Card><Step12NextSteps /></Card>
        </DCArtboard>
      </DCSection>

      {/* ───── Prompt 3 — Recovery / Error / Edge Screens ───── */}
      <DCSection
        id="recovery"
        title="Prompt 3 · Recovery, Error & Edge-Case Screens"
        subtitle="7 representative screens spanning Categories A / B / C / D from docs/installer/design-recovery/screens.md"
      >
        <DCArtboard id="rec-a1" label="A1 · Python missing — list-driven recovery" width={W} height={380}>
          <Card><RecoveryA1PythonMissing /></Card>
        </DCArtboard>
        <DCArtboard id="rec-a9" label="A9 · Partial install — resume offer" width={W} height={500}>
          <Card><RecoveryA9ResumeOffer /></Card>
        </DCArtboard>
        <DCArtboard id="rec-b3" label="B3 · Settings.json merge conflict" width={W} height={580}>
          <Card><RecoveryB3SettingsMergeConflict /></Card>
        </DCArtboard>
        <DCArtboard id="rec-c4" label="C4 · Channel downgrade — destructive y/N gate" width={W} height={500}>
          <Card><RecoveryC4ChannelDowngrade /></Card>
        </DCArtboard>
        <DCArtboard id="rec-c5" label="C5 · Edge channel — UNSTABLE headline" width={W} height={420}>
          <Card><RecoveryC5EdgeUnstable /></Card>
        </DCArtboard>
        <DCArtboard id="rec-d2" label="D2 · Verify drift — output-only, exit 6" width={W} height={420}>
          <Card><RecoveryD2VerifyDrift /></Card>
        </DCArtboard>
        <DCArtboard id="rec-d5" label="D5 · Rollback failed — manual-recovery panel" width={W} height={540}>
          <Card><RecoveryD5RollbackFailed /></Card>
        </DCArtboard>
      </DCSection>

      {/* ───── Prompt 4 — Status / Check-updates / Help Layouts ───── */}
      <DCSection
        id="status-help"
        title="Prompt 4 · Status, Check-Updates & Help Layouts"
        subtitle="5 representative layouts from docs/installer/design-status-help/screens.md"
      >
        <DCArtboard id="sh-s2" label="S2 · devforgeai install --help (full flag surface)" width={W} height={780}>
          <Card title="bash — devforgeai install --help"><StatusS2InstallHelp /></Card>
        </DCArtboard>
        <DCArtboard id="sh-s7" label="S7 · devforgeai status (default snapshot)" width={W} height={500}>
          <Card title="bash — devforgeai status"><StatusS7Default /></Card>
        </DCArtboard>
        <DCArtboard id="sh-s8" label="S8 · status --check-updates (update available)" width={W} height={460}>
          <Card title="bash — devforgeai status --check-updates"><StatusS8UpdateAvailable /></Card>
        </DCArtboard>
        <DCArtboard id="sh-s10" label="S10 · status --json (color by token)" width={W} height={640}>
          <Card title="bash — devforgeai status --json"><StatusS10JsonOutput /></Card>
        </DCArtboard>
        <DCArtboard id="sh-s13" label="S13 · uninstall --purge (destructive confirm)" width={W} height={460}>
          <Card title="bash — devforgeai uninstall --purge"><StatusS13UninstallPurge /></Card>
        </DCArtboard>
      </DCSection>

      {/* ───── Prompt 5 — Silent-Mode NDJSON Stream ───── */}
      <DCSection
        id="ndjson"
        title="Prompt 5 · Silent-Mode NDJSON Event Stream"
        subtitle="What CI/CD sees on stdout — line-delimited events from docs/installer/design-silent-events/sequences.md"
      >
        <DCArtboard id="ndjson-happy" label="Canonical fresh install · silent --output=ndjson" width={1100} height={520}>
          <Card wrap title="bash — devforgeai install . --silent"><PromptS5NdjsonStream /></Card>
        </DCArtboard>
        <DCArtboard id="ndjson-fail" label="A1 Python missing · fail + rollback + exit 4" width={1100} height={360}>
          <Card wrap title="bash — devforgeai install . --silent (failure)"><PromptS5NdjsonError /></Card>
        </DCArtboard>
      </DCSection>

      {/* ───── Wizard Storyboard ───── */}
      <DCSection
        id="storyboard"
        title="Wizard Storyboard — 9 Phases"
        subtitle="One artboard per footer step · how every prompt extends the Welcome floor"
      >
        <DCArtboard id="p1" label="1/9 · Welcome" width={W} height={420}>
          <Card><Phase1Welcome /></Card>
        </DCArtboard>
        <DCArtboard id="p2" label="2/9 · Directory" width={W} height={300}>
          <Card><Phase2Directory /></Card>
        </DCArtboard>
        <DCArtboard id="p3" label="3/9 · Detection" width={W} height={460}>
          <Card><Phase3Detection /></Card>
        </DCArtboard>
        <DCArtboard id="p4" label="4/9 · Component Selection" width={W} height={460}>
          <Card><Phase4Components /></Card>
        </DCArtboard>
        <DCArtboard id="p5" label="5/9 · Python Environment" width={W} height={420}>
          <Card><Phase5Python /></Card>
        </DCArtboard>
        <DCArtboard id="p6" label="6/9 · File Copy" width={W} height={400}>
          <Card><Phase6Copy /></Card>
        </DCArtboard>
        <DCArtboard id="p7" label="7/9 · IDE Settings" width={W} height={460}>
          <Card><Phase7Settings /></Card>
        </DCArtboard>
        <DCArtboard id="p8" label="8/9 · Manifest Write" width={W} height={440}>
          <Card><Phase8Manifest /></Card>
        </DCArtboard>
        <DCArtboard id="p9" label="9/9 · Summary" width={W} height={540}>
          <Card><Phase9Summary /></Card>
        </DCArtboard>
      </DCSection>
    </DesignCanvas>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);