// src/components/admin/staff-manager.tsx — gestion des opérateurs Staff SYS.
// Client component: tableau des staff (2FA, nb. permissions), création,
// promotion d'un compte existant, grille de permissions (checkboxes groupées
// par ressource) et retrait. Chaque mutation appelle une server action gatée
// staff:manage + auditée ; succès → toast + router.refresh() (source de
// vérité = le prop `initialStaff`, rafraîchi par le RSC parent — même
// convention que users-table.tsx/org-detail.tsx, pas de copie locale).
"use client";

import { useRouter } from "next/navigation";
import { useTranslations } from "next-intl";
import { useState, useTransition } from "react";
import { toast } from "sonner";
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Checkbox } from "@/components/ui/checkbox";
import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import {
  createStaffAction,
  promoteToStaffAction,
  removeStaffAction,
  setStaffPermissionsAction,
} from "@/lib/admin/staff-actions";
import type { StaffRow } from "@/lib/admin/staff-management/core";
import { SYS_PERMISSION_GROUPS } from "@/lib/auth/sys-permissions-const";

type Runner = (
  action: () => Promise<{ ok: true } | { ok: false; error: string }>,
  okMsg: string,
  onSuccess?: () => void,
) => void;

export function StaffManager({ initialStaff }: { initialStaff: StaffRow[] }) {
  const t = useTranslations("SuperAdmin");
  const router = useRouter();
  const [pending, startTransition] = useTransition();

  // Source de vérité = le prop (rafraîchi par le parent RSC via
  // router.refresh()) — pas de copie useState, cf. AdminUsersTable.
  const staff = initialStaff;

  const run: Runner = (action, okMsg, onSuccess) => {
    startTransition(async () => {
      try {
        const res = await action();
        if (res.ok) {
          toast.success(okMsg);
          onSuccess?.();
          router.refresh();
        } else {
          toast.error(res.error);
        }
      } catch (err) {
        toast.error(err instanceof Error ? err.message : t("actionError"));
      }
    });
  };

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <h1 className="font-semibold text-xl">{t("staffTitle")}</h1>
        <div className="flex gap-2">
          <PromoteDialog pending={pending} run={run} />
          <CreateStaffDialog pending={pending} run={run} />
        </div>
      </div>

      <Table>
        <TableHeader>
          <TableRow>
            <TableHead>{t("detailUsername")}</TableHead>
            <TableHead>{t("orgMemberEmail")}</TableHead>
            <TableHead>{t("badge2faOn")}</TableHead>
            <TableHead>{t("staffPermissions")}</TableHead>
            <TableHead className="text-right">
              {t("orgMemberActions")}
            </TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          {staff.length === 0 ? (
            <TableRow>
              <TableCell
                colSpan={5}
                className="text-center text-muted-foreground"
              >
                {t("staffEmpty")}
              </TableCell>
            </TableRow>
          ) : (
            staff.map((s) => (
              <TableRow key={s.id}>
                <TableCell className="font-medium">{s.name}</TableCell>
                <TableCell className="text-muted-foreground">
                  {s.email}
                </TableCell>
                <TableCell>
                  {s.twoFactorEnabled ? (
                    <Badge variant="secondary">{t("badge2faOn")}</Badge>
                  ) : (
                    <Badge variant="destructive">{t("staffNoTwoFa")}</Badge>
                  )}
                </TableCell>
                <TableCell className="tabular-nums">
                  {s.permissions.length}
                </TableCell>
                <TableCell>
                  <div className="flex items-center justify-end gap-2">
                    <PermissionsDialog row={s} pending={pending} run={run} />
                    <AlertDialog>
                      <AlertDialogTrigger asChild>
                        <Button variant="ghost" size="sm" disabled={pending}>
                          {t("staffRemove")}
                        </Button>
                      </AlertDialogTrigger>
                      <AlertDialogContent>
                        <AlertDialogHeader>
                          <AlertDialogTitle>
                            {t("staffRemove")}
                          </AlertDialogTitle>
                          <AlertDialogDescription>
                            {s.email}
                          </AlertDialogDescription>
                        </AlertDialogHeader>
                        <AlertDialogFooter>
                          <AlertDialogCancel>{t("cancel")}</AlertDialogCancel>
                          <AlertDialogAction
                            onClick={() =>
                              run(
                                () => removeStaffAction(s.id),
                                t("staffRemove"),
                              )
                            }
                          >
                            {t("staffRemove")}
                          </AlertDialogAction>
                        </AlertDialogFooter>
                      </AlertDialogContent>
                    </AlertDialog>
                  </div>
                </TableCell>
              </TableRow>
            ))
          )}
        </TableBody>
      </Table>
    </div>
  );
}

// ─── Create staff dialog ─────────────────────────────────────────────────────

function CreateStaffDialog({
  pending,
  run,
}: {
  pending: boolean;
  run: Runner;
}) {
  const t = useTranslations("SuperAdmin");
  const tAuth = useTranslations("Auth");
  const [open, setOpen] = useState(false);
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  function reset() {
    setName("");
    setEmail("");
    setPassword("");
  }

  return (
    <Dialog
      open={open}
      onOpenChange={(v) => {
        setOpen(v);
        if (!v) reset();
      }}
    >
      <DialogTrigger asChild>
        <Button size="sm" disabled={pending}>
          {t("staffCreate")}
        </Button>
      </DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>{t("staffCreate")}</DialogTitle>
          <DialogDescription>{t("staffTitle")}</DialogDescription>
        </DialogHeader>
        <div className="space-y-3">
          <div className="space-y-1">
            <Label htmlFor="staff-create-name">{tAuth("nameLabel")}</Label>
            <Input
              id="staff-create-name"
              value={name}
              onChange={(e) => setName(e.target.value)}
            />
          </div>
          <div className="space-y-1">
            <Label htmlFor="staff-create-email">{t("emailLabel")}</Label>
            <Input
              id="staff-create-email"
              type="email"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
            />
          </div>
          <div className="space-y-1">
            <Label htmlFor="staff-create-password">
              {tAuth("passwordLabel")}
            </Label>
            <Input
              id="staff-create-password"
              type="password"
              value={password}
              onChange={(e) => setPassword(e.target.value)}
            />
          </div>
        </div>
        <DialogFooter>
          <DialogClose asChild>
            <Button variant="ghost">{t("cancel")}</Button>
          </DialogClose>
          <Button
            disabled={
              pending ||
              name.trim() === "" ||
              email.trim() === "" ||
              password === ""
            }
            onClick={() =>
              run(
                () =>
                  createStaffAction({
                    name: name.trim(),
                    email: email.trim(),
                    password,
                  }),
                t("staffCreate"),
                () => {
                  setOpen(false);
                  reset();
                },
              )
            }
          >
            {t("save")}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}

// ─── Promote dialog ───────────────────────────────────────────────────────────

function PromoteDialog({ pending, run }: { pending: boolean; run: Runner }) {
  const t = useTranslations("SuperAdmin");
  const [open, setOpen] = useState(false);
  const [email, setEmail] = useState("");

  return (
    <Dialog
      open={open}
      onOpenChange={(v) => {
        setOpen(v);
        if (!v) setEmail("");
      }}
    >
      <DialogTrigger asChild>
        <Button variant="secondary" size="sm" disabled={pending}>
          {t("staffPromote")}
        </Button>
      </DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>{t("staffPromote")}</DialogTitle>
        </DialogHeader>
        <div className="space-y-1">
          <Label htmlFor="staff-promote-email">{t("emailLabel")}</Label>
          <Input
            id="staff-promote-email"
            type="email"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
          />
        </div>
        <DialogFooter>
          <DialogClose asChild>
            <Button variant="ghost">{t("cancel")}</Button>
          </DialogClose>
          <Button
            disabled={pending || email.trim() === ""}
            onClick={() =>
              run(
                () => promoteToStaffAction(email.trim()),
                t("staffPromote"),
                () => setOpen(false),
              )
            }
          >
            {t("staffPromote")}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}

// ─── Permissions grid dialog ──────────────────────────────────────────────────

function groupLabel(key: string): string {
  return key.charAt(0).toUpperCase() + key.slice(1);
}

function PermissionsDialog({
  row,
  pending,
  run,
}: {
  row: StaffRow;
  pending: boolean;
  run: Runner;
}) {
  const t = useTranslations("SuperAdmin");
  const [open, setOpen] = useState(false);
  const [selected, setSelected] = useState<Set<string>>(
    () => new Set(row.permissions),
  );

  function toggle(perm: string, checked: boolean) {
    setSelected((prev) => {
      const next = new Set(prev);
      if (checked) next.add(perm);
      else next.delete(perm);
      return next;
    });
  }

  return (
    <Dialog
      open={open}
      onOpenChange={(v) => {
        setOpen(v);
        if (v) setSelected(new Set(row.permissions));
      }}
    >
      <DialogTrigger asChild>
        <Button variant="outline" size="sm" disabled={pending}>
          {t("staffPermissions")}
        </Button>
      </DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>{t("staffPermissions")}</DialogTitle>
          <DialogDescription>{row.email}</DialogDescription>
        </DialogHeader>
        <div className="space-y-4">
          {Object.entries(SYS_PERMISSION_GROUPS).map(([group, perms]) => (
            <div key={group} className="space-y-2">
              <h3 className="font-medium text-sm">{groupLabel(group)}</h3>
              <div className="grid grid-cols-2 gap-2">
                {perms.map((perm) => (
                  <div key={perm} className="flex items-center gap-2">
                    <Checkbox
                      id={`staff-perm-${row.id}-${perm}`}
                      checked={selected.has(perm)}
                      onCheckedChange={(v) => toggle(perm, v === true)}
                    />
                    <Label
                      htmlFor={`staff-perm-${row.id}-${perm}`}
                      className="font-mono text-xs"
                    >
                      {perm}
                    </Label>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
        <DialogFooter>
          <DialogClose asChild>
            <Button variant="ghost">{t("cancel")}</Button>
          </DialogClose>
          <DialogClose asChild>
            <Button
              disabled={pending}
              onClick={() =>
                run(
                  () => setStaffPermissionsAction(row.id, [...selected]),
                  t("save"),
                )
              }
            >
              {t("save")}
            </Button>
          </DialogClose>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}