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

const DOCS = [
  ['Lebenslauf', 'CV', 'VERIFIED', 'Geprüft', 'verified', 'Privat'],
  ['Führerschein Klasse B', 'Führerschein', 'VERIFIED', 'Geprüft', 'verified', 'Privat'],
  ['Arbeitszeugnis Nordwaren GmbH', 'Beschäftigungsnachweis', 'UPLOADED', 'Hochgeladen', 'neutral', 'Privat'],
  ['Zertifikat Gabelstaplerschein', 'Qualifikation', 'EXPIRED', 'Abgelaufen', 'external', 'Privat'],
  ['Sprachzertifikat Deutsch B1', 'Sprachzertifikat', 'REQUIRES_REVIEW', 'Prüfung nötig', 'external', 'Privat'],
  ['Schulabschluss', 'Bildungsnachweis', 'VERIFIED', 'Geprüft', 'verified', 'Für Bewerbung freigegeben'],
];

function WalletScreen() {
  return (
    <AppPage>
      <Alert tone="info" title="Standardmäßig privat">
        Nichts wird geteilt, bevor Sie es freigeben. Jede Freigabe können Sie jederzeit widerrufen.
      </Alert>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 320px', gap: 'var(--space-6)', alignItems: 'start' }}>
        <Card>
          <CardHeader>
            <span style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 'var(--space-4)' }}>
              <span><CardTitle as="h2">Ihre Dokumente</CardTitle><CardDescription>Sechs von zwölf empfohlenen Nachweisen vorhanden.</CardDescription></span>
              <Button size="sm" iconLeft={<Icon name="upload" size={14} />}>Dokument hochladen</Button>
            </span>
          </CardHeader>
          <CardContent style={{ padding: '0 var(--space-6) var(--space-6)' }}>
            <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 'var(--text-sm)' }}>
              <thead>
                <tr>
                  {['Dokument', 'Art', 'Status', 'Sichtbarkeit', ''].map((h) => (
                    <th key={h} style={{ textAlign: 'left', padding: '10px 0', fontSize: 'var(--text-xs)', fontWeight: 600, letterSpacing: 'var(--tracking-eyebrow)', textTransform: 'uppercase', color: 'var(--text-muted)', borderBottom: '1px solid var(--border-default)' }}>{h}</th>
                  ))}
                </tr>
              </thead>
              <tbody>
                {DOCS.map(([name, kind, code, label, tone, vis]) => (
                  <tr key={name}>
                    <td style={{ padding: '14px 0', borderBottom: '1px solid var(--border-subtle)' }}>
                      <span style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                        <Icon name="file-text" size={16} style={{ color: 'var(--ink-500)' }} />
                        <span style={{ fontWeight: 600, color: 'var(--text-heading)' }}>{name}</span>
                      </span>
                    </td>
                    <td style={{ padding: '14px 0', borderBottom: '1px solid var(--border-subtle)', color: 'var(--text-muted)' }}>{kind}</td>
                    <td style={{ padding: '14px 0', borderBottom: '1px solid var(--border-subtle)' }}><Badge tone={tone}>{label}</Badge></td>
                    <td style={{ padding: '14px 0', borderBottom: '1px solid var(--border-subtle)', color: 'var(--text-muted)' }}>{vis}</td>
                    <td style={{ padding: '14px 0', borderBottom: '1px solid var(--border-subtle)', textAlign: 'right' }}>
                      <Button size="sm" variant="ghost">Freigabe verwalten</Button>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </CardContent>
        </Card>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-4)' }}>
          <Card tone="sunken">
            <CardHeader><CardTitle as="h2">Sichtbarkeit</CardTitle><CardDescription>Alles standardmäßig aus.</CardDescription></CardHeader>
            <CardContent style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-4)' }}>
              {[['Für Arbeitgeber sichtbar', false], ['Für Bildungsträger sichtbar', false], ['Marketing', false]].map(([l, on]) => (
                <span key={l} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 'var(--space-3)', fontSize: 'var(--text-sm)', color: 'var(--text-body)' }}>
                  {l}
                  <span style={{ width: 44, height: 26, borderRadius: 999, background: on ? 'var(--primary)' : 'var(--sand-300)', padding: 3, display: 'flex', justifyContent: on ? 'flex-end' : 'flex-start' }}>
                    <span style={{ width: 20, height: 20, borderRadius: 999, background: '#fff', boxShadow: 'var(--shadow-sm)' }} />
                  </span>
                </span>
              ))}
              <Button size="sm" variant="outline" fullWidth>Datenschutz-Center öffnen</Button>
            </CardContent>
          </Card>
          <Card tone="flat">
            <CardHeader><CardTitle as="h2">Geteilt mit</CardTitle></CardHeader>
            <CardContent style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-3)' }}>
              <span style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontSize: 'var(--text-sm)' }}>
                <span style={{ color: 'var(--text-body)' }}>Nordwaren Logistik GmbH</span>
                <Button size="sm" variant="ghost">Widerrufen</Button>
              </span>
              <span style={{ fontSize: 'var(--text-xs)', color: 'var(--text-muted)' }}>Zugriff auf: Lebenslauf, Schulabschluss · seit 12.08.2026</span>
            </CardContent>
          </Card>
        </div>
      </div>
    </AppPage>
  );
}

Object.assign(window, { WalletScreen });