// ============================================================
// LSPD — Cognate-Aktensystem (Personenakten · Fahndung · Vorlagen)
// ============================================================

function AkteStatusBadge({ status, className = '' }) {
  const s = AKTE_STATUS[status] || { label: status, color: '#8899AA' };
  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 ${className}`}
      style={{ color: s.color, background: `${s.color}1f`, border: `1px solid ${s.color}40` }}>
      <span className="h-1.5 w-1.5 rounded-full" style={{ background: s.color }} />{s.label}
    </span>
  );
}

function ageFrom(gebdatum) {
  const [d, m, y] = (gebdatum || '01.01.2000').split('.').map(Number);
  const today = new Date(2026, 5, 7);
  let a = today.getFullYear() - y;
  if (today.getMonth() + 1 < m || (today.getMonth() + 1 === m && today.getDate() < d)) a--;
  return a;
}

function FlagBadges({ flags }) {
  const active = AKTE_FLAGS.filter(f => flags && flags[f.id]);
  if (active.length === 0) return null;
  return (
    <div className="flex flex-wrap gap-1.5">
      {active.map(f => (
        <span key={f.id} className="inline-flex items-center gap-1 whitespace-nowrap rounded px-2 py-0.5 text-[11px] font-bold uppercase tracking-wide"
          style={{ color: f.color, background: `${f.color}1f`, border: `1px solid ${f.color}40` }}>
          <Icon name={f.icon} size={12} /> {f.label}
        </span>
      ))}
    </div>
  );
}

function Section({ title, icon, children, action }) {
  return (
    <div className="rounded-lg border border-line bg-card overflow-hidden">
      <div className="flex items-center justify-between gap-2 px-4 h-11 border-b border-line bg-bg2">
        <div className="flex items-center gap-2 uplabel text-[11px]">{icon && <Icon name={icon} size={13} />} {title}</div>
        {action}
      </div>
      <div className="p-4">{children}</div>
    </div>
  );
}

function DataRow({ icon, value, muted }) {
  return (
    <div className="flex items-center gap-2.5 rounded-md border border-line bg-bg/40 px-3 h-10">
      {icon && <Icon name={icon} size={15} className="text-muted shrink-0" />}
      <span className={`text-sm flex-1 min-w-0 truncate ${muted ? 'text-muted italic' : 'font-medium'}`}>{value}</span>
    </div>
  );
}

function chargeTotals(straftaten) {
  const fine = (straftaten || []).reduce((a, s) => a + (s.fine || 0), 0);
  const jail = (straftaten || []).reduce((a, s) => a + (s.jail || 0), 0);
  return { fine, jail };
}

function activeStaffList(staff, fallbackMembers) {
  const list = (staff && staff.length) ? staff : (fallbackMembers || MEMBERS).map(m => ({
    id: m.id, name: m.name, dn: m.dn, rank: RANKS[m.rank]?.label || m.rank,
  }));
  return list.filter(s => !s.status || s.status === 'AKTIV');
}

function EntryStammView({ felder, staff }) {
  const f = felder || {};
  const beteiligte = Array.isArray(f.beteiligte) ? f.beteiligte : [];
  return (
    <div className="grid sm:grid-cols-2 gap-3 rounded-md border border-line bg-bg/30 p-3">
      <div className="sm:col-span-2">
        <div className="uplabel text-[10px] mb-1">Aktenzeichen / Titel</div>
        <div className="text-sm font-mono font-semibold">{f.aktenzeichen || '—'}</div>
      </div>
      <div><div className="uplabel text-[10px] mb-1">Datum</div><div className="text-sm">{f.datum || '—'}</div></div>
      <div><div className="uplabel text-[10px] mb-1">Uhrzeit</div><div className="text-sm">{f.uhrzeit || '—'}</div></div>
      <div className="sm:col-span-2"><div className="uplabel text-[10px] mb-1">Ort</div><div className="text-sm">{f.ort || '—'}</div></div>
      <div><div className="uplabel text-[10px] mb-1">Bearbeitender Beamter</div><div className="text-sm">{resolveStaffRef(f.bearbeitender, staff)}</div></div>
      <div>
        <div className="uplabel text-[10px] mb-1">Beteiligte Beamte</div>
        <div className="text-sm">{beteiligte.length ? beteiligte.map(id => resolveStaffRef(id, staff)).join(', ') : '—'}</div>
      </div>
    </div>
  );
}

// ---- Akteneintrag (aufklappbar, Vorlagen-basiert) ----
function AkteEintrag({ e, onDelete, staff = [] }) {
  const [open, setOpen] = useState(true);
  const v = vorlageById(e.vorlage);
  const { fine, jail } = chargeTotals(e.straftaten);
  const f = e.felder || {};
  const aktiv = f.aktiv || [];
  const abschnitte = f.abschnitte || {};
  const title = f.aktenzeichen || e.id;
  return (
    <div className="rounded-lg border border-line overflow-hidden">
      <button onClick={() => setOpen(o => !o)} className="w-full flex items-center gap-2 px-4 h-12 bg-bg2 hover:bg-white/[.03] transition-colors text-left">
        <Icon name="ChevronDown" size={16} className={`text-muted transition-transform ${open ? '' : '-rotate-90'}`} />
        <span className="grid place-items-center h-6 w-6 rounded shrink-0" style={{ background: `${v.color}1f`, color: v.color }}><Icon name={v.icon} size={14} /></span>
        <span className="text-[13px] font-semibold">{v.name}</span>
        <span className="text-[12px] text-muted hidden sm:inline font-mono">· {title}</span>
        <span className="text-[12px] text-muted ml-auto hidden md:inline">{e.ersteller} · {e.erstellt}</span>
        <span className="rounded px-2 py-0.5 text-[10px] font-bold uppercase tracking-wide shrink-0"
          style={e.abgeschlossen ? { color: '#22C55E', background: '#22C55E1f', border: '1px solid #22C55E40' } : { color: '#F59E0B', background: '#F59E0B1f', border: '1px solid #F59E0B40' }}>
          {e.abgeschlossen ? 'Abgeschlossen' : 'Offen'}
        </span>
      </button>
      {open && (
        <div className="p-4 flex flex-col gap-4">
          <div className="flex gap-2">
            <Btn variant="outline" size="sm" icon="Pencil">Bearbeiten</Btn>
            <Btn variant="ghost" size="sm" icon="Trash2" className="!text-danger" onClick={onDelete}>Löschen</Btn>
          </div>
          <EntryStammView felder={f} staff={staff} />
          {(v.extras || []).map(ex => (
            <div key={ex.key}>
              <div className="uplabel text-[10px] mb-1">{ex.label}</div>
              <div className="text-sm">{ex.type === 'staff' ? resolveStaffRef(f[ex.key], staff) : (f[ex.key] || '—')}</div>
            </div>
          ))}
          <div className="flex flex-col gap-3">
            {(v.abschnitte || []).filter(a => aktiv.includes(a.key)).map(a => (
              <div key={a.key}>
                <div className="uplabel text-[10px] mb-1">{a.label}</div>
                <div className={`text-sm leading-relaxed ${abschnitte[a.key] ? '' : 'text-muted/50 italic'}`}>{abschnitte[a.key] || '—'}</div>
              </div>
            ))}
            {aktiv.length === 0 && !v.felder?.length && <div className="text-sm text-muted italic">Keine Abschnitte ausgefüllt.</div>}
            {v.felder?.map(fl => (
              <div key={fl.key}>
                <div className="uplabel text-[10px] mb-1">{fl.label}</div>
                <div className={`text-sm ${f[fl.key] ? '' : 'text-muted/50 italic'}`}>{f[fl.key] || '—'}</div>
              </div>
            ))}
          </div>
          {v.straftaten && (
            <div className="rounded-md border border-line overflow-hidden">
              <div className="px-3 h-9 flex items-center uplabel text-[10px] border-b border-line bg-bg/40">Straftaten</div>
              {(e.straftaten || []).length === 0 && <div className="p-3 text-sm text-muted">Keine Straftaten erfasst.</div>}
              {(e.straftaten || []).map((s, i) => (
                <div key={i} className="flex items-center gap-3 px-3 py-2 border-b border-line/50 last:border-0 text-sm">
                  <span className="font-mono text-danger text-[12px] w-20 shrink-0">{s.para}</span>
                  <span className="flex-1 truncate">{s.name}</span>
                  <span className="text-muted text-[12px]">${s.fine.toLocaleString('de-DE')}</span>
                  <span className="text-muted text-[12px] w-16 text-right">{s.jail} Mon.</span>
                </div>
              ))}
              {(e.straftaten || []).length > 0 && (
                <div className="flex items-center gap-3 px-3 py-2 bg-bg/40 text-sm font-bold">
                  <span className="flex-1">Gesamt</span>
                  <span className="text-[12px]">${fine.toLocaleString('de-DE')}</span>
                  <span className="text-[12px] w-16 text-right">{jail} Mon.</span>
                </div>
              )}
            </div>
          )}
        </div>
      )}
    </div>
  );
}

// ---- Detailansicht ----
function AkteDetail({ akte, onBack, onDelete, onUpdate, onSync, apiLive }) {
  const [addOpen, setAddOpen] = useState(false);
  const [syncing, setSyncing] = useState(false);
  const p = akte;
  const gesucht = p.status === 'GESUCHT';

  const addEntry = async (entry) => {
    let saved = entry;
    if (apiLive && window.LSPD && p.dbId) {
      try {
        const res = await window.LSPD.addAkteEntry(p.dbId, entry);
        saved = res.entry || entry;
      } catch (err) {
        alert(err.message || 'Eintrag konnte nicht gespeichert werden');
        return;
      }
    }
    const next = { ...p, akteneintraege: [saved, ...p.akteneintraege] };
    const v = vorlageById(saved.vorlage);
    if (v.setztGesucht) {
      next.status = 'GESUCHT';
      next.fahndungsgrund = saved.felder?.abschnitte?.grund || saved.felder?.grund || p.fahndungsgrund;
    }
    onUpdate(next);
    setAddOpen(false);
  };
  const delEntry = async (entry) => {
    if (apiLive && window.LSPD && p.dbId && entry.dbId) {
      try {
        await window.LSPD.deleteAkteEntry(p.dbId, entry.dbId);
      } catch (err) {
        alert(err.message || 'Löschen fehlgeschlagen');
        return;
      }
    }
    onUpdate({ ...p, akteneintraege: p.akteneintraege.filter(e => e.id !== entry.id && e.dbId !== entry.dbId) });
  };
  const toggleFahndung = () => {
    if (gesucht) onUpdate({ ...p, status: 'FREI', fahndungsgrund: '' });
    else onUpdate({ ...p, status: 'GESUCHT', fahndungsgrund: p.fahndungsgrund || 'Fahndung durch Beamten gesetzt' });
  };

  return (
    <div>
      <button onClick={onBack} className="text-sm text-muted hover:text-ink flex items-center gap-1.5 mb-4"><Icon name="ArrowLeft" size={16} /> Zurück zur Aktenübersicht</button>

      {/* GESUCHT-Banner */}
      {gesucht && (
        <div className="mb-4 rounded-lg overflow-hidden border border-danger" style={{ background: 'linear-gradient(100deg, rgba(229,56,78,.22), rgba(229,56,78,.06))' }}>
          <div className="flex items-center gap-3 px-5 py-3">
            <div className="grid place-items-center h-10 w-10 rounded-md bg-danger text-white shrink-0" style={{ animation: 'pulse-ring 2.4s infinite' }}><Icon name="Siren" size={22} /></div>
            <div className="min-w-0">
              <div className="text-lg font-black tracking-wide text-danger">GESUCHT</div>
              <div className="text-sm text-ink/80 truncate">{p.fahndungsgrund || 'Zur Fahndung ausgeschrieben'}</div>
            </div>
          </div>
        </div>
      )}

      {/* Kopf */}
      <Card className="p-5 mb-5">
        <div className="flex flex-wrap items-center justify-between gap-4">
          <div className="flex items-center gap-4 min-w-0">
            <div className="grid place-items-center h-16 w-16 rounded-lg shrink-0" style={{ background: `${AKTE_STATUS[p.status].color}1f`, color: AKTE_STATUS[p.status].color }}>
              <Icon name="UserRound" size={30} />
            </div>
            <div className="min-w-0 flex flex-col gap-1.5">
              <div className="flex items-center gap-2.5 flex-wrap">
                <h1 className="text-2xl font-extrabold tracking-tight">{p.name}</h1>
                <AkteStatusBadge status={p.status} />
              </div>
              <div className="text-sm text-muted font-mono">{p.id} · {p.geschlecht} · {ageFrom(p.gebdatum)} Jahre</div>
              <FlagBadges flags={p.flags} />
            </div>
          </div>
          <div className="flex flex-wrap gap-2">
            <Btn variant="outline" icon="Pencil" size="sm" className="!border-warning/60 !text-warning">Bearbeiten</Btn>
            <Btn variant="outline" icon="Trash2" size="sm" className="!border-danger/60 !text-danger" onClick={onDelete}>Löschen</Btn>
            {onSync && (
              <Btn variant="outline" icon="RefreshCw" size="sm" disabled={syncing} onClick={async () => {
                setSyncing(true);
                try { await onSync(p); } finally { setSyncing(false); }
              }}>{syncing ? 'Sync …' : 'MLV-Sync'}</Btn>
            )}
            <Btn variant="outline" icon={gesucht ? 'ShieldCheck' : 'Siren'} size="sm" className={gesucht ? '!border-success/60 !text-success' : '!border-danger/60 !text-danger'} onClick={toggleFahndung}>{gesucht ? 'Fahndung aufheben' : 'Als GESUCHT melden'}</Btn>
            <Btn icon="FilePlus2" size="sm" onClick={() => setAddOpen(true)}>Akteneintrag</Btn>
          </div>
        </div>
      </Card>

      {/* Stammdaten */}
      <div className="grid lg:grid-cols-2 gap-5">
        {/* Links */}
        <div className="flex flex-col gap-5">
          <Section title="Personalien" icon="User">
            <div className="flex flex-col gap-2">
              <DataRow icon="User" value={p.name} />
              <DataRow icon="PersonStanding" value={p.geschlecht === 'M' ? 'Männlich (M)' : p.geschlecht === 'W' ? 'Weiblich (W)' : p.geschlecht} />
              <DataRow icon="Calendar" value={`${p.gebdatum}  ·  ${ageFrom(p.gebdatum)} Jahre`} />
              <DataRow icon="Phone" value={p.tel} />
              <DataRow icon="Home" value={p.adresse} />
            </div>
          </Section>
          <Section title="Personenbeschreibung" icon="ScanFace">
            <div className="grid grid-cols-2 gap-2">
              <DataRow icon="MoveVertical" value={`${p.groesse} cm`} />
              <DataRow icon="Eye" value={p.augenfarbe} />
              <DataRow icon="Scissors" value={p.haarfarbe} />
              <DataRow icon="Droplet" value={p.blutgruppe || '—'} />
            </div>
          </Section>
          <Section title="Lizenzen & Führerscheine" icon="IdCard">
            <div className="flex flex-wrap gap-1.5">
              {p.lizenzen.length === 0 && <span className="text-sm text-muted italic">Keine hinterlegt</span>}
              {p.lizenzen.map(l => <span key={l} className="rounded px-2 py-1 text-[12px] bg-bg/60 border border-line">{l}</span>)}
            </div>
          </Section>
          <Section title="Personenhinweise" icon="ShieldAlert">
            <div className="flex flex-col gap-2.5">
              {AKTE_FLAGS.map(f => {
                const on = p.flags && p.flags[f.id];
                return (
                  <div key={f.id} className="flex items-center gap-2.5">
                    <span className="grid place-items-center h-5 w-5 rounded-sm border" style={{ borderColor: on ? f.color : 'var(--c-border)', background: on ? f.color : 'transparent' }}>
                      {on && <Icon name="Check" size={13} className="text-white" strokeWidth={3} />}
                    </span>
                    <span className={`text-sm font-semibold ${on ? '' : 'text-muted'}`} style={on ? { color: f.color } : {}}>{f.label}</span>
                  </div>
                );
              })}
            </div>
          </Section>
          <Section title="Notizen" icon="StickyNote">
            <p className={`text-sm ${p.notizen ? '' : 'text-muted italic'}`}>{p.notizen || 'Keine Angaben'}</p>
          </Section>
        </div>

        {/* Rechts */}
        <div className="flex flex-col gap-5">
          <Section title="Steckbrief / Foto" icon="Image"><ImgPlaceholder label="Personenfoto" className="aspect-[4/3] w-full" /></Section>
          <Section title="Strafregister" icon="Gavel">
            {p.vorstrafen.length === 0 && <div className="text-sm text-muted italic">Keine Vorstrafen erfasst.</div>}
            <div className="flex flex-col">
              {p.vorstrafen.map((s, i) => (
                <div key={i} className="flex items-start gap-3 py-2.5 border-b border-line/50 last:border-0">
                  <span className="font-mono text-danger text-[12px] w-20 shrink-0 mt-0.5">{s.para}</span>
                  <div className="min-w-0 flex-1">
                    <div className="text-sm font-semibold truncate">{s.delikt}</div>
                    <div className="text-[12px] text-muted">{s.datum} · {s.beamter}</div>
                  </div>
                  <span className="text-[12px] font-bold text-warning whitespace-nowrap">{s.strafe}</span>
                </div>
              ))}
            </div>
          </Section>
          <Section title="Registrierte Fahrzeuge" icon="Car" action={<span className="text-[10px] uplabel flex items-center gap-1"><Icon name="Link2" size={11} /> aus Fahrzeugregister</span>}>
            {(() => {
              const reg = fahrzeugeFuerHalter(p.name);
              if (reg.length === 0) return <div className="text-sm text-muted italic">Keine Fahrzeuge auf diese Person zugelassen.</div>;
              return (
                <div className="flex flex-col gap-2">
                  {reg.map((f, i) => {
                    const q = FAHRZEUG_QUELLEN[f.quelle] || FAHRZEUG_QUELLEN.lspd;
                    const st = FAHRZEUG_STATUS[f.status] || FAHRZEUG_STATUS.ANGEMELDET;
                    return (
                      <div key={i} className="flex items-center gap-3 rounded-md border border-line bg-bg/40 px-3 h-11">
                        <Icon name="Car" size={16} className="shrink-0" style={{ color: st.color }} />
                        <span className="font-mono text-[13px] font-bold">{f.kennzeichen}</span>
                        <span className="text-sm truncate">{f.modell}</span>
                        <span className="ml-auto flex items-center gap-1.5 shrink-0">
                          <span className="text-[12px] text-muted hidden sm:inline">{f.farbe}</span>
                          <span title={q.label} className="grid place-items-center h-5 w-5 rounded" style={{ background: `${q.color}1f`, color: q.color }}><Icon name={q.icon} size={12} /></span>
                        </span>
                      </div>
                    );
                  })}
                </div>
              );
            })()}
          </Section>
          <Section title="Registrierte Waffen" icon="Crosshair">
            {p.waffen.length === 0 && <div className="text-sm text-muted italic">Keine Waffen registriert.</div>}
            <div className="flex flex-col gap-2">
              {p.waffen.map((w, i) => (
                <div key={i} className="flex items-center gap-3 rounded-md border border-line bg-bg/40 px-3 h-11">
                  <Icon name="Crosshair" size={16} className="text-muted shrink-0" />
                  <span className="font-mono text-[13px]">{w.seriennr}</span>
                  <span className="text-sm truncate">{w.typ}</span>
                  <span className="ml-auto text-[11px] font-bold" style={{ color: /illegal/i.test(w.status) ? '#E5384E' : '#22C55E' }}>{w.status}</span>
                </div>
              ))}
            </div>
          </Section>
        </div>
      </div>

      {/* Akteneinträge */}
      <div className="mt-8">
        <div className="flex items-center justify-between mb-4">
          <div>
            <h2 className="text-lg font-bold">Akteneinträge</h2>
            <p className="text-sm text-muted mt-0.5">{p.akteneintraege.length} Eintrag(e) · Cognate-Vorlagen</p>
          </div>
          <Btn icon="FilePlus2" size="sm" onClick={() => setAddOpen(true)}>Akteneintrag hinzufügen</Btn>
        </div>
        <div className="flex flex-col gap-3">
          {p.akteneintraege.map(e => <AkteEintrag key={e.dbId || e.id} e={e} onDelete={() => delEntry(e)} />)}
          {p.akteneintraege.length === 0 && <div className="rounded-lg border border-dashed border-line p-8 text-center text-sm text-muted">Noch keine Einträge dokumentiert.</div>}
        </div>
      </div>

      <EintragModal open={addOpen} onClose={() => setAddOpen(false)} onSave={addEntry} />
    </div>
  );
}

// ---- Akteneintrag-Formular (Vorlage → Stammdaten → Häkchen-Abschnitte) ----
function EintragModal({ open, onClose, onSave }) {
  const [vid, setVid] = useState(null);
  const [felder, setFelder] = useState({});
  const [straftaten, setStraftaten] = useState([]);
  const [done, setDone] = useState(false);
  const [staff, setStaff] = useState([]);
  const [saving, setSaving] = useState(false);

  useEffect(() => {
    if (!open) return;
    setVid(null);
    setFelder({});
    setStraftaten([]);
    setDone(false);
    (async () => {
      try {
        if (window.LSPD?.loadStaff) {
          const data = await window.LSPD.loadStaff({ perPage: 100 });
          setStaff(activeStaffList(data.staff));
        } else {
          setStaff(activeStaffList([]));
        }
      } catch {
        setStaff(activeStaffList([]));
      }
    })();
  }, [open]);

  const pickVorlage = (id) => {
    const stamm = entryStammDefaults(id);
    const me = window.LSPD?.user;
    if (me?.id) stamm.bearbeitender = String(me.id);
    setVid(id);
    setFelder(stamm);
    setStraftaten([]);
  };

  const v = vid ? vorlageById(vid) : null;
  const setF = (k, val) => setFelder(s => ({ ...s, [k]: val }));
  const setAbschnitt = (key, val) => setFelder(s => ({ ...s, abschnitte: { ...(s.abschnitte || {}), [key]: val } }));
  const toggleAktiv = (key) => setFelder(s => {
    const aktiv = s.aktiv || [];
    return { ...s, aktiv: aktiv.includes(key) ? aktiv.filter(k => k !== key) : [...aktiv, key] };
  });
  const toggleBeteiligter = (id) => setFelder(s => {
    const list = Array.isArray(s.beteiligte) ? s.beteiligte.map(String) : [];
    const sid = String(id);
    return { ...s, beteiligte: list.includes(sid) ? list.filter(x => x !== sid) : [...list, sid] };
  });
  const toggleCharge = (c) => setStraftaten(s => s.find(x => x.para === c.para && x.name === c.name) ? s.filter(x => !(x.para === c.para && x.name === c.name)) : [...s, c]);
  const { fine, jail } = chargeTotals(straftaten);

  const refreshAz = (datum) => {
    if (!vid) return;
    setF('aktenzeichen', buildAktenzeichen(vid, datum || felder.datum));
  };

  const save = async () => {
    if (!vid || saving) return;
    setSaving(true);
    try {
      const bearbeiter = resolveStaffRef(felder.bearbeitender, staff);
      const id = felder.aktenzeichen || buildAktenzeichen(vid, felder.datum);
      const erstellt = `${felder.datum || todayGerman()} ${felder.uhrzeit || nowTime()}`;
      await onSave({
        id,
        vorlage: vid,
        ersteller: bearbeiter !== '—' ? bearbeiter : (window.LSPD?.user?.ic_name || 'LSPD'),
        erstellt,
        abgeschlossen: done,
        felder,
        straftaten,
      });
    } finally {
      setSaving(false);
    }
  };

  return (
    <Modal open={open} onClose={onClose} title={v ? `${v.name} — Akteneintrag` : 'Vorlage wählen'} width="max-w-3xl"
      footer={v ? <><Btn variant="ghost" onClick={() => setVid(null)} icon="ArrowLeft">Zurück</Btn><Btn icon="Check" onClick={save} disabled={saving}>{saving ? 'Speichert …' : 'Speichern'}</Btn></> : null}>
      {!v ? (
        <div className="grid sm:grid-cols-2 gap-3">
          {VORLAGEN.map(t => (
            <button key={t.id} onClick={() => pickVorlage(t.id)} className="text-left rounded-lg border border-line p-4 hover:border-accent/50 hover:-translate-y-0.5 transition-all">
              <div className="flex items-center gap-2.5">
                <span className="grid place-items-center h-9 w-9 rounded-md shrink-0" style={{ background: `${t.color}1f`, color: t.color }}><Icon name={t.icon} size={18} /></span>
                <span className="font-bold">{t.name}</span>
              </div>
              <p className="mt-2 text-[12px] text-muted leading-relaxed">{t.beschreibung}</p>
            </button>
          ))}
        </div>
      ) : (
        <div className="flex flex-col gap-4 max-h-[68vh] overflow-y-auto pr-1">
          {v.setztGesucht && <div className="flex items-center gap-2 rounded-md border border-danger/40 px-3 py-2 text-[13px] text-danger" style={{ background: 'rgba(229,56,78,.12)' }}><Icon name="Siren" size={15} /> Setzt die Person auf <b>GESUCHT</b>.</div>}

          <div className="rounded-md border border-accent/30 bg-[var(--c-accent-soft)] px-3 py-2 text-[12px] text-muted">
            <b className="text-ink">Schritt 1:</b> Stammdaten ausfüllen · <b className="text-ink">Schritt 2:</b> Abschnitte anklicken · Text eintragen
          </div>

          <Field label="Aktenzeichen / Titel">
            <div className="flex gap-2">
              <TextInput className="font-mono" value={felder.aktenzeichen || ''} onChange={e => setF('aktenzeichen', e.target.value)} />
              <Btn variant="outline" size="sm" onClick={() => refreshAz()}>Neu</Btn>
            </div>
          </Field>
          <div className="grid sm:grid-cols-3 gap-3">
            <Field label="Datum"><TextInput value={felder.datum || ''} onChange={e => { setF('datum', e.target.value); refreshAz(e.target.value); }} placeholder="TT.MM.JJJJ" /></Field>
            <Field label="Uhrzeit"><TextInput value={felder.uhrzeit || ''} onChange={e => setF('uhrzeit', e.target.value)} placeholder="HH:MM" /></Field>
            <Field label="Ort"><TextInput value={felder.ort || ''} onChange={e => setF('ort', e.target.value)} placeholder="z. B. Mission Row" /></Field>
          </div>
          <Field label="Bearbeitender Beamter">
            <Select value={felder.bearbeitender || ''} onChange={e => setF('bearbeitender', e.target.value)}>
              <option value="">Beamten wählen …</option>
              {staff.map(s => <option key={s.id} value={String(s.id)}>{staffLabel(s)}</option>)}
            </Select>
          </Field>
          <div>
            <Label className="mb-2">Beteiligte Beamte</Label>
            <div className="max-h-36 overflow-y-auto rounded-md border border-line divide-y divide-line/50">
              {staff.length === 0 && <div className="p-3 text-sm text-muted">Keine Beamten geladen — bitte später erneut versuchen.</div>}
              {staff.map(s => {
                const on = (felder.beteiligte || []).map(String).includes(String(s.id));
                return (
                  <label key={s.id} className="flex items-center gap-2.5 px-3 py-2 cursor-pointer hover:bg-bg/40">
                    <span className="grid place-items-center h-4 w-4 rounded-sm border shrink-0" style={{ borderColor: on ? 'var(--c-accent)' : 'var(--c-border)', background: on ? 'var(--c-accent)' : 'transparent' }}>{on && <Icon name="Check" size={11} className="text-white" strokeWidth={3} />}</span>
                    <input type="checkbox" className="sr-only" checked={on} onChange={() => toggleBeteiligter(s.id)} />
                    <span className="text-sm">{staffLabel(s)}</span>
                  </label>
                );
              })}
            </div>
          </div>

          {(v.extras || []).map(ex => (
            <Field key={ex.key} label={ex.label}>
              {ex.type === 'staff' ? (
                <Select value={felder[ex.key] || ''} onChange={e => setF(ex.key, e.target.value)}>
                  <option value="">Beamten wählen …</option>
                  {staff.map(s => <option key={s.id} value={String(s.id)}>{staffLabel(s)}</option>)}
                </Select>
              ) : ex.type === 'select' ? (
                <Select value={felder[ex.key] || ''} onChange={e => setF(ex.key, e.target.value)}><option value="">Bitte wählen …</option>{ex.options.map(o => <option key={o}>{o}</option>)}</Select>
              ) : (
                <TextInput value={felder[ex.key] || ''} onChange={e => setF(ex.key, e.target.value)} placeholder={ex.placeholder} />
              )}
            </Field>
          ))}

          <div>
            <Label className="mb-2">Abschnitte — Häkchen setzen &amp; ausfüllen</Label>
            <div className="flex flex-col gap-3">
              {(v.abschnitte || []).map(a => {
                const on = (felder.aktiv || []).includes(a.key);
                return (
                  <div key={a.key} className={`rounded-md border p-3 transition-colors ${on ? 'border-accent/50 bg-[var(--c-accent-soft)]/40' : 'border-line'}`}>
                    <button type="button" onClick={() => toggleAktiv(a.key)} className="flex items-center gap-2.5 w-full text-left">
                      <span className="grid place-items-center h-5 w-5 rounded-sm border shrink-0" style={{ borderColor: on ? 'var(--c-accent)' : 'var(--c-border)', background: on ? 'var(--c-accent)' : 'transparent' }}>{on && <Icon name="Check" size={13} className="text-white" strokeWidth={3} />}</span>
                      <span className="text-sm font-semibold">{a.label}</span>
                    </button>
                    {on && <TextArea className="mt-3" rows={3} value={(felder.abschnitte || {})[a.key] || ''} onChange={e => setAbschnitt(a.key, e.target.value)} placeholder={`${a.label} …`} />}
                  </div>
                );
              })}
            </div>
          </div>

          {v.straftaten && (
            <div>
              <Label className="mb-2">Straftaten (Häkchen)</Label>
              <div className="grid sm:grid-cols-2 gap-2">
                {STRAFKATALOG.map(c => {
                  const on = straftaten.find(x => x.para === c.para && x.name === c.name);
                  return (
                    <button key={c.para + c.name} type="button" onClick={() => toggleCharge(c)} className={`flex items-center gap-2 rounded-md border px-3 py-2 text-left transition-all ${on ? 'border-accent bg-[var(--c-accent-soft)]' : 'border-line hover:border-muted'}`}>
                      <span className="grid place-items-center h-4 w-4 rounded-sm border shrink-0" style={{ borderColor: on ? 'var(--c-accent)' : 'var(--c-border)', background: on ? 'var(--c-accent)' : 'transparent' }}>{on && <Icon name="Check" size={11} className="text-white" strokeWidth={3} />}</span>
                      <span className="font-mono text-[11px] text-danger w-16 shrink-0">{c.para}</span>
                      <span className="text-[13px] flex-1 truncate">{c.name}</span>
                    </button>
                  );
                })}
              </div>
              {straftaten.length > 0 && (
                <div className="mt-2 flex items-center justify-end gap-4 rounded-md border border-line bg-bg/40 px-3 py-2 text-sm">
                  <span className="text-muted">Summe:</span>
                  <span className="font-bold">${fine.toLocaleString('de-DE')}</span>
                  <span className="font-bold">{jail} Monate</span>
                </div>
              )}
            </div>
          )}

          <label className="flex items-center gap-2.5 cursor-pointer" onClick={() => setDone(d => !d)}>
            <span className="grid place-items-center h-5 w-5 rounded-sm border" style={{ borderColor: done ? '#22C55E' : 'var(--c-border)', background: done ? '#22C55E' : 'transparent' }}>{done && <Icon name="Check" size={13} className="text-white" strokeWidth={3} />}</span>
            <span className="text-sm font-semibold">Eintrag abgeschlossen</span>
          </label>
        </div>
      )}
    </Modal>
  );
}

// ---- Akte anlegen (neue Person) ----
function AkteModal({ open, onClose, onSave }) {
  const empty = { name: '', geschlecht: 'M', gebdatum: '', tel: '', adresse: '', groesse: '', augenfarbe: 'Braun', haarfarbe: 'Schwarz', blutgruppe: '', lizenzen: [], notizen: '', flags: { bewaffnet: false, gang: false, flucht: false } };
  const [f, setF] = useState(empty);
  useEffect(() => { if (open) setF(empty); }, [open]);
  const setV = (k, v) => setF(s => ({ ...s, [k]: v }));
  const toggleLic = (l) => setF(s => ({ ...s, lizenzen: s.lizenzen.includes(l) ? s.lizenzen.filter(x => x !== l) : [...s.lizenzen, l] }));
  const toggleFlag = (id) => setF(s => ({ ...s, flags: { ...s.flags, [id]: !s.flags[id] } }));

  const save = () => {
    if (!f.name.trim()) return;
    onSave({
      id: 'CG-' + (10500 + Math.floor(Math.random() * 800)),
      name: f.name, geschlecht: f.geschlecht, gebdatum: f.gebdatum || '01.01.2000', tel: f.tel || '—', adresse: f.adresse || '—',
      groesse: parseInt(f.groesse) || 175, augenfarbe: f.augenfarbe, haarfarbe: f.haarfarbe, blutgruppe: f.blutgruppe,
      status: 'FREI', fahndungsgrund: '', flags: f.flags, lizenzen: f.lizenzen, vorstrafen: [], fahrzeuge: [], waffen: [],
      notizen: f.notizen, letzte: '07.06.2026', sachbearbeiter: 'Off. M. Cordova', akteneintraege: [],
    });
  };

  return (
    <Modal open={open} onClose={onClose} title="Akte anlegen" width="max-w-3xl"
      footer={<><Btn variant="ghost" onClick={onClose}>Abbrechen</Btn><Btn icon="Check" onClick={save}>Akte erstellen</Btn></>}>
      <div className="grid md:grid-cols-2 gap-x-5 gap-y-4 max-h-[70vh] overflow-y-auto pr-1">
        <Field label="Vor- und Nachname" required><TextInput value={f.name} onChange={e => setV('name', e.target.value)} placeholder="Max Mustermann" /></Field>
        <Field label="Geschlecht"><Select value={f.geschlecht} onChange={e => setV('geschlecht', e.target.value)}><option value="M">Männlich (M)</option><option value="W">Weiblich (W)</option><option value="D">Divers (D)</option></Select></Field>
        <Field label="Geburtsdatum"><TextInput value={f.gebdatum} onChange={e => setV('gebdatum', e.target.value)} placeholder="02.02.1990" /></Field>
        <Field label="Telefonnummer"><TextInput value={f.tel} onChange={e => setV('tel', e.target.value)} placeholder="555-0123" /></Field>
        <Field label="Adresse"><TextInput value={f.adresse} onChange={e => setV('adresse', e.target.value)} placeholder="Grove Street 12" /></Field>
        <Field label="Größe (cm)"><TextInput value={f.groesse} onChange={e => setV('groesse', e.target.value)} placeholder="185" /></Field>
        <Field label="Augenfarbe"><Select value={f.augenfarbe} onChange={e => setV('augenfarbe', e.target.value)}>{EYE_COLORS.map(c => <option key={c}>{c}</option>)}</Select></Field>
        <Field label="Haarfarbe"><Select value={f.haarfarbe} onChange={e => setV('haarfarbe', e.target.value)}>{HAIR_COLORS.map(c => <option key={c}>{c}</option>)}</Select></Field>
        <Field label="Blutgruppe"><Select value={f.blutgruppe} onChange={e => setV('blutgruppe', e.target.value)}>{BLOOD_TYPES.map(b => <option key={b} value={b}>{b || 'Bitte wählen …'}</option>)}</Select></Field>
        <Field label="Notizen"><TextInput value={f.notizen} onChange={e => setV('notizen', e.target.value)} placeholder="Besonderheiten …" /></Field>
        <div className="md:col-span-2">
          <Label className="mb-2">Lizenzen & Führerscheine</Label>
          <div className="flex flex-wrap gap-2">{LICENSES.map(l => <Chip key={l} active={f.lizenzen.includes(l)} onClick={() => toggleLic(l)}>{l}</Chip>)}</div>
        </div>
        <div className="md:col-span-2">
          <Label className="mb-2">Personenhinweise</Label>
          <div className="flex flex-wrap gap-3">
            {AKTE_FLAGS.map(fl => {
              const on = f.flags[fl.id];
              return (
                <button key={fl.id} onClick={() => toggleFlag(fl.id)} className="flex items-center gap-2.5 rounded-md border px-3 h-10 transition-all" style={{ borderColor: on ? fl.color : 'var(--c-border)', background: on ? `${fl.color}1a` : 'transparent' }}>
                  <span className="grid place-items-center h-5 w-5 rounded-sm border" style={{ borderColor: on ? fl.color : 'var(--c-border)', background: on ? fl.color : 'transparent' }}>{on && <Icon name="Check" size={13} className="text-white" strokeWidth={3} />}</span>
                  <span className="text-sm font-semibold" style={on ? { color: fl.color } : {}}>{fl.label}</span>
                </button>
              );
            })}
          </div>
        </div>
      </div>
    </Modal>
  );
}

// ---- Vorlagen-Galerie (Katalog) ----
function VorlagenGalerie() {
  return (
    <div>
      <div className="mb-5 rounded-lg border border-line bg-bg/40 px-4 py-3 text-sm text-muted">
        <b className="text-ink">So geht&apos;s:</b> Vorlage wählen → Aktenzeichen, Datum, Uhrzeit, Ort &amp; Beamte ausfüllen → Abschnitte per Häkchen aktivieren.
        Jeder Eintrag nutzt dieselben Stammdaten — danach nur noch die passenden Abschnitte ankreuzen.
      </div>
      <div className="grid md:grid-cols-2 xl:grid-cols-3 gap-4">
        {VORLAGEN.map(t => (
          <Card key={t.id} className="p-5 hover:border-accent/40 transition-colors">
            <div className="flex items-center gap-2.5">
              <span className="grid place-items-center h-10 w-10 rounded-md shrink-0" style={{ background: `${t.color}1f`, color: t.color }}><Icon name={t.icon} size={20} /></span>
              <h3 className="font-bold">{t.name}</h3>
            </div>
            <p className="mt-2 text-[13px] text-muted leading-relaxed">{t.beschreibung}</p>
            <div className="mt-3 pt-3 border-t border-line/60 space-y-2">
              <div>
                <div className="uplabel text-[10px] mb-1.5">Immer dabei</div>
                <div className="flex flex-wrap gap-1.5">
                  {['Aktenzeichen', 'Datum', 'Uhrzeit', 'Ort', 'Bearbeitender', 'Beteiligte'].map(l => (
                    <span key={l} className="rounded px-2 py-0.5 text-[11px] bg-bg/60 border border-line text-muted">{l}</span>
                  ))}
                </div>
              </div>
              <div>
                <div className="uplabel text-[10px] mb-1.5">Abschnitte (Häkchen)</div>
                <div className="flex flex-wrap gap-1.5">
                  {(t.abschnitte || []).map(fl => <span key={fl.key} className="rounded px-2 py-0.5 text-[11px] bg-bg/60 border border-line text-muted">{fl.label}</span>)}
                  {t.straftaten && <span className="rounded px-2 py-0.5 text-[11px] bg-[var(--c-accent-soft)] text-accent border border-accent/40">Straftaten</span>}
                  {t.setztGesucht && <span className="rounded px-2 py-0.5 text-[11px] text-danger border border-danger/40" style={{ background: 'rgba(229,56,78,.12)' }}>GESUCHT</span>}
                </div>
              </div>
            </div>
          </Card>
        ))}
      </div>
    </div>
  );
}

// ---- Hauptansicht ----
function Aktensystem() {
  const [tab, setTab] = useState('akten');
  const [sel, setSel] = useState(null);
  const [q, setQ] = useState('');
  const [filter, setFilter] = useState('ALLE');
  const [createOpen, setCreateOpen] = useState(false);
  const [list, setList] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  const [usingMock, setUsingMock] = useState(false);

  const applyList = (akten) => {
    setList(akten);
    if (window.LSPD) window.LSPD._setCognateAkten(akten);
  };

  useEffect(() => {
    let cancelled = false;
    const load = async () => {
      setLoading(true);
      setError(null);
      try {
        if (!window.LSPD) throw new Error('API nicht verfügbar');
        const data = await window.LSPD.loadAkten(q);
        if (!cancelled) {
          applyList(data.akten || []);
          setUsingMock(false);
        }
      } catch (e) {
        console.error(e);
        if (!cancelled) {
          applyList(COGNATE_AKTEN);
          setUsingMock(true);
          setError('API nicht erreichbar — Demodaten werden angezeigt.');
        }
      } finally {
        if (!cancelled) setLoading(false);
      }
    };
    const t = setTimeout(load, q ? 250 : 0);
    return () => { cancelled = true; clearTimeout(t); };
  }, [q]);

  const filters = ['ALLE', ...Object.keys(AKTE_STATUS)];
  const rows = list.filter(p => (filter === 'ALLE' || p.status === filter) && (q === '' || p.name.toLowerCase().includes(q.toLowerCase()) || p.id.toLowerCase().includes(q.toLowerCase())));

  const refreshInList = (akte) => {
    setList(prev => {
      const i = prev.findIndex(x => (x.dbId && x.dbId === akte.dbId) || x.id === akte.id);
      const next = i < 0 ? [akte, ...prev] : prev.map((p, idx) => (idx === i ? { ...p, ...akte } : p));
      if (window.LSPD) window.LSPD._setCognateAkten(next);
      return next;
    });
    setSel(akte);
  };

  const createAkte = async (a) => {
    if (usingMock || !window.LSPD) {
      applyList([a, ...list]);
      setCreateOpen(false);
      return;
    }
    try {
      const res = await window.LSPD.createAkte(a);
      applyList([res.akte, ...list]);
      setCreateOpen(false);
    } catch (e) {
      alert(e.message || 'Akte konnte nicht angelegt werden');
    }
  };

  const deleteAkte = async (p) => {
    if (!window.confirm(`Akte ${p.id} wirklich löschen?`)) return;
    if (usingMock || !window.LSPD || !p.dbId) {
      const next = list.filter(x => x.id !== p.id);
      applyList(next);
      setSel(null);
      return;
    }
    try {
      await window.LSPD.deleteAkte(p.dbId);
      const next = list.filter(x => x.dbId !== p.dbId && x.id !== p.id);
      applyList(next);
      setSel(null);
    } catch (e) {
      alert(e.message || 'Löschen fehlgeschlagen');
    }
  };

  const updateAkte = async (next) => {
    if (usingMock || !window.LSPD || !next.dbId) {
      refreshInList(next);
      return;
    }
    try {
      const res = await window.LSPD.updateAkte(next.dbId, next);
      refreshInList(res.akte);
    } catch (e) {
      alert(e.message || 'Speichern fehlgeschlagen');
      refreshInList(next);
    }
  };

  const syncAkte = async (p) => {
    if (!window.LSPD || !p.dbId) return;
    try {
      const res = await window.LSPD.syncAkte(p.dbId);
      if (res.akte) refreshInList(res.akte);
      else alert('Sync abgeschlossen.');
    } catch (e) {
      alert(e.message || 'Sync fehlgeschlagen');
    }
  };

  if (sel) {
    const live = list.find(p => (p.dbId && p.dbId === sel.dbId) || p.id === sel.id) || sel;
    return (
      <AkteDetail
        akte={live}
        onBack={() => setSel(null)}
        onDelete={() => deleteAkte(live)}
        onUpdate={updateAkte}
        onSync={usingMock ? null : syncAkte}
        apiLive={!usingMock}
      />
    );
  }

  return (
    <div>
      <PageHead title="Cognate" sub="PD-Aktensystem · Vorlagen mit Stammdaten & Beamten-Auswahl">
        {tab === 'akten' && <Btn icon="FilePlus" onClick={() => setCreateOpen(true)}>Akte anlegen</Btn>}
      </PageHead>
      <Tabs tabs={[{ id: 'akten', label: 'Akten' }, { id: 'vorlagen', label: 'Vorlagen', badge: VORLAGEN.length }]} active={tab} onChange={setTab} />

      {tab === 'vorlagen' ? (
        <div className="mt-6"><VorlagenGalerie /></div>
      ) : (
        <div className="mt-6">
          {error && (
            <div className="mb-4 rounded-md border border-warning/40 bg-warning/10 px-4 py-3 text-sm text-warning flex items-center gap-2">
              <Icon name="TriangleAlert" size={16} /> {error}
            </div>
          )}
          {loading && (
            <div className="mb-4 text-sm text-muted flex items-center gap-2">
              <Icon name="LoaderCircle" size={16} className="animate-spin" /> Akten werden geladen …
            </div>
          )}
          {/* Quick-Stats */}
          <div className="grid grid-cols-2 md:grid-cols-4 gap-3 mb-5">
            {[['Akten gesamt', list.length, 'Database', 'ink'], ['Gesucht', list.filter(p => p.status === 'GESUCHT').length, 'Siren', 'danger'], ['In Haft', list.filter(p => p.status === 'HAFT').length, 'Lock', 'warning'], ['Auf freiem Fuß', list.filter(p => p.status === 'FREI').length, 'UserCheck', 'success']].map(([l, v, ic, tone]) => (
              <StatCard key={l} label={l} value={v} sub="aktuell" icon={ic} tone={tone} />
            ))}
          </div>

          <div className="flex flex-wrap items-center gap-2 mb-4">
            {filters.map(fl => (
              <button key={fl} onClick={() => setFilter(fl)} className={`inline-flex items-center gap-1.5 rounded-md border px-2.5 h-8 text-[12px] font-bold uppercase tracking-wide transition-all ${filter === fl ? 'border-accent text-accent bg-[var(--c-accent-soft)]' : 'border-line text-muted hover:text-ink'}`}>
                {fl !== 'ALLE' && <span className="h-1.5 w-1.5 rounded-full" style={{ background: AKTE_STATUS[fl].color }} />}
                {fl === 'ALLE' ? 'Alle' : AKTE_STATUS[fl].label}
              </button>
            ))}
          </div>

          <div className="relative mb-4">
            <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="Person oder Aktennummer suchen …" 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 xl:grid-cols-3 gap-3">
            {rows.map(p => {
              const gesucht = p.status === 'GESUCHT';
              return (
                <button key={p.id} onClick={() => setSel(p)} className={`text-left rounded-lg border bg-card p-4 transition-colors group ${gesucht ? 'border-danger/60' : 'border-line hover:border-accent/50'}`}>
                  <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-11 w-11 rounded-md shrink-0" style={{ background: `${AKTE_STATUS[p.status].color}1f`, color: AKTE_STATUS[p.status].color }}><Icon name={gesucht ? 'Siren' : 'UserRound'} size={22} /></div>
                      <div className="min-w-0">
                        <div className="font-bold truncate">{p.name}</div>
                        <div className="font-mono text-[11px] text-muted">{p.id}</div>
                      </div>
                    </div>
                    <Icon name="ChevronRight" size={16} className="text-muted group-hover:text-accent transition-colors shrink-0" />
                  </div>
                  <div className="mt-3 flex items-center justify-between">
                    <AkteStatusBadge status={p.status} />
                    <span className="text-[11px] text-muted">{ageFrom(p.gebdatum)} J. · {p.geschlecht}</span>
                  </div>
                  <div className="mt-3 pt-3 border-t border-line/60 flex items-center gap-1.5 text-[12px] text-muted min-h-[20px]">
                    {gesucht ? <span className="flex items-center gap-1.5 text-danger font-semibold truncate"><Icon name="Siren" size={13} /> {p.fahndungsgrund}</span>
                      : (p.flags && (p.flags.bewaffnet || p.flags.gang || p.flags.flucht)) ? <FlagBadges flags={p.flags} />
                      : <><Icon name="Gavel" size={13} /><span className="truncate">{p.vorstrafen.length} Vorstrafe(n) · {p.akteneintraege.length} Eintrag(e)</span></>}
                  </div>
                </button>
              );
            })}
          </div>
          {rows.length === 0 && <div className="rounded-lg border border-dashed border-line p-10 text-center text-sm text-muted">Keine Akten gefunden.</div>}
        </div>
      )}

      <AkteModal open={createOpen} onClose={() => setCreateOpen(false)} onSave={createAkte} />
    </div>
  );
}

Object.assign(window, { Aktensystem, AkteStatusBadge, FlagBadges });