"use client";

import { useEffect, useState } from "react";
import { Table } from "@nexarch/shl";
import type { TableColumn } from "@nexarch/shl";
import { Preference, fetchTenantOverview } from "../../lib/api";

// Akzeptanzkriterium 3: Tenant-Admin sieht eine Übersicht der
// Benachrichtigungs-Konfiguration seines Tenants. Zugriffsbeschränkung
// (nur Tenant-Admin) ist RBAC-02s Aufgabe vor diesem Endpunkt, siehe
// internal/notifyprefs/handler.go.
export default function OverviewPage() {
  const [prefs, setPrefs] = useState<Preference[] | null>(null);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    fetchTenantOverview()
      .then(setPrefs)
      .catch(() => setError("Übersicht konnte nicht geladen werden. Nur Tenant-Admins haben Zugriff."));
  }, []);

  const columns: TableColumn<Preference>[] = [
    { key: "user", header: "Benutzer-ID", render: (p) => p.UserID },
    { key: "event", header: "Ereignistyp", render: (p) => p.EventType },
    { key: "channel", header: "Kanal", render: (p) => p.Channel },
    { key: "enabled", header: "Aktiviert", render: (p) => (p.Enabled ? "Ja" : "Nein") },
  ];

  return (
    <main style={{ maxWidth: 800, margin: "40px auto", padding: "0 16px" }}>
      <h1>Benachrichtigungs-Übersicht (Mandant)</h1>
      {error && <p role="alert">{error}</p>}
      {prefs && (
        <Table
          columns={columns}
          rows={prefs}
          rowKey={(p) => `${p.UserID}-${p.EventType}-${p.Channel}`}
          caption="Von der Standardeinstellung abweichende Benachrichtigungspräferenzen aller Benutzer"
        />
      )}
    </main>
  );
}