// ============================================================
// LSMD — Dashboard-Bereiche (ohne Demo-/Template-Daten)
// ============================================================

const LOG_TYPE_COLORS = {
  Auth: '#A78BFA', Admin: '#CC2233', Personal: '#F59E0B', Akte: '#3B82F6',
  Bewerbung: '#22C55E', System: '#8899AA', Discord: '#5865F2', Einstellung: '#0EA5E9',
};

function ModulePlaceholder({ title, sub, icon = 'Construction', hint }) {
  return (
    <div>
      <PageHead title={title} sub={sub} />
      <Card className="p-10 text-center max-w-lg mx-auto">
        <div className="grid place-items-center h-14 w-14 rounded-md bg-[var(--c-accent-soft)] text-accent mx-auto">
          <Icon name={icon} size={28} />
        </div>
        <p className="mt-4 text-sm text-muted leading-relaxed">
          {hint || 'Noch keine Einträge. Kanäle und Verhalten legst du im Admin unter „Discord-Kanäle“ fest. Automatische Discord-Nachrichten sind derzeit aus — nur die Konfiguration ist aktiv.'}
        </p>
        {window.LSMD_NAV && (
          <Btn variant="outline" className="mt-6" icon="Settings" onClick={() => window.LSMD_NAV('admin')}>
            Admin öffnen
          </Btn>
        )}
      </Card>
    </div>
  );
}

// WikiPage → modules.jsx

function Logbuch() {
  const [type, setType] = useState('ALLE');
  const [rows, setRows] = useState([]);
  const [types, setTypes] = useState(Object.keys(LOG_TYPE_COLORS));
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    let cancelled = false;
    (async () => {
      setLoading(true);
      try {
        const data = await window.LSMD.loadLogbook(type);
        if (!cancelled) {
          setRows(data.entries || []);
          if (data.types?.length) setTypes(data.types);
        }
      } catch (e) {
        console.error(e);
        if (!cancelled) setRows([]);
      } finally {
        if (!cancelled) setLoading(false);
      }
    })();
    return () => { cancelled = true; };
  }, [type]);

  const filterTypes = ['ALLE', ...types];

  return (
    <div>
      <PageHead title="Logbuch" sub="Protokoll aller Website-Aktivitäten" />
      <div className="flex flex-wrap gap-2 mb-4">
        {filterTypes.map(t => (
          <button
            key={t}
            type="button"
            onClick={() => setType(t)}
            className={`rounded-md border px-3 h-8 text-[12px] font-semibold transition-all ${type === t ? 'border-accent text-accent bg-[var(--c-accent-soft)]' : 'border-line text-muted hover:text-ink'}`}
          >
            {t === 'ALLE' ? 'Alle' : t}
          </button>
        ))}
      </div>
      <Card className="overflow-hidden">
        {loading && <div className="p-10 text-center text-muted text-sm">Logbuch wird geladen …</div>}
        {!loading && rows.length === 0 && (
          <div className="p-10 text-center text-muted text-sm">
            Noch keine Einträge. Aktionen auf der Website (Login, Bewerbungen, Admin-Einstellungen, Sync) erscheinen hier automatisch.
          </div>
        )}
        {!loading && rows.map(l => (
          <div key={l.id} className="flex items-start gap-3 px-4 py-3 border-b border-line/60 last:border-0 hover:bg-white/[.02]">
            <span className="mt-1.5 h-2 w-2 rounded-full shrink-0" style={{ background: LOG_TYPE_COLORS[l.type] || '#8899AA' }} />
            <div className="flex-1 min-w-0">
              <div className="text-sm">
                <span className="font-semibold">{l.user}</span>{' '}
                <span className="text-ink/80">{l.action}</span>
              </div>
              <div className="text-[11px] text-muted mt-0.5 font-mono">{l.ts}</div>
            </div>
            <span
              className="text-[10px] font-bold uppercase tracking-wide px-2 py-0.5 rounded shrink-0"
              style={{ color: LOG_TYPE_COLORS[l.type] || '#8899AA', background: `${LOG_TYPE_COLORS[l.type] || '#8899AA'}1a` }}
            >
              {l.type}
            </span>
          </div>
        ))}
      </Card>
    </div>
  );
}

function DnaTest() {
  return <ModulePlaceholder title="DNA-Test" sub="Forensische Proben" icon="TestTube" />;
}

// Abteilungen, Urlaub, Bonus, … → modules.jsx

Object.assign(window, {
  ModulePlaceholder, Logbuch, DnaTest, Verknuepfungen,
});