// ============================================================
// LSPD — Admin (Discord-Rollen & Rechte-Matrix)
// ============================================================

function PermToggle({ on, onClick }) {
  return (
    <button onClick={onClick} className="grid place-items-center h-7 w-7 rounded-md transition-colors mx-auto"
      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>
  );
}

function Admin() {
  const [tab, setTab] = useState('rechte');
  const [perms, setPerms] = useState(() => JSON.parse(JSON.stringify(DEFAULT_PERMISSIONS)));
  const [roles] = useState(DISCORD_ROLES);
  const [dirty, setDirty] = useState(false);

  const toggle = (roleId, permId) => {
    setPerms(p => ({ ...p, [roleId]: { ...p[roleId], [permId]: p[roleId][permId] ? 0 : 1 } }));
    setDirty(true);
  };
  const reset = () => { setPerms(JSON.parse(JSON.stringify(DEFAULT_PERMISSIONS))); setDirty(false); };

  const tabs = [{ id: 'rechte', label: 'Rollen & Rechte' }, { id: 'discord', label: 'Discord-Sync' }, { id: 'einstellungen', label: 'Einstellungen' }];

  return (
    <div>
      <PageHead title="Admin" sub="Rechteverwaltung & Systemeinstellungen der Behörde">
        {tab === 'rechte' && dirty && <div className="flex gap-2"><Btn variant="ghost" onClick={reset}>Verwerfen</Btn><Btn icon="Save" onClick={() => setDirty(false)}>Speichern</Btn></div>}
      </PageHead>
      <Tabs tabs={tabs} active={tab} onChange={setTab} />

      {tab === 'rechte' && (
        <div className="mt-6 flex flex-col gap-6">
          {/* Rollen-Übersicht */}
          <div className="grid grid-cols-2 md:grid-cols-5 gap-3">
            {roles.map(r => (
              <Card key={r.id} className="p-4">
                <div className="flex items-center gap-2">
                  <span className="h-3 w-3 rounded-full" style={{ background: r.color }} />
                  <span className="font-bold text-sm truncate">{r.name}</span>
                </div>
                <div className="mt-2 text-2xl font-extrabold">{r.members}</div>
                <div className="text-[11px] text-muted">Mitglieder</div>
              </Card>
            ))}
          </div>

          {/* Rechte-Matrix */}
          <Card className="p-0 overflow-hidden">
            <div className="p-5 border-b border-line flex items-center justify-between flex-wrap gap-2">
              <div>
                <h2 className="text-lg font-bold">Rechte-Matrix</h2>
                <p className="text-sm text-muted mt-0.5">Lege fest, welche Discord-Rolle welche Aktion ausführen darf.</p>
              </div>
              <span className="text-[11px] uplabel flex items-center gap-1.5"><Icon name="Info" size={13} /> Klicke eine Zelle zum Umschalten</span>
            </div>
            <div className="overflow-x-auto">
              <table className="w-full border-collapse min-w-[640px]">
                <thead>
                  <tr className="border-b border-line">
                    <th className="text-left p-4 text-[11px] uplabel font-semibold sticky left-0 bg-card">Recht</th>
                    {roles.map(r => (
                      <th key={r.id} className="p-3 text-center">
                        <div className="flex flex-col items-center gap-1">
                          <span className="h-2.5 w-2.5 rounded-full" style={{ background: r.color }} />
                          <span className="text-[11px] font-bold whitespace-nowrap">{r.name}</span>
                        </div>
                      </th>
                    ))}
                  </tr>
                </thead>
                <tbody>
                  {PERMISSION_GROUPS.map(g => (
                    <React.Fragment key={g.group}>
                      <tr className="bg-bg/40">
                        <td colSpan={roles.length + 1} className="px-4 py-2 text-[11px] uplabel font-bold text-accent sticky left-0">{g.group}</td>
                      </tr>
                      {g.perms.map(perm => (
                        <tr key={perm.id} className="border-b border-line/50 hover:bg-white/[.02]">
                          <td className="p-4 text-sm font-medium sticky left-0 bg-card">{perm.label}</td>
                          {roles.map(r => (
                            <td key={r.id} className="p-2"><PermToggle on={perms[r.id][perm.id]} onClick={() => toggle(r.id, perm.id)} /></td>
                          ))}
                        </tr>
                      ))}
                    </React.Fragment>
                  ))}
                </tbody>
              </table>
            </div>
          </Card>
        </div>
      )}

      {tab === 'discord' && (
        <div className="mt-6 grid lg:grid-cols-2 gap-6">
          <Card className="p-6">
            <div className="flex items-center gap-3 mb-4">
              <div className="grid place-items-center h-11 w-11 rounded-md bg-discord text-white"><Icon name="MessageCircle" size={22} /></div>
              <div>
                <h2 className="text-lg font-bold">Discord-Server</h2>
                <p className="text-sm text-muted">LSPD · San Andreas</p>
              </div>
            </div>
            <div className="flex items-center gap-2 rounded-md border border-line bg-success/10 p-3 text-sm"><Icon name="CircleCheck" size={16} className="text-success" /> Verbunden · letzte Synchronisierung vor 4 Min.</div>
            <div className="mt-4 flex flex-col gap-2">
              {[['Server-ID', '998112334455667788'], ['Mitglieder gesamt', '41'], ['Verifiziert', '38'], ['Bot-Status', 'Online']].map(([l, v]) => (
                <div key={l} className="flex items-center justify-between rounded-md border border-line p-3"><span className="text-sm text-muted">{l}</span><span className="font-mono text-sm font-semibold">{v}</span></div>
              ))}
            </div>
            <Btn variant="outline" icon="RefreshCw" className="mt-4 w-full">Jetzt synchronisieren</Btn>
          </Card>
          <Card className="p-6">
            <h2 className="text-lg font-bold mb-4">Rollen-Zuordnung</h2>
            <p className="text-sm text-muted mb-4">Discord-Rollen werden automatisch auf LSPD-Dienstgrade gemappt.</p>
            <div className="flex flex-col gap-2">
              {DISCORD_ROLES.map(r => (
                <div key={r.id} className="flex items-center gap-3 rounded-md border border-line p-3">
                  <span className="h-3 w-3 rounded-full shrink-0" style={{ background: r.color }} />
                  <span className="font-semibold text-sm flex-1">{r.name}</span>
                  <Icon name="ArrowRight" size={14} className="text-muted" />
                  <span className="text-sm text-muted">{r.members} Mitglieder</span>
                </div>
              ))}
            </div>
          </Card>
        </div>
      )}

      {tab === 'einstellungen' && (
        <div className="mt-6 grid lg:grid-cols-2 gap-6">
          <Card className="p-6">
            <h2 className="text-lg font-bold mb-4">Bewerbungen</h2>
            <SettingRow label="Bewerbungen aktiviert" desc="Steuert die öffentliche Bewerbungsseite" defaultOn />
            <SettingRow label="Automatische Discord-Benachrichtigung" desc="Bei neuer Bewerbung" defaultOn />
            <SettingRow label="Mindestalter prüfen (IC)" desc="Lehnt Bewerber unter 18 ab" />
          </Card>
          <Card className="p-6">
            <h2 className="text-lg font-bold mb-4">System</h2>
            <SettingRow label="Wartungsmodus" desc="Sperrt das Dashboard für Nicht-Admins" />
            <SettingRow label="Logbuch aktiv" desc="Protokolliert alle Aktionen" defaultOn />
            <SettingRow label="Akten-Löschung erlauben" desc="Nur für Leitungsebene" />
            <SettingRow label="2-Faktor-Pflicht" desc="Für Admin-Zugriff" defaultOn />
          </Card>
        </div>
      )}
    </div>
  );
}

function SettingRow({ label, desc, defaultOn = false }) {
  const [on, setOn] = useState(defaultOn);
  return (
    <div className="flex items-center justify-between py-3 border-b border-line/60 last:border-0">
      <div className="min-w-0 pr-3">
        <div className="font-semibold text-sm">{label}</div>
        <div className="text-[12px] text-muted">{desc}</div>
      </div>
      <button onClick={() => setOn(!on)} className="relative h-6 w-11 rounded-full transition-colors shrink-0" style={{ background: on ? 'var(--c-accent)' : 'var(--c-border)' }}>
        <span className="absolute top-0.5 h-5 w-5 rounded-full bg-white transition-all" style={{ left: on ? '22px' : '2px' }} />
      </button>
    </div>
  );
}

Object.assign(window, { Admin, SettingRow });