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

const RESULTS = [
  { ti: 2, title: 'Berufskraftfahrer/in C/CE — Grundqualifikation', org: 'Logistik-Akademie Nord', place: 'Bremen', meta: '4 Monate · Vollzeit · Beginn 01.10.', source: 'BEYONDDO_PARTNER', badge: 'verified', note: true },
  { ti: 2, title: 'Fachkraft für Lagerlogistik — Umschulung', org: 'Bundesagentur für Arbeit', place: 'Bremen', meta: '24 Monate · Vollzeit', source: 'OFFICIAL_RESOURCE', badge: 'official', note: false },
  { ti: 1, title: 'Fachlagerist/in', org: 'Nordwaren Logistik GmbH', place: 'Bremen-Neustadt', meta: 'Vollzeit · Schicht · ab 2.900 € brutto', source: 'BEYONDDO_DIRECT', badge: 'brand', note: false },
  { ti: 3, title: 'Ausbildung Kaufmann/-frau für Spedition und Logistikdienstleistung', org: 'Weserhafen Spedition', place: 'Bremerhaven', meta: '3 Jahre · Beginn 01.08.', source: 'LICENSED_FEED', badge: 'neutral', note: false },
  { ti: 6, title: 'Bildungsgutschein — Merkblatt und Voraussetzungen', org: 'arbeitsagentur.de', place: 'Bundesweit', meta: 'Information', source: 'EXTERNAL_LINK', badge: 'external', note: false },
];

function ChancenScreen({ t, tSrc }) {
  const c = t.chancen;
  const [ti, setTi] = React.useState(0);
  const [verifiedOnly, setVerifiedOnly] = React.useState(false);
  let rows = RESULTS.filter((r) => ti === 0 || r.ti === ti);
  if (verifiedOnly) rows = rows.filter((r) => r.source === 'BEYONDDO_PARTNER' || r.source === 'BEYONDDO_DIRECT');

  return (
    <main style={{ maxWidth: 'var(--container-site)', margin: '0 auto', padding: 'var(--space-12) clamp(1rem, 4vw, 5rem) var(--space-20)' }}>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-3)', marginBottom: 'var(--space-8)' }}>
        <Eyebrow>{c.eyebrow}</Eyebrow>
        <h1 style={{ fontSize: 'var(--text-display)', letterSpacing: 'var(--tracking-display)', fontWeight: 800 }}>{c.title}</h1>
        <p style={{ fontSize: 'var(--text-body-lg)', color: 'var(--text-muted)', maxWidth: '64ch', lineHeight: 'var(--leading-relaxed)' }}>
          {c.sub}
        </p>
      </div>

      <Card style={{ marginBottom: 'var(--space-8)' }}>
        <CardContent style={{ padding: 'var(--space-6)', display: 'flex', flexDirection: 'column', gap: 'var(--space-5)' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr auto', gap: 'var(--space-3)' }}>
            <div className="bd-field"><Label htmlFor="q">{c.qLabel}</Label><Input id="q" defaultValue="Lagerlogistik" placeholder={c.qPlaceholder} /></div>
            <div className="bd-field"><Label htmlFor="o">{c.oLabel}</Label><Input id="o" defaultValue="28195 Bremen" /></div>
            <div style={{ display: 'flex', alignItems: 'flex-end' }}><Button size="md" iconLeft={<Icon name="search" size={16} />}>{c.search}</Button></div>
          </div>
          <div style={{ display: 'flex', gap: 'var(--space-2)', flexWrap: 'wrap' }}>
            {c.types.map((label, i) => (
              <button key={label} onClick={() => setTi(i)} style={{ cursor: 'pointer', fontFamily: 'var(--font-core)', fontSize: 'var(--text-sm)', fontWeight: 500, padding: '7px 14px', borderRadius: 'var(--radius-pill)', border: '1px solid ' + (ti === i ? 'transparent' : 'var(--border-default)'), background: ti === i ? 'var(--secondary)' : 'var(--surface)', color: ti === i ? 'var(--secondary-foreground)' : 'var(--text-body)' }}>{label}</button>
            ))}
          </div>
          <div style={{ display: 'flex', gap: 'var(--space-6)', flexWrap: 'wrap', paddingTop: 'var(--space-4)', borderTop: '1px solid var(--border-subtle)' }}>
            {c.filters.map(([label, value]) => (
              <span key={label} style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
                <span style={{ fontSize: 'var(--text-xs)', color: 'var(--text-muted)' }}>{label}</span>
                <span style={{ fontSize: 'var(--text-sm)', fontWeight: 500, color: 'var(--text-heading)' }}>{value}</span>
              </span>
            ))}
            <label style={{ display: 'flex', alignItems: 'center', gap: 8, marginLeft: 'auto', fontSize: 'var(--text-sm)', color: 'var(--text-body)', cursor: 'pointer' }}>
              <input type="checkbox" checked={verifiedOnly} onChange={(e) => setVerifiedOnly(e.target.checked)} style={{ width: 18, height: 18, accentColor: 'var(--primary)' }} />
              {c.verifiedOnly}
            </label>
          </div>
        </CardContent>
      </Card>

      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 'var(--space-4)' }}>
        <h2 style={{ fontSize: 'var(--text-h3)' }}><span className="bd-numeric">{rows.length}</span> {c.count}</h2>
        <span style={{ fontSize: 'var(--text-sm)', color: 'var(--text-muted)' }}>{c.sort}</span>
      </div>

      <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-3)' }}>
        {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={{ width: 44, height: 44, flex: 'none', borderRadius: 'var(--radius-md)', background: 'var(--surface-sunken)', display: 'grid', placeItems: 'center' }}>
                <Icon name={r.ti === 1 ? 'briefcase' : r.ti === 3 ? 'graduation-cap' : r.ti === 6 ? 'landmark' : 'compass'} size={20} style={{ color: 'var(--ink-600)' }} />
              </span>
              <span style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 6 }}>
                <span style={{ display: 'flex', gap: 'var(--space-2)', alignItems: 'center' }}>
                  <Badge tone="neutral">{c.types[r.ti]}</Badge>
                  <Badge tone={r.badge}>{tSrc[r.source]}</Badge>
                </span>
                <h3 style={{ fontSize: 'var(--text-h3)' }}>{r.title}</h3>
                <span style={{ fontSize: 'var(--text-sm)', color: 'var(--text-muted)' }}>{r.org} · {r.place} · {r.meta}</span>
                <SourceTag source={r.source} name={r.org} label={tSrc[r.source]} />
                {r.note ? <span style={{ marginTop: 4, fontSize: 'var(--text-xs)', color: 'var(--warning-strong)', display: 'flex', alignItems: 'center', gap: 6 }}><Icon name="info" size={13} />{c.fundingNote}</span> : null}
              </span>
              <span style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-2)', alignItems: 'stretch' }}>
                <Button size="sm">{c.view}</Button>
                <Button size="sm" variant="ghost" iconLeft={<Icon name="flag" size={14} />}>{c.report}</Button>
              </span>
            </CardContent>
          </Card>
        ))}
      </div>

      <div style={{ marginTop: 'var(--space-8)' }}>
        <Alert tone="info" title={c.noteTitle}>{c.noteBody}</Alert>
      </div>
    </main>
  );
}

Object.assign(window, { ChancenScreen });