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

export const dynamic = "force-dynamic";

export default async function MembersPage() {
  const t = await getDict();
  const user = await getCurrentUser();
  if (!user) redirect("/login");
  if (!user.permissions.includes("members.view")) {
    return (
      <div className="rounded-xl border border-slate-200 bg-white p-10 text-center shadow-card">
        <p className="font-bold text-slate-700">{t.nav.members} — {t.members.revealNeedsPerm}</p>
        <p className="mt-1 text-sm text-slate-400">هذه الصفحة مقيدة بصلاحية <code dir="ltr">members.view</code></p>
      </div>
    );
  }

  const { status, data } = await apiFetch<{ items: MemberListItem[]; total: number }>("/api/members?pageSize=50");
  const canManage = user.permissions.includes("members.manage");

  return (
    <div className="space-y-6">
      <header>
        <h1 className="text-2xl font-extrabold text-slate-900">{t.members.title}</h1>
        <p className="mt-1 text-sm text-slate-500">
          {t.members.subtitle}
        </p>
      </header>
      <MembersManager
        initialItems={status === 200 ? (data?.items ?? []) : []}
        initialTotal={status === 200 ? (data?.total ?? 0) : 0}
        canManage={canManage}
        canSeeContact={user.permissions.includes("members.view_contact_details")}
      />
    </div>
  );
}