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

function DashboardScreen({ onNavigate }) {
  return (
    <AppPage>
      <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 'var(--space-6)' }}>
        <Card>
          <CardHeader>
            <Badge tone="brand" style={{ width: 'fit-content' }}>Ihr nächster Schritt</Badge>
            <CardTitle as="h2" style={{ fontSize: 'var(--text-h1)' }}>C/CE-Qualifikation klären</CardTitle>
            <CardDescription>Für Ihr Ziel „Berufskraftfahrer/in" fehlt genau eine Qualifikation. Bereiten Sie das Gespräch mit Ihrer Beratung vor.</CardDescription>
          </CardHeader>
          <CardContent style={{ display: 'flex', gap: 'var(--space-3)', flexWrap: 'wrap' }}>
            <Button iconRight={<Icon name="arrow-right" size={16} />} onClick={() => onNavigate('funding')}>Gesprächsvorbereitung erstellen</Button>
            <Button variant="outline" onClick={() => onNavigate('opportunities')}>Weiterbildung finden</Button>
          </CardContent>
        </Card>
        <Card tone="sunken">
          <CardHeader><CardTitle as="h2">Ihr Profil</CardTitle><CardDescription>Sie können jederzeit unterbrechen und später weitermachen.</CardDescription></CardHeader>
          <CardContent style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-4)' }}>
            <Progress value={70} label="Profil vollständig" />
            <Stepper current={7} onStepSelect={() => {}} steps={['Person', 'Situation', 'Erfahrung', 'Bildung', 'Kenntnisse', 'Zertifikate', 'Sprachen', 'Mobilität', 'Karriereziel', 'Prüfen']} style={{ maxHeight: 132, overflowY: 'auto' }} />
          </CardContent>
        </Card>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 'var(--space-4)' }}>
        {[
          ['Aktuelle Situation', 'Lagerhelfer', '4 Jahre Erfahrung', 'briefcase'],
          ['Karriereziel', 'Berufskraftfahrer/in', 'Höheres Einkommen', 'compass'],
          ['Status', 'Qualifikation nötig', 'QUALIFICATION_REQUIRED', 'graduation-cap'],
          ['Mobilität', '25 km · Führerschein B', 'Bremen', 'map-pin'],
        ].map(([label, value, meta, icon]) => (
          <Card key={label} tone="flat">
            <CardContent style={{ padding: 'var(--space-5)', display: 'flex', flexDirection: 'column', gap: 6 }}>
              <span style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 'var(--text-xs)', color: 'var(--text-muted)' }}><Icon name={icon} size={14} />{label}</span>
              <span style={{ fontSize: 'var(--text-h4)', fontWeight: 600, color: 'var(--text-heading)' }}>{value}</span>
              <span style={{ fontSize: 'var(--text-xs)', color: 'var(--text-muted)' }}>{meta}</span>
            </CardContent>
          </Card>
        ))}
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--space-6)' }}>
        <Section title="Empfohlene Wege" action={<a href="#" onClick={(e) => { e.preventDefault(); onNavigate('compass'); }} style={{ fontSize: 'var(--text-sm)' }}>Alle im Kompass</a>}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-3)' }}>
            {[['Berufskraftfahrer/in', 84], ['Fachkraft für Lagerlogistik', 76], ['Disponent/in', 61]].map(([name, score]) => (
              <Card key={name} interactive onClick={() => onNavigate('compass')}>
                <CardContent style={{ padding: 'var(--space-5)', display: 'flex', alignItems: 'center', gap: 'var(--space-4)' }}>
                  <span style={{ flex: 1, fontSize: 'var(--text-body)', fontWeight: 600, color: 'var(--text-heading)' }}>{name}</span>
                  <span style={{ width: 120 }}><Progress value={score} tone="success" valueText={score + ' %'} label="Übereinstimmung" /></span>
                </CardContent>
              </Card>
            ))}
          </div>
        </Section>
        <Section title="Ihre Bewerbungen" action={<a href="#" onClick={(e) => e.preventDefault()} style={{ fontSize: 'var(--text-sm)' }}>Alle ansehen</a>}>
          <Card>
            <CardContent style={{ padding: 'var(--space-2) var(--space-6)' }}>
              {[['Fachlagerist/in', 'Nordwaren Logistik GmbH', 'UNTER PRÜFUNG', 'external'], ['Umschulung Lagerlogistik', 'Bundesagentur für Arbeit', 'EINGEGANGEN', 'official'], ['Praktikum Disposition', 'Weserhafen Spedition', 'ENTWURF', 'neutral']].map(([t, o, s, tone]) => (
                <div key={t} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 'var(--space-4)', padding: 'var(--space-4) 0', borderBottom: '1px solid var(--border-subtle)' }}>
                  <span style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
                    <span style={{ fontSize: 'var(--text-body)', fontWeight: 600, color: 'var(--text-heading)' }}>{t}</span>
                    <span style={{ fontSize: 'var(--text-xs)', color: 'var(--text-muted)' }}>{o}</span>
                  </span>
                  <Badge tone={tone}>{s}</Badge>
                </div>
              ))}
            </CardContent>
          </Card>
          <Alert tone="info" title="Ihr Verlauf bleibt erhalten">Statusänderungen werden protokolliert und nie überschrieben.</Alert>
        </Section>
      </div>
    </AppPage>
  );
}

Object.assign(window, { DashboardScreen });