'use client'

// Design-system showcase (Schritt A verification). Renders the redesign tokens +
// chips so the design language can be reviewed in isolation. Internal reference
// page (not in the customer sidebar).

import { GeltungChip, SeverityChip, DomainTag, MonoId } from '@/components/redesign/Chips'
import { COLORS, DOMAIN } from '@/components/redesign/tokens'

function Section({ title, children }: { title: string; children: React.ReactNode }) {
  return (
    <section style={{ marginTop: 38 }}>
      <h2 className="font-publicSans" style={{ fontSize: 19, fontWeight: 800, letterSpacing: '-0.01em', color: COLORS.ink }}>{title}</h2>
      <div style={{ marginTop: 14 }}>{children}</div>
    </section>
  )
}

function Swatch({ name, hex }: { name: string; hex: string }) {
  return (
    <div className="font-publicSans" style={{ fontSize: 12 }}>
      <div style={{ height: 44, borderRadius: 10, background: hex, border: `1px solid ${COLORS.border}` }} />
      <div style={{ marginTop: 6, color: COLORS.ink, fontWeight: 600 }}>{name}</div>
      <div className="font-plexMono" style={{ color: COLORS.faint, fontSize: 11 }}>{hex}</div>
    </div>
  )
}

export default function DesignSystemPage() {
  return (
    <div className="font-publicSans" style={{ background: COLORS.page, minHeight: '100%', margin: -24, padding: '30px 24px 90px' }}>
      <div style={{ maxWidth: 1100, margin: '0 auto' }}>
        <h1 style={{ fontSize: 30, fontWeight: 800, letterSpacing: '-0.02em', color: COLORS.ink, lineHeight: 1.1 }}>
          Design-Sprache
        </h1>
        <p style={{ marginTop: 8, color: COLORS.muted, fontSize: 14, maxWidth: 640 }}>
          Schritt A — Tokens & Bausteine des Redesigns (Geltung, Severity, Domänen, Typografie).
          Referenz: <span className="font-plexMono" style={{ fontSize: 12 }}>design/redesign/HANDOFF_README.md</span>.
        </p>

        <Section title="Geltung — Pflicht / Empfehlung / Kann">
          <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
            <GeltungChip value="pflicht" />
            <GeltungChip value="empfehlung" />
            <GeltungChip value="kann" />
            <span style={{ color: COLORS.faint, fontSize: 12 }}>+ Klartext-Maßnahme</span>
            <MonoId>M542</MonoId>
          </div>
        </Section>

        <Section title="Severity — Dringlichkeit (getönt, kein Neon)">
          <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
            <SeverityChip value="kritisch" />
            <SeverityChip value="hoch" />
            <SeverityChip value="mittel" />
            <SeverityChip value="niedrig" />
          </div>
        </Section>

        <Section title="Domänen — Safety / Cyber / Schnittstelle">
          <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', marginBottom: 14 }}>
            <DomainTag value="safety" />
            <DomainTag value="cyber" />
            <DomainTag value="bridge" />
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 12 }}>
            {(['safety', 'cyber', 'bridge'] as const).map((k) => (
              <div key={k} style={{ background: DOMAIN[k].tint, border: `1px solid ${DOMAIN[k].border}`, borderLeft: `4px solid ${DOMAIN[k].accent}`, borderRadius: 12, padding: 14 }}>
                <div style={{ fontWeight: 700, color: DOMAIN[k].accent, fontSize: 13 }}>{DOMAIN[k].label}</div>
                <div className="font-plexMono" style={{ color: COLORS.faint, fontSize: 11, marginTop: 4 }}>{DOMAIN[k].accent}</div>
              </div>
            ))}
          </div>
        </Section>

        <Section title="Typografie">
          <div style={{ display: 'grid', gap: 10 }}>
            <div className="font-publicSans" style={{ fontSize: 18, fontWeight: 800, color: COLORS.ink }}>Public Sans — UI & Überschriften (800)</div>
            <div className="font-sourceSerif" style={{ fontSize: 15, fontStyle: 'italic', color: COLORS.muted }}>Source Serif 4 — Normzitate / rechtliche Texte (kursiv)</div>
            <div className="font-plexMono" style={{ fontSize: 13, color: COLORS.muted }}>IBM Plex Mono — interne IDs · CRA-AI-8 · R = S × (F + W + P)</div>
          </div>
        </Section>

        <Section title="Neutrale & Marke">
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5,1fr)', gap: 12 }}>
            <Swatch name="bg/page" hex={COLORS.page} />
            <Swatch name="surface" hex={COLORS.surface} />
            <Swatch name="border" hex={COLORS.border} />
            <Swatch name="ink" hex={COLORS.ink} />
            <Swatch name="primary" hex={COLORS.brand} />
          </div>
        </Section>

        <Section title="Leitprinzipien">
          <div style={{ background: COLORS.panel, borderRadius: 14, padding: 22 }}>
            <ol style={{ color: COLORS.panelText2, fontSize: 13, lineHeight: 1.7, paddingLeft: 0, listStyle: 'none' }}>
              {[
                '3 Ebenen pro Screen: Überblick → Cyber×Safety → Technik (eingeklappt).',
                'Klartext führt. Interne IDs nur in Monospace nachgestellt.',
                'Co-Pilot statt Roboter-Anwalt — keine Panik-Rot-Blöcke.',
                'Pflicht / Empfehlung / Kann immer visuell getrennt.',
              ].map((t, i) => (
                <li key={i} style={{ display: 'flex', gap: 10, marginBottom: 6 }}>
                  <span className="font-plexMono" style={{ color: COLORS.panelAccent, fontWeight: 600 }}>{i + 1}</span>
                  <span style={{ color: COLORS.panelText }}>{t}</span>
                </li>
              ))}
            </ol>
          </div>
        </Section>
      </div>
    </div>
  )
}