import { redirect } from "next/navigation";
import { apiFetch, getCurrentUser } from "@/lib/api";
import { getDict } from "@/lib/i18n";
import { SecretariatsReport } from "@/components/SecretariatsReport";

export const dynamic = "force-dynamic";

export interface SecretariatRow {
  id: number;
  name_ar: string;
  governorate_name: string | null;
  members: number;
  open_positions: number;
  status_member: number;
  status_associate: number;
  status_verification: number;
  status_suspended: number;
  status_unspecified: number;
  readiness_note: string;
}

export default async function ReportsPage() {
  const user = await getCurrentUser();
  if (!user) redirect("/login");
  if (!user.permissions.includes("reports.view")) redirect("/dashboard");
  const t = await getDict();

  const res = await apiFetch<{ items: SecretariatRow[] }>("/api/reports/secretariats");

  return (
    <div className="space-y-6">
      <header>
        <h1 className="text-2xl font-extrabold text-slate-900">{t.reports.title}</h1>
        <p className="mt-1 text-sm text-slate-500">{t.reports.subtitle}</p>
      </header>
      <SecretariatsReport initialItems={res.status === 200 ? res.data?.items ?? [] : []} />
    </div>
  );
}