// ============================================================
// LSPD — Dashboard-Seiten: Verwaltung, Fahndungen, Profil, Studio
// ============================================================

// ---- Personalverwaltung ----
function PersonalVerwaltung() {
  const [tab, setTab] = useState('verwaltung');
  const [filter, setFilter] = useState('AKTIV');
  const [q, setQ] = useState('');
  const [detail, setDetail] = useState(null);
  const [createOpen, setCreateOpen] = useState(false);
  const [rights, setRights] = useState(() => JSON.parse(JSON.stringify(MEMBER_RIGHTS)));
  const toggleRight = (mid, rid) => setRights(s => {
    const cur = s[mid] || [];
    return { ...s, [mid]: cur.includes(rid) ? cur.filter(x => x !== rid) : [...cur, rid] };
  });

  const tabs = [
    { id: 'statistik', label: 'Statistik' }, { id: 'abteilungen', label: 'Abteilungen' },
    { id: 'verwaltung', label: 'Beamtenverwaltung' }, { id: 'verknuepfungen', label: 'Verknüpfungen', badge: 2 },
    { id: 'urlaub', label: 'Urlaubsverwaltung', badge: 22 }, { id: 'verfuegbarkeit', label: 'Verfügbarkeit' },
    { id: 'bonus', label: 'Bonusauszahlungen' }, { id: 'dienstzeiten', label: 'Dienstzeiten', badge: 10 },
  ];
  const filters = ['AKTIV', 'PAUSE', 'BEURLAUBT', 'SUSPENDIERT', 'AUSBILDUNG', 'ENTLASSEN', 'BLACKLIST', 'SONSTIGES'];
  const counts = filters.reduce((a, f) => { a[f] = MEMBERS.filter(m => m.status === f).length; return a; }, {});
  const rows = MEMBERS.filter(m => m.status === filter && (q === '' || m.name.toLowerCase().includes(q.toLowerCase()) || m.dn.toLowerCase().includes(q.toLowerCase())));

  return (
    <div>
      <PageHead title="Personalverwaltung" sub="41 Beamte · 5 Divisionen" />
      <Tabs tabs={tabs} active={tab} onChange={setTab} />

      {tab !== 'verwaltung' ? (
        <Card className="p-12 mt-6 text-center">
          <Icon name="Construction" size={32} className="mx-auto text-muted" />
          <p className="mt-3 text-muted">Bereich „{tabs.find(t => t.id === tab).label}" — Demodaten folgen.</p>
        </Card>
      ) : (
        <>
          <div className="mt-5 flex flex-wrap items-center gap-2">
            {filters.map(f => (
              <button key={f} onClick={() => setFilter(f)} 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 === f ? 'border-accent text-accent bg-[var(--c-accent-soft)]' : 'border-line text-muted hover:text-ink'}`}>
                <span className="h-1.5 w-1.5 rounded-full" style={{ background: STATUS[f].color }} />
                {STATUS[f].label}
                <span className="opacity-60">{counts[f]}</span>
              </button>
            ))}
          </div>

          <div className="mt-4 flex flex-wrap items-center gap-2">
            <div className="relative flex-1 min-w-[200px]">
              <Icon name="Search" size={15} className="absolute left-2.5 top-1/2 -translate-y-1/2 text-muted" />
              <input value={q} onChange={e => setQ(e.target.value)} placeholder="Name oder Dienstnummer …" className="w-full h-10 rounded-md bg-card border border-line pl-8 pr-3 text-sm outline-none focus:border-accent" />
            </div>
            <Btn variant="outline" icon="SlidersHorizontal">Filter</Btn>
            <Btn icon="Plus" onClick={() => setCreateOpen(true)}>Neu anlegen</Btn>
          </div>

          <Card className="mt-4 overflow-hidden">
            <div className="hidden md:grid grid-cols-[2.2fr_1fr_1.4fr_1fr_0.9fr_40px] gap-3 px-4 py-3 border-b border-line text-[11px] uplabel">
              <span>Beamter</span><span>Dienstnr.</span><span>Dienstgrad</span><span>Status</span><span>Eintritt</span><span></span>
            </div>
            {rows.length === 0 && <div className="p-8 text-center text-muted text-sm">Keine Einträge für diesen Filter.</div>}
            {rows.map(m => (
              <button key={m.id} onClick={() => setDetail(m)} className="w-full text-left grid grid-cols-[2.2fr_1fr_1.4fr_1fr_0.9fr_40px] gap-3 items-center px-4 py-3 border-b border-line/60 last:border-0 hover:bg-white/[.03] transition-colors">
                <div className="flex items-center gap-3 min-w-0">
                  <Avatar name={m.name} size={36} color={RANKS[m.rank].color} />
                  <div className="min-w-0">
                    <div className="font-semibold truncate">{m.name}</div>
                    <div className="text-xs text-muted truncate">{m.dept}</div>
                  </div>
                </div>
                <div className="font-mono text-[13px] text-muted">{m.dn}</div>
                <div><RangBadge rank={m.rank} /></div>
                <div><StatusBadge status={m.status} /></div>
                <div className="text-[13px] text-muted">{m.since}</div>
                <Icon name="ChevronRight" size={16} className="text-muted justify-self-end" />
              </button>
            ))}
          </Card>
        </>
      )}

      {/* Detail Modal */}
      <Modal open={!!detail} onClose={() => setDetail(null)} title="Personalakte" width="max-w-2xl">
        {detail && (
          <div>
            <div className="flex items-center gap-4">
              <Avatar name={detail.name} size={64} color={RANKS[detail.rank].color} />
              <div>
                <div className="text-xl font-bold">{detail.name}</div>
                <div className="mt-1 flex items-center gap-2"><RangBadge rank={detail.rank} /><StatusBadge status={detail.status} /></div>
              </div>
            </div>
            <div className="mt-5 grid grid-cols-2 sm:grid-cols-3 gap-3">
              {[['Dienstnummer', detail.dn], ['Abteilung', detail.dept], ['Eintritt', detail.since], ['Dienststunden', detail.hours + ' h'], ['Ausbildungen', detail.ausb], ['Fachärzte', detail.fach], ['Discord', detail.discord]].map(([l, v]) => (
                <div key={l} className="rounded-md border border-line bg-bg/40 p-3">
                  <div className="uplabel text-[10px]">{l}</div>
                  <div className="mt-1 font-semibold text-sm truncate">{v}</div>
                </div>
              ))}
            </div>

            {/* Sonderrechte / Schlüssel */}
            <div className="mt-6">
              <div className="flex items-center justify-between mb-3">
                <div className="flex items-center gap-2">
                  <Icon name="KeyRound" size={16} className="text-accent" />
                  <h3 className="font-bold text-sm">Sonderrechte & Schlüssel</h3>
                </div>
                <span className="text-[11px] text-muted">{(rights[detail.id] || []).length} / {SPECIAL_RIGHTS.length} aktiv</span>
              </div>
              <div className="grid grid-cols-2 sm:grid-cols-4 gap-2">
                {SPECIAL_RIGHTS.map(r => {
                  const on = (rights[detail.id] || []).includes(r.id);
                  return (
                    <button key={r.id} onClick={() => toggleRight(detail.id, r.id)}
                      className={`flex flex-col items-center gap-1.5 rounded-md border p-3 text-center transition-all ${on ? 'border-accent bg-[var(--c-accent-soft)] text-accent' : 'border-line text-muted hover:text-ink hover:border-muted'}`}>
                      <Icon name={r.icon} size={18} />
                      <span className="text-[11px] font-semibold leading-tight">{r.label}</span>
                      {on && <span className="text-[9px] uppercase tracking-wide flex items-center gap-0.5"><Icon name="Check" size={10} strokeWidth={3} /> Aktiv</span>}
                    </button>
                  );
                })}
              </div>
            </div>

            <div className="mt-6 flex justify-end gap-2">
              <Btn variant="outline" icon="FileText">Personalakte</Btn>
              <Btn icon="Pencil">Bearbeiten</Btn>
            </div>
          </div>
        )}
      </Modal>

      {/* Create Modal */}
      <Modal open={createOpen} onClose={() => setCreateOpen(false)} title="Beamten anlegen"
        footer={<><Btn variant="ghost" onClick={() => setCreateOpen(false)}>Abbrechen</Btn><Btn icon="Check" onClick={() => setCreateOpen(false)}>Anlegen</Btn></>}>
        <div className="grid sm:grid-cols-2 gap-4">
          <Field label="Vorname" required><TextInput placeholder="Max" /></Field>
          <Field label="Nachname" required><TextInput placeholder="Mustermann" /></Field>
          <Field label="Dienstnummer"><TextInput placeholder="LSPD-045" /></Field>
          <Field label="Division"><Select>{DEPARTMENTS.map(d => <option key={d}>{d}</option>)}</Select></Field>
          <Field label="Dienstgrad"><Select>{Object.entries(RANKS).map(([k, r]) => <option key={k}>{r.label}</option>)}</Select></Field>
          <Field label="Status"><Select>{Object.entries(STATUS).map(([k, s]) => <option key={k}>{s.label}</option>)}</Select></Field>
        </div>
      </Modal>
    </div>
  );
}

// ---- Fahndungsübersicht ----
function Versicherungen() {
  const [tab, setTab] = useState('uebersicht');
  const tabs = [
    { id: 'uebersicht', label: 'Übersicht' }, { id: 'haftbefehl', label: 'Haftbefehle' },
    { id: 'bolo', label: 'BOLO' }, { id: 'archiv', label: 'Archiv', badge: 103 },
    { id: 'historie', label: 'Gesamthistorie' }, { id: 'statistik', label: 'Statistik' },
  ];
  const cols = [
    { key: 'faellig', title: 'Läuft bald ab', color: '#F59E0B', icon: 'Clock' },
    { key: 'abgelaufen', title: 'Abgelaufen', color: '#FF4F6C', icon: 'CircleX' },
    { key: 'aktiv', title: 'Aktiv', color: '#22C55E', icon: 'CircleCheck' },
  ];
  return (
    <div>
      <PageHead title="Fahndungen" sub="Übersicht aller laufenden und archivierten Fahndungen">
        <Btn icon="Plus">Neue Fahndung</Btn>
      </PageHead>
      <Tabs tabs={tabs} active={tab} onChange={setTab} />

      {tab !== 'uebersicht' ? (
        <Card className="p-12 mt-6 text-center">
          <Icon name="FolderArchive" size={32} className="mx-auto text-muted" />
          <p className="mt-3 text-muted">Bereich „{tabs.find(t => t.id === tab).label}" — Demodaten folgen.</p>
        </Card>
      ) : (
        <div className="mt-6 grid lg:grid-cols-3 gap-4">
          {cols.map(col => {
            const items = FAHNDUNGEN.filter(v => v.state === col.key);
            return (
              <div key={col.key}>
                <div className="flex items-center gap-2 mb-3 px-1">
                  <span className="h-2 w-2 rounded-full shrink-0" style={{ background: col.color }} />
                  <span className="font-bold text-sm whitespace-nowrap">{col.title}</span>
                  <span className="text-xs text-muted">({items.length})</span>
                </div>
                <div className="flex flex-col gap-3">
                  {items.map(v => (
                    <Card key={v.id} className="p-4 hover:border-accent/50 transition-colors group cursor-pointer">
                      <div className="flex items-start justify-between gap-2">
                        <div className="min-w-0">
                          <div className="font-semibold truncate">{v.name}</div>
                          <div className="font-mono text-[11px] text-muted mt-0.5">{v.id}</div>
                        </div>
                        <Icon name="ArrowUpRight" size={16} className="text-muted group-hover:text-accent transition-colors shrink-0" />
                      </div>
                      <div className="mt-3 flex items-center gap-1.5">
                        <span className="rounded px-2 py-0.5 text-[11px] font-bold uppercase tracking-wide" style={{ color: col.color, background: `${col.color}1f`, border: `1px solid ${col.color}40` }}>{col.title.split(' ')[0]}</span>
                        <span className="rounded px-2 py-0.5 text-[11px] font-bold uppercase tracking-wide text-muted border border-line">{v.type}</span>
                      </div>
                      <div className="mt-2 text-[12px] text-danger flex items-center gap-1.5"><Icon name="Siren" size={13} /> {v.grund}</div>
                      <div className="mt-3 flex items-center justify-between text-xs text-muted">
                        <span className="flex items-center gap-1"><Icon name="CalendarDays" size={13} /> {v.from} – {v.to}</span>
                        <span className="flex items-center gap-1"><Icon name="Users" size={13} /> {v.insured}</span>
                      </div>
                    </Card>
                  ))}
                  {items.length === 0 && <div className="rounded-lg border border-dashed border-line p-6 text-center text-xs text-muted">Keine Einträge</div>}
                </div>
              </div>
            );
          })}
        </div>
      )}
    </div>
  );
}

// ---- Profil ----
function Profil() {
  const [tab, setTab] = useState('profil');
  const tabs = ['Profil', 'Bonus', 'Abwesenheit', 'Dienstzeiten', 'Personalakte'].map(t => ({ id: t.toLowerCase(), label: t }));
  return (
    <div>
      <PageHead title="Mein Profil" sub="Persönliche Daten & Verteiler-Verknüpfung" />
      <Tabs tabs={tabs} active={tab} onChange={setTab} />

      {tab !== 'profil' ? (
        <Card className="p-12 mt-6 text-center">
          <Icon name="UserCog" size={32} className="mx-auto text-muted" />
          <p className="mt-3 text-muted">Bereich „{tabs.find(t => t.id === tab).label}" — Demodaten folgen.</p>
        </Card>
      ) : (
        <div className="mt-6 grid lg:grid-cols-3 gap-6">
          <Card className="p-6 lg:col-span-1 h-fit">
            <div className="flex flex-col items-center text-center">
              <Avatar name="Frank Mercer" size={88} color={RANKS.chief.color} />
              <div className="mt-4 text-xl font-bold">Frank Mercer</div>
              <div className="text-sm text-muted">LSPD Dashboard Benutzer</div>
              <div className="mt-3 flex items-center gap-2"><RangBadge rank="chief" /><StatusBadge status="AKTIV" /></div>
            </div>
            <div className="mt-6 flex items-center gap-3 rounded-md border border-line bg-accent/10 p-3">
              <div className="grid place-items-center h-9 w-9 rounded-md bg-accent text-white"><Icon name="Radio" size={18} /></div>
              <div className="min-w-0 leading-tight">
                <div className="text-[11px] uplabel whitespace-nowrap">Verteiler verknüpft</div>
                <div className="text-sm font-semibold truncate mt-0.5">f.mercer#0001</div>
              </div>
            </div>
          </Card>

          <Card className="p-6 lg:col-span-2">
            <h2 className="text-lg font-bold">Profil anpassen</h2>
            <p className="text-sm text-muted mt-0.5">Dein Profil wird über den LSPD-Verteiler synchronisiert (IC, keine offizielle Behörde).</p>
            <div className="mt-5 flex flex-col gap-4">
              <Field label="Benutzername" hint="Wird automatisch vom Verteiler übernommen.">
                <div className="relative">
                  <TextInput value="Frank Mercer" readOnly className="opacity-70" />
                  <span className="absolute right-3 top-1/2 -translate-y-1/2 text-[11px] uplabel flex items-center gap-1"><Icon name="Lock" size={12} /> Verteiler</span>
                </div>
              </Field>
              <Field label="Avatar" hint="Wird automatisch vom Verteiler übernommen.">
                <div className="flex items-center gap-3 rounded-md border border-line bg-bg/40 p-3">
                  <Avatar name="Frank Mercer" size={44} color={RANKS.chief.color} />
                  <div className="text-sm text-muted">Synchronisiert via Verteiler</div>
                  <span className="ml-auto text-[11px] uplabel flex items-center gap-1"><Icon name="Lock" size={12} /> Read-only</span>
                </div>
              </Field>
              <Field label="Login-Daten" hint="Anmeldung erfolgt über den LSPD-Verteiler (OAuth).">
                <div className="flex items-center gap-2 rounded-md border border-line bg-bg/40 p-3 text-sm text-muted"><Icon name="ShieldCheck" size={16} className="text-success" /> Verteiler-Login — kein Passwort nötig.</div>
              </Field>
              <div className="rounded-md border border-line p-4">
                <div className="flex flex-wrap items-center justify-between gap-3">
                  <div>
                    <div className="text-[11px] uplabel">Verteiler-ID</div>
                    <div className="mt-1 font-mono text-sm">182994400112233445</div>
                  </div>
                  <Btn variant="outline" icon="RefreshCw">Verteiler neu verknüpfen</Btn>
                </div>
              </div>
            </div>
          </Card>
        </div>
      )}
    </div>
  );
}

// ---- Studio (Theme-Einstellungen) ----
function Studio({ open, onClose, accent, setAccent, themeId, setThemeId }) {
  const presets = ['#CC2233', '#2A6FDB', '#E0A33A', '#22C55E', '#D6328C', '#C026D3', '#0EA5E9', '#F97316'];
  const [hex, setHex] = useState(accent);
  useEffect(() => setHex(accent), [accent]);
  const apply = (v) => { setHex(v); setAccent(v); };
  return (
    <Modal open={open} onClose={onClose} title="Studio · Theme-Einstellungen" width="max-w-2xl">
      <div className="flex flex-col gap-6">
        {/* Akzentfarbe */}
        <div>
          <Label className="mb-2">Akzentfarbe</Label>
          <div className="flex flex-wrap items-center gap-3">
            <input type="color" value={hex} onChange={e => apply(e.target.value)} className="h-10 w-12 rounded-md border border-line bg-transparent cursor-pointer" />
            <div className="relative">
              <span className="absolute left-3 top-1/2 -translate-y-1/2 text-muted text-sm">#</span>
              <input value={hex.replace('#', '')} onChange={e => apply('#' + e.target.value.replace('#', ''))} className="h-10 w-32 rounded-md bg-bg/60 border border-line pl-7 pr-3 text-sm font-mono uppercase outline-none focus:border-accent" />
            </div>
            <div className="flex gap-1.5">
              {presets.map(p => <button key={p} onClick={() => apply(p)} className="h-8 w-8 rounded-md border-2 transition-transform hover:scale-110" style={{ background: p, borderColor: hex.toLowerCase() === p.toLowerCase() ? 'var(--c-ink)' : 'transparent' }} />)}
            </div>
          </div>
          {/* Vorschau */}
          <div className="mt-4 flex flex-wrap items-center gap-3 rounded-md border border-line bg-bg/40 p-4">
            <span className="text-[11px] uplabel">Vorschau</span>
            <Btn size="sm">Button</Btn>
            <Btn size="sm" variant="soft">Soft</Btn>
            <span className="rounded px-2 py-0.5 text-[11px] font-bold uppercase tracking-wide" style={{ color: 'var(--c-accent)', background: 'var(--c-accent-soft)', border: '1px solid var(--c-accent)' }}>Badge</span>
          </div>
        </div>

        {/* Templates */}
        <div>
          <Label className="mb-2">Theme-Vorlagen</Label>
          <div className="grid grid-cols-2 sm:grid-cols-3 gap-3">
            {THEME_TEMPLATES.map(t => (
              <button key={t.id} onClick={() => { setThemeId(t.id); setAccent(t.vars['--c-accent']); }} className={`text-left rounded-lg border p-3 transition-all hover:-translate-y-0.5 ${themeId === t.id ? 'border-accent' : 'border-line'}`} style={{ background: t.swatch[0] }}>
                <div className="flex gap-1.5">
                  {t.swatch.map(c => <span key={c} className="h-5 flex-1 rounded" style={{ background: c }} />)}
                </div>
                <div className="mt-2.5 text-sm font-bold text-white">{t.name}</div>
                <div className="text-[11px] text-white/50">{t.tag}</div>
                {themeId === t.id && <div className="mt-1.5 inline-flex items-center gap-1 text-[10px] uplabel" style={{ color: t.swatch[1] }}><Icon name="Check" size={12} /> Aktiv</div>}
              </button>
            ))}
          </div>
        </div>

        {/* Eigenes Theme */}
        <div>
          <Label className="mb-2">Eigenes Theme erstellen</Label>
          <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
            {[['Primär', 'var(--c-bg)'], ['Sekundär', 'var(--c-card)'], ['Akzent', 'var(--c-accent)'], ['Hintergrund', 'var(--c-bg2)']].map(([l, c]) => (
              <div key={l} className="rounded-md border border-line p-3">
                <div className="uplabel text-[10px]">{l}</div>
                <div className="mt-2 flex items-center gap-2">
                  <span className="h-6 w-6 rounded border border-line" style={{ background: c }} />
                  <input type="color" className="h-6 w-8 rounded bg-transparent border-0 cursor-pointer" defaultValue="#1C2A3A" />
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </Modal>
  );
}

// ---- Generic placeholder for unbuilt dashboard sections ----
function ComingSoon({ title, icon = 'Boxes' }) {
  return (
    <div>
      <PageHead title={title} />
      <Card className="p-16 text-center">
        <div className="mx-auto grid place-items-center h-14 w-14 rounded-lg bg-[var(--c-accent-soft)] text-accent"><Icon name={icon} size={26} /></div>
        <h3 className="mt-4 text-lg font-bold">In Arbeit</h3>
        <p className="mt-1 text-sm text-muted max-w-sm mx-auto">Dieser Bereich ist im Prototyp angelegt, aber noch nicht mit Demodaten befüllt.</p>
      </Card>
    </div>
  );
}

Object.assign(window, { PersonalVerwaltung, Versicherungen, Profil, Studio, ComingSoon });