// ============================================================
// LSMD — Dashboard-Seiten: Verwaltung, Versicherungen, Profil, Studio
// ============================================================

function RankText({ label }) {
  const l = (label || 'Mitarbeiter').toLowerCase();
  let color = '#8899AA';
  if (/direktor|leiter|chefarzt|finanz|jurist/i.test(l)) color = '#CC2233';
  else if (/ober|leitend|notfallmanager/i.test(l)) color = '#F59E0B';
  else if (/facharzt|notarzt/i.test(l)) color = '#3B82F6';
  else if (/sanit|rettung|praktikant|student/i.test(l)) color = '#22C55E';
  return (
    <span className="text-[12px] font-bold truncate" style={{ color }}>{label || 'Mitarbeiter'}</span>
  );
}

// ---- Mitarbeiter-Akte (Detail + Rechte + Abteilungen) ----
function StaffMemberAkte({ memberId, onClose, onSaved }) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);
  const [err, setErr] = useState('');
  const [deptIds, setDeptIds] = useState([]);
  const [permSet, setPermSet] = useState(new Set());

  useEffect(() => {
    if (!memberId) return;
    let cancelled = false;
    (async () => {
      setLoading(true);
      setErr('');
      try {
        const d = await window.LSMD.loadStaffMember(memberId);
        if (cancelled) return;
        setData(d);
        setDeptIds(d.member?.department_ids || []);
        setPermSet(new Set((d.permissions || []).filter(p => p.granted).map(p => p.key)));
      } catch (e) {
        if (!cancelled) setErr(e.message || 'Laden fehlgeschlagen');
      } finally {
        if (!cancelled) setLoading(false);
      }
    })();
    return () => { cancelled = true; };
  }, [memberId]);

  const toggleDept = (id) => {
    setDeptIds(prev => prev.includes(id) ? prev.filter(x => x !== id) : [...prev, id]);
  };

  const togglePerm = (key) => {
    setPermSet(prev => {
      const next = new Set(prev);
      if (next.has(key)) next.delete(key);
      else next.add(key);
      return next;
    });
  };

  const save = async () => {
    if (!data?.canEdit) return;
    setSaving(true);
    setErr('');
    try {
      const res = await window.LSMD.updateStaffMember(memberId, {
        department_ids: deptIds,
        permissions: [...permSet],
      });
      onSaved?.(res.member);
      setData(prev => ({ ...prev, member: res.member, permissions: res.permissions }));
    } catch (e) {
      setErr(e.message || 'Speichern fehlgeschlagen');
    } finally {
      setSaving(false);
    }
  };

  const m = data?.member;

  return (
    <Modal open={!!memberId} onClose={onClose} title="Mitarbeiter-Akte" width="max-w-2xl"
      footer={data?.canEdit ? (
        <>
          <Btn variant="ghost" onClick={onClose}>Schließen</Btn>
          <Btn icon="Save" onClick={save} disabled={saving || loading}>{saving ? 'Speichert …' : 'Speichern'}</Btn>
        </>
      ) : <Btn variant="ghost" onClick={onClose}>Schließen</Btn>}>
      {loading && <div className="py-12 text-center text-muted text-sm">Akte wird geladen …</div>}
      {err && <div className="mb-4 text-sm text-signal font-semibold">{err}</div>}
      {!loading && m && (
        <div className="max-h-[75vh] overflow-y-auto pr-1 flex flex-col gap-5">
          <div className="flex items-center gap-4">
            {m.avatar
              ? <img src={m.avatar} alt="" className="h-16 w-16 rounded-md object-cover shrink-0" />
              : <Avatar name={m.name} size={64} color="#CC2233" />}
            <div className="min-w-0">
              <div className="text-xl font-bold truncate">{m.display_name || m.name}</div>
              <div className="mt-1"><RankText label={m.rank_label || m.rank} /></div>
              <div className="mt-1 text-xs text-muted font-mono">Discord · {m.discord_id || '—'}</div>
            </div>
          </div>

          <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
            {[['Dienstnummer', m.dn], ['Eintritt', m.since], ['Rolle', m.platform_role], ['Status', m.status]].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>

          <div>
            <Label className="mb-2">Abteilungen</Label>
            {!data.canEdit && (
              <p className="text-sm font-semibold">{m.dept || '—'}</p>
            )}
            {data.canEdit && (
              <div className="flex flex-wrap gap-2">
                {(data.departments || []).map(dep => {
                  const on = deptIds.includes(dep.id);
                  return (
                    <button
                      key={dep.id}
                      type="button"
                      onClick={() => toggleDept(dep.id)}
                      className={`flex items-center gap-2 rounded-md border px-3 h-9 text-sm font-semibold transition-colors ${on ? 'border-accent bg-[var(--c-accent-soft)] text-accent' : 'border-line text-muted hover:border-accent/40'}`}
                    >
                      <span className="grid place-items-center h-4 w-4 rounded-sm border" 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>
                      {dep.name}
                    </button>
                  );
                })}
              </div>
            )}
            {data.canEdit && (
              <p className="mt-2 text-xs text-muted">Mehrfachauswahl möglich — z. B. Notfallmedizin und Verwaltung.</p>
            )}
          </div>

          <div>
            <Label className="mb-2">Berechtigungen</Label>
            <p className="text-xs text-muted mb-3">
              Basis kommt von Discord-Rolle und Plattform-Rolle. Manuelle Änderungen gelten nur für diese Person.
            </p>
            <div className="rounded-lg border border-line overflow-hidden">
              <div className="hidden sm:grid grid-cols-[1fr_100px_100px] gap-2 px-4 py-2 border-b border-line bg-bg2 text-[10px] uplabel">
                <span>Berechtigung</span><span>Von Rolle</span><span>Aktiv</span>
              </div>
              {(data.permissions || []).map(p => {
                const on = permSet.has(p.key);
                const manual = p.source === 'grant' || p.source === 'deny';
                return (
                  <div key={p.key} className="grid sm:grid-cols-[1fr_100px_100px] gap-2 items-center px-4 py-2.5 border-b border-line/60 last:border-0">
                    <div>
                      <div className="text-sm font-semibold">{p.label}</div>
                      {manual && <div className="text-[10px] text-accent font-bold uppercase mt-0.5">Manuell</div>}
                    </div>
                    <div className="text-xs text-muted sm:text-center">
                      {p.fromRole ? <Icon name="Check" size={16} className="inline text-success" /> : '—'}
                    </div>
                    <div className="flex sm:justify-center">
                      {data.canEdit ? (
                        <button type="button" onClick={() => togglePerm(p.key)}
                          className="grid place-items-center h-7 w-7 rounded-md transition-colors"
                          style={{ background: on ? 'var(--c-accent-soft)' : 'transparent', color: on ? 'var(--c-accent)' : 'var(--c-muted)' }}>
                          <Icon name={on ? 'Check' : 'Minus'} size={16} strokeWidth={on ? 3 : 2} />
                        </button>
                      ) : (
                        <span className="text-sm">{on ? 'Ja' : 'Nein'}</span>
                      )}
                    </div>
                  </div>
                );
              })}
            </div>
          </div>

          {!data.canEdit && (
            <p className="text-xs text-muted flex items-center gap-2">
              <Icon name="Lock" size={14} />
              Bearbeiten erfordert die Berechtigung „Mitarbeiter verwalten“.
            </p>
          )}
        </div>
      )}
    </Modal>
  );
}

// ---- Personalverwaltung (Live-Daten) ----
function PersonalVerwaltung() {
  const [q, setQ] = useState('');
  const [rows, setRows] = useState([]);
  const [loading, setLoading] = useState(true);
  const [detailId, setDetailId] = useState(null);

  useEffect(() => {
    let cancelled = false;
    const load = async () => {
      setLoading(true);
      try {
        const data = await window.LSMD.loadStaff(q);
        if (!cancelled) setRows(data.staff || []);
      } catch (e) {
        console.error(e);
        if (!cancelled) setRows([]);
      } finally {
        if (!cancelled) setLoading(false);
      }
    };
    const t = setTimeout(load, q ? 200 : 0);
    return () => { cancelled = true; clearTimeout(t); };
  }, [q]);

  return (
    <div>
      <PageHead title="Personalverwaltung" sub={loading ? 'Lädt …' : `${rows.length} Mitarbeiter im Portal`} />

      <div className="mt-4 flex flex-wrap items-center gap-2">
        <div className="relative flex-1 min-w-[220px]">
          <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, Dienstnummer oder Position …"
            className="w-full h-10 rounded-md border border-line px-3 pl-8 text-sm outline-none focus:border-accent"
          />
        </div>
      </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>Mitarbeiter</span><span>Dienstnr.</span><span>Position</span><span>Status</span><span>Eintritt</span><span />
        </div>
        {loading && <div className="p-10 text-center text-muted text-sm">Mitarbeiter werden geladen …</div>}
        {!loading && rows.length === 0 && (
          <div className="p-10 text-center text-muted text-sm">Keine Mitarbeiter gefunden. Discord-Sync läuft beim Bot-Start.</div>
        )}
        {!loading && rows.map(m => (
          <button
            key={m.id}
            type="button"
            onClick={() => setDetailId(m.id)}
            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">
              {m.avatar
                ? <img src={m.avatar} alt="" className="h-9 w-9 rounded-md object-cover shrink-0" />
                : <Avatar name={m.name} size={36} color="#CC2233" />}
              <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><RankText label={m.rank_label || m.rank} /></div>
            <div><StatusBadge status={m.status || 'AKTIV'} /></div>
            <div className="text-[13px] text-muted">{m.since}</div>
            <Icon name="ChevronRight" size={16} className="text-muted justify-self-end" />
          </button>
        ))}
      </Card>

      <StaffMemberAkte
        memberId={detailId}
        onClose={() => setDetailId(null)}
        onSaved={(member) => {
          setRows(prev => prev.map(r => (r.id === member.id ? { ...r, ...member } : r)));
        }}
      />
    </div>
  );
}

function Profil({ user }) {
  const name = user?.display_name || user?.username || 'Mitarbeiter';
  return (
    <div>
      <PageHead title="Mein Profil" sub="Persönliche Daten · Discord-Sync" />
      <Card className="p-6 max-w-2xl">
        <div className="flex items-center gap-4">
          {user?.avatar
            ? <img src={user.avatar} alt="" className="h-20 w-20 rounded-md object-cover" />
            : <Avatar name={name} size={80} color="#CC2233" />}
          <div>
            <div className="text-2xl font-bold">{name}</div>
            <div className="mt-1 text-sm text-muted">{user?.rank_label || 'LSMD'}</div>
            <div className="mt-2 font-mono text-xs text-muted">{user?.employee_number || user?.discord_id || ''}</div>
          </div>
        </div>
        <p className="mt-6 text-sm text-muted flex items-center gap-2">
          <Icon name="ShieldCheck" size={16} className="text-success" />
          Anmeldung und Profildaten werden über Discord synchronisiert.
        </p>
      </Card>
    </div>
  );
}

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" width="max-w-xl">
      <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 cursor-pointer" />
        <div className="flex gap-1.5">
          {presets.map(p => <button key={p} type="button" onClick={() => apply(p)} className="h-8 w-8 rounded-md border border-line" style={{ background: p }} />)}
        </div>
      </div>
      <Label className="mt-6 mb-2">Vorlagen</Label>
      <div className="grid grid-cols-2 gap-2">
        {THEME_TEMPLATES.map(t => (
          <button key={t.id} type="button" onClick={() => { setThemeId(t.id); if (t.vars['--c-accent']) setAccent(t.vars['--c-accent']); }}
            className={`rounded-md border p-2 text-left text-sm font-semibold ${themeId === t.id ? 'border-accent' : 'border-line'}`}>
            {t.name}
          </button>
        ))}
      </div>
    </Modal>
  );
}

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">Demnächst</h3>
        <p className="mt-1 text-sm text-muted">Dieser Bereich wird mit Live-Daten angebunden.</p>
      </Card>
    </div>
  );
}

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