// ============================================================
// LSPD — Weitere Dashboard-Bereiche (Demo-Inhalte)
// ============================================================

function SimpleStatusBadge({ label, color }) {
  return <span className="inline-flex items-center gap-1.5 whitespace-nowrap rounded px-2 py-0.5 text-[11px] font-bold uppercase tracking-wide" style={{ color, background: `${color}1f`, border: `1px solid ${color}40` }}><span className="h-1.5 w-1.5 rounded-full" style={{ background: color }} />{label}</span>;
}
const STATE_COLOR = { Genehmigt:'#22C55E', Offen:'#F59E0B', Abgelehnt:'#CC2233', Ausgezahlt:'#22C55E', Bestätigt:'#22C55E', Freigabe:'#F59E0B', Treffer:'#22C55E', Analyse:'#0EA5E9' };

// ---- Wiki ----
function WikiPage() {
  const [q, setQ] = useState('');
  return (
    <div>
      <PageHead title="Wiki" sub="Wissensdatenbank & Standardarbeitsanweisungen" />
      <div className="relative mb-6 max-w-xl">
        <Icon name="Search" size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-muted" />
        <input value={q} onChange={e => setQ(e.target.value)} placeholder="Artikel durchsuchen …" className="w-full h-11 rounded-md bg-card border border-line pl-9 pr-3 text-sm outline-none focus:border-accent" />
      </div>
      <div className="grid md:grid-cols-2 gap-4">
        {WIKI.map(c => (
          <Card key={c.cat} className="p-5">
            <div className="flex items-center gap-2.5 mb-3">
              <div className="grid place-items-center h-9 w-9 rounded-md bg-[var(--c-accent-soft)] text-accent"><Icon name={c.icon} size={18} /></div>
              <h2 className="font-bold">{c.cat}</h2>
            </div>
            <div className="flex flex-col">
              {c.articles.filter(a => q === '' || a.toLowerCase().includes(q.toLowerCase())).map(a => (
                <button key={a} className="flex items-center gap-2 py-2 text-sm text-muted hover:text-accent transition-colors text-left border-b border-line/50 last:border-0"><Icon name="FileText" size={14} className="shrink-0" /><span className="flex-1">{a}</span><Icon name="ChevronRight" size={14} /></button>
              ))}
            </div>
          </Card>
        ))}
      </div>
    </div>
  );
}

// ---- Logbuch ----
function Logbuch() {
  const [type, setType] = useState('ALLE');
  const types = ['ALLE', ...Object.keys(LOG_TYPES)];
  const rows = LOGBOOK.filter(l => type === 'ALLE' || l.type === type);
  return (
    <div>
      <PageHead title="Logbuch" sub="Protokoll aller Systemaktivitäten" />
      <div className="flex flex-wrap gap-2 mb-4">
        {types.map(t => (
          <button key={t} onClick={() => setType(t)} className={`rounded-md border px-3 h-8 text-[12px] font-semibold transition-all ${type === t ? 'border-accent text-accent bg-[var(--c-accent-soft)]' : 'border-line text-muted hover:text-ink'}`}>{t === 'ALLE' ? 'Alle' : t}</button>
        ))}
      </div>
      <Card className="overflow-hidden">
        {rows.map((l, i) => (
          <div key={i} className="flex items-start gap-3 px-4 py-3 border-b border-line/60 last:border-0 hover:bg-white/[.02]">
            <span className="mt-1.5 h-2 w-2 rounded-full shrink-0" style={{ background: LOG_TYPES[l.type] }} />
            <div className="flex-1 min-w-0">
              <div className="text-sm"><span className="font-semibold">{l.user}</span> <span className="text-ink/80">{l.action}</span></div>
              <div className="text-[11px] text-muted mt-0.5 font-mono">{l.ts}</div>
            </div>
            <span className="text-[10px] font-bold uppercase tracking-wide px-2 py-0.5 rounded shrink-0" style={{ color: LOG_TYPES[l.type], background: `${LOG_TYPES[l.type]}1a` }}>{l.type}</span>
          </div>
        ))}
      </Card>
    </div>
  );
}

// ---- DNA-Test ----
function DnaTest() {
  return (
    <div>
      <PageHead title="DNA-Test" sub="Forensische Proben & Abgleich mit der Datenbank">
        <Btn icon="Plus">Neue Probe</Btn>
      </PageHead>
      <div className="grid md:grid-cols-2 gap-4">
        {DNA_TESTS.map(t => (
          <Card key={t.id} className="p-5">
            <div className="flex items-start justify-between gap-2">
              <div className="flex items-center gap-3 min-w-0">
                <div className="grid place-items-center h-10 w-10 rounded-md bg-[#14B8A61f] text-[#14B8A6] shrink-0"><Icon name="TestTube" size={20} /></div>
                <div className="min-w-0">
                  <div className="font-mono text-[12px] text-muted">{t.id}</div>
                  <div className="font-bold truncate">{t.proband}</div>
                </div>
              </div>
              <SimpleStatusBadge label={t.status} color={STATE_COLOR[t.status] || '#8899AA'} />
            </div>
            <div className="mt-4 grid grid-cols-2 gap-3">
              <div className="rounded-md border border-line bg-bg/40 p-3"><div className="uplabel text-[10px]">Abgleich</div><div className="mt-1 font-bold text-sm truncate">{t.match}</div></div>
              <div className="rounded-md border border-line bg-bg/40 p-3"><div className="uplabel text-[10px]">Übereinstimmung</div><div className="mt-1 font-bold text-sm" style={{ color: t.conf > 0 ? '#22C55E' : 'var(--c-muted)' }}>{t.conf > 0 ? t.conf + ' %' : '—'}</div></div>
            </div>
            {t.conf > 0 && <div className="mt-3 h-2 rounded-full bg-line overflow-hidden"><div className="h-full rounded-full bg-success" style={{ width: t.conf + '%' }} /></div>}
            <div className="mt-3 text-[11px] text-muted">{t.date} · erfasst von {t.by}</div>
          </Card>
        ))}
      </div>
    </div>
  );
}

// ---- Abteilungen ----
function Abteilungen() {
  return (
    <div>
      <PageHead title="Abteilungen" sub="5 Abteilungen · 41 Mitarbeiter" />
      <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-4">
        {DEPT_DETAIL.map(d => (
          <Card key={d.name} className="p-5 hover:border-accent/40 transition-colors">
            <div className="flex items-center justify-between">
              <div className="flex items-center gap-2.5"><span className="h-3 w-3 rounded-full" style={{ background: d.color }} /><h2 className="font-bold">{d.name}</h2></div>
              <span className="text-2xl font-extrabold" style={{ color: d.color }}>{d.members}</span>
            </div>
            <p className="mt-3 text-sm text-muted leading-relaxed">{d.desc}</p>
            <div className="mt-4 pt-3 border-t border-line/60 flex items-center gap-2 text-[12px]"><Icon name="UserRound" size={13} className="text-muted" /><span className="text-muted">Leitung:</span> <span className="font-semibold">{d.lead}</span></div>
          </Card>
        ))}
      </div>
    </div>
  );
}

// ---- generic table-ish list builder ----
function ListCard({ rows, cols }) {
  return (
    <Card className="overflow-hidden">
      <div className="hidden md:grid gap-3 px-4 py-3 border-b border-line text-[11px] uplabel" style={{ gridTemplateColumns: cols.map(c => c.w || '1fr').join(' ') }}>
        {cols.map(c => <span key={c.key}>{c.title}</span>)}
      </div>
      {rows.map((r, i) => (
        <div key={i} className="grid gap-3 items-center px-4 py-3 border-b border-line/60 last:border-0 hover:bg-white/[.02]" style={{ gridTemplateColumns: cols.map(c => c.w || '1fr').join(' ') }}>
          {cols.map(c => <div key={c.key} className="text-sm min-w-0">{c.render ? c.render(r) : <span className="truncate">{r[c.key]}</span>}</div>)}
        </div>
      ))}
    </Card>
  );
}

// ---- Urlaubsverwaltung ----
function Urlaub() {
  return (
    <div>
      <PageHead title="Urlaubsverwaltung" sub="Abwesenheiten & Genehmigungen" />
      <ListCard rows={LEAVES} cols={[
        { key: 'name', title: 'Mitarbeiter', w: '1.6fr', render: r => <div><div className="font-semibold truncate">{r.name}</div><div className="text-xs text-muted font-mono">{r.dn}</div></div> },
        { key: 'type', title: 'Art', render: r => <span className="text-muted">{r.type}</span> },
        { key: 'zeit', title: 'Zeitraum', w: '1.3fr', render: r => <span className="text-muted">{r.from} – {r.to}</span> },
        { key: 'status', title: 'Status', render: r => <SimpleStatusBadge label={r.status} color={STATE_COLOR[r.status]} /> },
      ]} />
    </div>
  );
}

// ---- Bonusauszahlungen ----
function Bonus() {
  return (
    <div>
      <PageHead title="Bonusauszahlungen" sub="Prämien & Sonderzahlungen" />
      <ListCard rows={BONUSES} cols={[
        { key: 'name', title: 'Mitarbeiter', w: '1.4fr', render: r => <div><div className="font-semibold truncate">{r.name}</div><div className="text-xs text-muted font-mono">{r.dn}</div></div> },
        { key: 'reason', title: 'Grund', w: '2fr', render: r => <span className="text-muted truncate">{r.reason}</span> },
        { key: 'amount', title: 'Betrag', render: r => <span className="font-bold">${r.amount.toLocaleString('de-DE')}</span> },
        { key: 'status', title: 'Status', render: r => <SimpleStatusBadge label={r.status} color={STATE_COLOR[r.status]} /> },
      ]} />
    </div>
  );
}

// ---- Dienstzeiten ----
function Dienstzeiten() {
  return (
    <div>
      <PageHead title="Dienstzeiten" sub="Erfasste Schichten & Freigaben" />
      <ListCard rows={SHIFTS} cols={[
        { key: 'name', title: 'Mitarbeiter', w: '1.5fr', render: r => <div><div className="font-semibold truncate">{r.name}</div><div className="text-xs text-muted font-mono">{r.dn}</div></div> },
        { key: 'date', title: 'Datum', render: r => <span className="text-muted">{r.date}</span> },
        { key: 'time', title: 'Von – Bis', render: r => <span className="text-muted font-mono">{r.start}–{r.end}</span> },
        { key: 'dur', title: 'Dauer', render: r => <span className="font-bold">{r.dur}</span> },
        { key: 'status', title: 'Status', render: r => <SimpleStatusBadge label={r.status} color={STATE_COLOR[r.status]} /> },
      ]} />
    </div>
  );
}

// ---- Verfügbarkeit ----
function Verfuegbarkeit() {
  const days = ['Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa', 'So'];
  const grid = { 'T. Banks': [1,1,1,0,1,1,0], 'L. Brooks': [1,1,0,1,1,0,1], 'M. Cordova': [0,1,1,1,1,1,0], 'N. Khan': [1,0,1,1,0,1,1], 'C. Mendes': [1,1,1,0,0,1,1] };
  return (
    <div>
      <PageHead title="Verfügbarkeit" sub="Wochenübersicht der Diensttage" />
      <Card className="p-6 overflow-x-auto">
        <table className="w-full min-w-[480px]">
          <thead><tr><th className="text-left text-[11px] uplabel pb-3">Mitarbeiter</th>{days.map(d => <th key={d} className="text-[11px] uplabel pb-3 px-2">{d}</th>)}</tr></thead>
          <tbody>
            {Object.entries(grid).map(([name, arr]) => (
              <tr key={name} className="border-t border-line/50"><td className="py-2.5 text-sm font-semibold">{name}</td>
                {arr.map((v, i) => <td key={i} className="py-2.5 px-2 text-center"><span className="inline-grid place-items-center h-7 w-7 rounded-md mx-auto" style={{ background: v ? '#22C55E1f' : 'var(--c-border)', color: v ? '#22C55E' : 'var(--c-muted)' }}><Icon name={v ? 'Check' : 'X'} size={14} /></span></td>)}
              </tr>
            ))}
          </tbody>
        </table>
      </Card>
    </div>
  );
}

// ---- Verknüpfungen ----
function Verknuepfungen() {
  const links = [
    { a: 'Anton Reeves', b: 'Familie Delgado', rel: 'Notfallkontakt', icon: 'Link2' },
    { a: 'Grace Albright', b: 'Iris Novak', rel: 'Angehörige (Schwester)', icon: 'Users' },
  ];
  return (
    <div>
      <PageHead title="Verknüpfungen" sub="Verbindungen zwischen Akten & Personen" />
      <div className="flex flex-col gap-3">
        {links.map((l, i) => (
          <Card key={i} className="p-5 flex items-center gap-4 flex-wrap">
            <div className="grid place-items-center h-10 w-10 rounded-md bg-[var(--c-accent-soft)] text-accent shrink-0"><Icon name={l.icon} size={20} /></div>
            <span className="font-bold">{l.a}</span>
            <Icon name="ArrowLeftRight" size={16} className="text-muted" />
            <span className="font-bold">{l.b}</span>
            <span className="ml-auto rounded px-2 py-1 text-[12px] bg-bg/60 border border-line text-muted">{l.rel}</span>
          </Card>
        ))}
      </div>
    </div>
  );
}

// ---- Boards & Teams ----
function Boards() {
  return (
    <div>
      <PageHead title="Boards & Teams" sub="Arbeitsgruppen der Behörde" />
      <div className="grid md:grid-cols-2 gap-4">
        {BOARDS.map(b => (
          <Card key={b.name} className="p-5 hover:border-accent/40 transition-colors">
            <div className="flex items-center justify-between">
              <div className="flex items-center gap-2.5"><span className="h-3 w-3 rounded-full" style={{ background: b.color }} /><h2 className="font-bold">{b.name}</h2></div>
              <span className="text-[12px] text-muted flex items-center gap-1"><Icon name="Users" size={13} /> {b.count}</span>
            </div>
            <p className="mt-2 text-sm text-muted">{b.desc}</p>
          </Card>
        ))}
      </div>
    </div>
  );
}

// ---- Personensuche (Cognate) ----
function VersicherungsSuche() {
  const [q, setQ] = useState('');
  const res = COGNATE_AKTEN.filter(v => q === '' || v.name.toLowerCase().includes(q.toLowerCase()) || v.id.toLowerCase().includes(q.toLowerCase()));
  return (
    <div>
      <PageHead title="Personensuche" sub="Schnellsuche über alle Cognate-Akten" />
      <div className="relative mb-6 max-w-xl">
        <Icon name="Search" size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-muted" />
        <input value={q} onChange={e => setQ(e.target.value)} placeholder="Name oder Aktennummer …" className="w-full h-11 rounded-md bg-card border border-line pl-9 pr-3 text-sm outline-none focus:border-accent" autoFocus />
      </div>
      <ListCard rows={res} cols={[
        { key: 'id', title: 'Akte', render: r => <span className="font-mono text-muted">{r.id}</span> },
        { key: 'name', title: 'Person', w: '1.6fr', render: r => <span className="font-semibold truncate">{r.name}</span> },
        { key: 'gebdatum', title: 'Geboren', render: r => <span className="text-muted">{r.gebdatum}</span> },
        { key: 'adresse', title: 'Adresse', w: '1.4fr', render: r => <span className="text-muted truncate">{r.adresse}</span> },
        { key: 'status', title: 'Status', render: r => <SimpleStatusBadge label={AKTE_STATUS[r.status].label} color={AKTE_STATUS[r.status].color} /> },
      ]} />
    </div>
  );
}

// ---- News / Bekanntmachungen ----
function NewsVerwaltung() {
  const [rows, setRows] = useState([]);
  const [loading, setLoading] = useState(true);
  const [err, setErr] = useState('');
  const [edit, setEdit] = useState(null);
  const [saving, setSaving] = useState(false);
  const empty = { title: '', body: '', tag: '', is_featured: false, is_public: true, image_url: '' };

  const load = async () => {
    setLoading(true);
    setErr('');
    try {
      const data = await window.LSPD.loadNews();
      setRows(data.news || []);
    } catch (e) {
      setErr(e.message || 'News konnten nicht geladen werden.');
    } finally {
      setLoading(false);
    }
  };

  React.useEffect(() => { load(); }, []);

  const save = async () => {
    if (!edit?.title?.trim() || !edit?.body?.trim()) return;
    setSaving(true);
    setErr('');
    try {
      if (edit.id) await window.LSPD.updateNews(edit.id, edit);
      else await window.LSPD.createNews(edit);
      setEdit(null);
      await load();
    } catch (e) {
      setErr(e.message || 'Speichern fehlgeschlagen.');
    } finally {
      setSaving(false);
    }
  };

  const remove = async (id) => {
    if (!confirm('Bekanntmachung wirklich löschen?')) return;
    try {
      await window.LSPD.deleteNews(id);
      await load();
    } catch (e) {
      setErr(e.message || 'Löschen fehlgeschlagen.');
    }
  };

  return (
    <div>
      <PageHead title="News & Bekanntmachungen" sub="Öffentliche Mitteilungen für die Startseite">
        <Btn icon="Plus" onClick={() => setEdit({ ...empty })}>Neue Bekanntmachung</Btn>
      </PageHead>
      {err && <p className="mb-4 text-sm text-danger">{err}</p>}
      {loading ? (
        <Card className="p-10 text-center text-muted">Wird geladen …</Card>
      ) : rows.length === 0 ? (
        <Card className="p-10 text-center text-muted">Noch keine Bekanntmachungen. Erstelle die erste Meldung für die Startseite.</Card>
      ) : (
        <Card className="overflow-hidden">
          {rows.map((n) => (
            <div key={n.id} className="flex flex-col sm:flex-row sm:items-center gap-3 px-4 py-4 border-b border-line/60 last:border-0 hover:bg-white/[.02]">
              <div className="flex-1 min-w-0">
                <div className="flex flex-wrap items-center gap-2">
                  {n.is_featured ? <span className="uplabel text-[10px] px-2 py-0.5 rounded bg-accent text-white">FEATURED</span> : null}
                  {n.tag ? <span className="uplabel text-[10px] px-2 py-0.5 rounded border border-line">{n.tag}</span> : null}
                  {!n.is_public && <span className="text-[10px] text-muted">Entwurf</span>}
                </div>
                <div className="font-bold truncate mt-1">{n.title}</div>
                <div className="text-xs text-muted mt-0.5">{n.published_at ? new Date(n.published_at).toLocaleString('de-DE') : '—'}</div>
              </div>
              <div className="flex gap-2 shrink-0">
                <Btn variant="outline" size="sm" onClick={() => setEdit({ ...n, is_featured: !!n.is_featured, is_public: n.is_public !== 0 })}>Bearbeiten</Btn>
                <Btn variant="ghost" size="sm" onClick={() => remove(n.id)}>Löschen</Btn>
              </div>
            </div>
          ))}
        </Card>
      )}

      <Modal open={!!edit} onClose={() => setEdit(null)} title={edit?.id ? 'Bekanntmachung bearbeiten' : 'Neue Bekanntmachung'} width="max-w-2xl">
        {edit && (
          <div className="flex flex-col gap-4">
            <Field label="Titel" required><TextInput value={edit.title} onChange={e => setEdit(s => ({ ...s, title: e.target.value }))} placeholder="z. B. Änderung der Einsatzprotokolle" /></Field>
            <Field label="Text" required><TextArea rows={6} value={edit.body} onChange={e => setEdit(s => ({ ...s, body: e.target.value }))} placeholder="Vollständiger Bekanntmachungstext …" /></Field>
            <div className="grid sm:grid-cols-2 gap-4">
              <Field label="Tag (optional)" hint="z. B. WICHTIG, INTERN"><TextInput value={edit.tag || ''} onChange={e => setEdit(s => ({ ...s, tag: e.target.value }))} /></Field>
              <Field label="Bild-URL (optional)"><TextInput value={edit.image_url || ''} onChange={e => setEdit(s => ({ ...s, image_url: e.target.value }))} /></Field>
            </div>
            <div className="flex flex-wrap gap-4 text-sm">
              <label className="flex items-center gap-2 cursor-pointer"><input type="checkbox" checked={!!edit.is_featured} onChange={e => setEdit(s => ({ ...s, is_featured: e.target.checked }))} /> Als Hauptmeldung hervorheben</label>
              <label className="flex items-center gap-2 cursor-pointer"><input type="checkbox" checked={edit.is_public !== false} onChange={e => setEdit(s => ({ ...s, is_public: e.target.checked }))} /> Öffentlich auf Startseite</label>
            </div>
            <div className="flex justify-end gap-2 pt-2">
              <Btn variant="ghost" onClick={() => setEdit(null)}>Abbrechen</Btn>
              <Btn icon="Save" disabled={saving || !edit.title?.trim() || !edit.body?.trim()} onClick={save}>{saving ? 'Speichern …' : 'Speichern'}</Btn>
            </div>
          </div>
        )}
      </Modal>
    </div>
  );
}

Object.assign(window, { WikiPage, Logbuch, DnaTest, Abteilungen, Urlaub, Bonus, Dienstzeiten, Verfuegbarkeit, Verknuepfungen, Boards, VersicherungsSuche, SimpleStatusBadge, NewsVerwaltung });