const { Button, Badge, Card, CardContent, CardHeader, CardTitle, CardDescription, Icon, Progress, Alert } = window.BeyonddoDesignSystem_2c6c3a;

const OPTIONS = [
  { name: 'Berufskraftfahrer/in', score: 84, status: ['QUALIFICATION_REQUIRED', 'Qualifikation nötig', 'external'], reasons: ['4 Jahre Erfahrung in Lager und Logistik', 'Führerschein B vorhanden', 'Hohe regionale Nachfrage in Bremen'], missing: ['Führerschein C/CE', 'Grundqualifikation nach BKrFQG'] },
  { name: 'Fachkraft für Lagerlogistik', score: 76, status: ['TRAINING_RECOMMENDED', 'Weiterbildung empfohlen', 'official'], reasons: ['Aufbauend auf Ihrer heutigen Tätigkeit', 'Umschulung über 24 Monate möglich'], missing: ['Abschlussprüfung IHK'] },
  { name: 'Disponent/in', score: 61, status: ['REVIEW_REQUIRED', 'Prüfung nötig', 'neutral'], reasons: ['Erfordert Planungserfahrung', 'Kaufmännische Kenntnisse teilweise vorhanden'], missing: ['Kaufmännische Qualifikation', 'Englisch B1'] },
];

const PATH = ['Lagerhelfer', 'Fachlagerist', 'Fachkraft für Lagerlogistik', 'Teamleiter', 'Logistikmeister'];

function CompassScreen({ onNavigate }) {
  const [sel, setSel] = React.useState(0);
  const o = OPTIONS[sel];
  return (
    <AppPage>
      <Alert tone="info" title="Ergebnisse sind Vorschläge, keine Zusagen">
        Beyonddo zeigt mögliche Wege auf Basis Ihrer Angaben. Über Zulassung, Förderung und Einstellung entscheiden die zuständigen Stellen.
      </Alert>

      <div style={{ display: 'grid', gridTemplateColumns: '340px 1fr', gap: 'var(--space-6)', alignItems: 'start' }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-3)' }}>
          {OPTIONS.map((op, i) => (
            <Card key={op.name} interactive onClick={() => setSel(i)} style={i === sel ? { borderColor: 'var(--primary)', boxShadow: 'var(--shadow-lift)' } : undefined}>
              <CardContent style={{ padding: 'var(--space-5)', display: 'flex', flexDirection: 'column', gap: 'var(--space-3)' }}>
                <span style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: 8 }}>
                  <span style={{ fontSize: 'var(--text-h4)', fontWeight: 600, color: 'var(--text-heading)' }}>{op.name}</span>
                  <span className="bd-numeric" style={{ fontSize: 'var(--text-h3)', fontWeight: 500, color: 'var(--text-heading)' }}>{op.score} %</span>
                </span>
                <Progress value={op.score} tone={op.score >= 80 ? 'success' : 'brand'} />
                <Badge tone={op.status[2]}>{op.status[1]}</Badge>
              </CardContent>
            </Card>
          ))}
        </div>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-6)' }}>
          <Card>
            <CardHeader>
              <span style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-3)' }}>
                <CardTitle as="h2" style={{ fontSize: 'var(--text-h1)' }}>{o.name}</CardTitle>
                <span className="bd-numeric" style={{ fontSize: 'var(--text-xs)', color: 'var(--text-muted)' }}>{o.status[0]}</span>
              </span>
              <CardDescription>Warum dieser Weg zu Ihnen passt — und was noch fehlt.</CardDescription>
            </CardHeader>
            <CardContent style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--space-8)' }}>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-3)' }}>
                <span style={{ fontSize: 'var(--text-xs)', fontWeight: 600, letterSpacing: 'var(--tracking-eyebrow)', textTransform: 'uppercase', color: 'var(--verified-500)' }}>Spricht dafür</span>
                {o.reasons.map((r) => (
                  <span key={r} style={{ display: 'flex', gap: 10, fontSize: 'var(--text-sm)', color: 'var(--text-body)', lineHeight: 'var(--leading-normal)' }}>
                    <Icon name="check" size={16} style={{ color: 'var(--verified-500)', marginTop: 2 }} />{r}
                  </span>
                ))}
              </div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-3)' }}>
                <span style={{ fontSize: 'var(--text-xs)', fontWeight: 600, letterSpacing: 'var(--tracking-eyebrow)', textTransform: 'uppercase', color: 'var(--warning-strong)' }}>Ihre Lücke</span>
                {o.missing.map((r) => (
                  <span key={r} style={{ display: 'flex', gap: 10, fontSize: 'var(--text-sm)', color: 'var(--text-body)', lineHeight: 'var(--leading-normal)' }}>
                    <Icon name="circle-dashed" size={16} style={{ color: 'var(--warning)', marginTop: 2 }} />{r}
                  </span>
                ))}
              </div>
            </CardContent>
            <CardContent style={{ paddingTop: 0, display: 'flex', gap: 'var(--space-3)', flexWrap: 'wrap' }}>
              <Button onClick={() => onNavigate('opportunities')}>Weiterbildung finden</Button>
              <Button variant="outline" onClick={() => onNavigate('funding')}>Förderweg prüfen</Button>
              <Button variant="ghost">Als Ziel setzen</Button>
            </CardContent>
          </Card>

          <Card tone="sunken">
            <CardHeader><CardTitle as="h2">Möglicher Karriereweg</CardTitle><CardDescription>Beyonddos Berufspfad-Graph für Lager und Logistik.</CardDescription></CardHeader>
            <CardContent>
              <ol style={{ listStyle: 'none', margin: 0, padding: 0, display: 'flex', alignItems: 'center', gap: 'var(--space-2)', flexWrap: 'wrap' }}>
                {PATH.map((p, i) => (
                  <li key={p} style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-2)' }}>
                    <span style={{ padding: '8px 14px', borderRadius: 'var(--radius-pill)', background: i === 0 ? 'var(--ink-900)' : 'var(--surface)', color: i === 0 ? 'var(--sand-50)' : 'var(--text-body)', border: '1px solid ' + (i === 0 ? 'transparent' : 'var(--border-default)'), fontSize: 'var(--text-sm)', fontWeight: i === 0 ? 600 : 400 }}>{p}</span>
                    {i < PATH.length - 1 ? <Icon name="arrow-right" size={14} style={{ color: 'var(--text-muted)' }} /> : null}
                  </li>
                ))}
              </ol>
            </CardContent>
          </Card>
        </div>
      </div>
    </AppPage>
  );
}

Object.assign(window, { CompassScreen });