const { Button, Badge, Card, CardContent, Input, Label, Icon, SourceTag } = window.BeyonddoDesignSystem_2c6c3a;

const KINDS = ['Alle', 'Job', 'Weiterbildung', 'Ausbildung', 'Praktikum', 'Karriereprogramm', 'Offizielle Quelle'];

const ITEMS = [
  { kind: 'Weiterbildung', title: 'Berufskraftfahrer/in C/CE — Grundqualifikation', org: 'Logistik-Akademie Nord', meta: 'Bremen · 4 Monate · Beginn 01.10.', source: 'BEYONDDO_PARTNER', badge: ['verified', 'Geprüfter Partner'], saved: true },
  { kind: 'Weiterbildung', title: 'Umschulung Fachkraft für Lagerlogistik', org: 'Bundesagentur für Arbeit', meta: 'Bremen · 24 Monate', source: 'OFFICIAL_RESOURCE', badge: ['official', 'Offizielle Quelle'], saved: false },
  { kind: 'Job', title: 'Fachlagerist/in', org: 'Nordwaren Logistik GmbH', meta: 'Bremen-Neustadt · Vollzeit · ab 2.900 €', source: 'BEYONDDO_DIRECT', badge: ['brand', 'Beyonddo'], saved: false },
  { kind: 'Job', title: 'Berufskraftfahrer/in Nahverkehr', org: 'Weserhafen Spedition', meta: 'Bremerhaven · Vollzeit · C/CE erforderlich', source: 'LICENSED_FEED', badge: ['neutral', 'Lizenzierte Quelle'], saved: false },
  { kind: 'Offizielle Quelle', title: 'mein NOW — Weiterbildungsangebote', org: 'mein-now.de', meta: 'Bundesweit · Information', source: 'EXTERNAL_LINK', badge: ['external', 'Externer Link'], saved: false },
];

function OpportunitiesScreen() {
  const [kind, setKind] = React.useState('Alle');
  const [saved, setSaved] = React.useState(['Berufskraftfahrer/in C/CE — Grundqualifikation']);
  const rows = ITEMS.filter((i) => kind === 'Alle' || i.kind === kind);
  const toggle = (t) => setSaved((s) => s.includes(t) ? s.filter((x) => x !== t) : [...s, t]);
  return (
    <AppPage>
      <div style={{ display: 'grid', gridTemplateColumns: '260px 1fr', gap: 'var(--space-6)', alignItems: 'start' }}>
        <Card tone="flat">
          <CardContent style={{ padding: 'var(--space-5)', display: 'flex', flexDirection: 'column', gap: 'var(--space-5)' }}>
            <div className="bd-field"><Label htmlFor="ort">Ort</Label><Input id="ort" defaultValue="28195 Bremen" /></div>
            <div className="bd-field"><Label htmlFor="rad">Radius</Label><Input id="rad" defaultValue="25 km" /></div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-3)' }}>
              <span className="bd-label">Weitere Filter</span>
              {['Nur geprüfte Angebote', 'Remote möglich', 'Für internationale Bewerbende', 'Beginn in 3 Monaten'].map((l, i) => (
                <label key={l} style={{ display: 'flex', gap: 10, alignItems: 'center', fontSize: 'var(--text-sm)', color: 'var(--text-body)', cursor: 'pointer' }}>
                  <input type="checkbox" defaultChecked={i === 0} style={{ width: 18, height: 18, accentColor: 'var(--primary)' }} />{l}
                </label>
              ))}
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-2)', paddingTop: 'var(--space-4)', borderTop: '1px solid var(--border-subtle)' }}>
              <span className="bd-label">Quelle</span>
              {[['BEYONDDO_DIRECT', 'Beyonddo'], ['BEYONDDO_PARTNER', 'Geprüfter Partner'], ['OFFICIAL_RESOURCE', 'Offizielle Quelle'], ['LICENSED_FEED', 'Lizenzierte Quelle'], ['EXTERNAL_LINK', 'Externer Link']].map(([s, l]) => (
                <SourceTag key={s} source={s} />
              ))}
            </div>
          </CardContent>
        </Card>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-4)' }}>
          <div style={{ display: 'flex', gap: 'var(--space-2)', flexWrap: 'wrap' }}>
            {KINDS.map((k) => (
              <button key={k} onClick={() => setKind(k)} style={{ cursor: 'pointer', fontFamily: 'var(--font-core)', fontSize: 'var(--text-sm)', fontWeight: 500, padding: '7px 14px', borderRadius: 'var(--radius-pill)', border: '1px solid ' + (kind === k ? 'transparent' : 'var(--border-default)'), background: kind === k ? 'var(--secondary)' : 'var(--surface)', color: kind === k ? 'var(--secondary-foreground)' : 'var(--text-body)' }}>{k}</button>
            ))}
          </div>
          {rows.map((r) => (
            <Card key={r.title} interactive>
              <CardContent style={{ padding: 'var(--space-6)', display: 'flex', gap: 'var(--space-5)', alignItems: 'flex-start' }}>
                <span style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 6 }}>
                  <span style={{ display: 'flex', gap: 'var(--space-2)' }}><Badge tone="neutral">{r.kind}</Badge><Badge tone={r.badge[0]}>{r.badge[1]}</Badge></span>
                  <h3 style={{ fontSize: 'var(--text-h3)' }}>{r.title}</h3>
                  <span style={{ fontSize: 'var(--text-sm)', color: 'var(--text-muted)' }}>{r.meta}</span>
                  <SourceTag source={r.source} name={r.org} />
                </span>
                <span style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-2)' }}>
                  <Button size="sm">{r.source === 'EXTERNAL_LINK' ? 'Zur Quelle' : 'Ansehen'}</Button>
                  <Button size="sm" variant={saved.includes(r.title) ? 'secondary' : 'outline'} onClick={(e) => { e.stopPropagation(); toggle(r.title); }} iconLeft={<Icon name={saved.includes(r.title) ? 'bookmark-check' : 'bookmark'} size={14} />}>
                    {saved.includes(r.title) ? 'Gemerkt' : 'Merken'}
                  </Button>
                </span>
              </CardContent>
            </Card>
          ))}
        </div>
      </div>
    </AppPage>
  );
}

Object.assign(window, { OpportunitiesScreen });