"use client";

import { useState, useTransition } from "react";
import { toast } from "sonner";
import { setRolePermission } from "../actions";
import { Checkbox } from "@/components/ui/checkbox";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import type { Permission, Role } from "@/lib/types";

export function PermissionMatrix({
  roles,
  permissions,
  initialGrants,
  readOnly,
}: {
  roles: Role[];
  permissions: Permission[];
  /** Set of "roleId:permissionId" strings that are granted */
  initialGrants: string[];
  readOnly: boolean;
}) {
  const [grants, setGrants] = useState(new Set(initialGrants));
  const [, startTransition] = useTransition();

  const key = (roleId: string, permId: string) => `${roleId}:${permId}`;

  function toggle(role: Role, perm: Permission, isSuperAdmin: boolean) {
    if (readOnly || isSuperAdmin) return;
    const k = key(role.id, perm.id);
    const granted = !grants.has(k);

    setGrants((prev) => {
      const next = new Set(prev);
      if (granted) next.add(k);
      else next.delete(k);
      return next;
    });

    startTransition(async () => {
      const res = await setRolePermission(role.id, perm.id, granted);
      if (res?.ok) {
        toast.success(
          granted
            ? `Granted "${perm.label}" permission to ${role.name}`
            : `Revoked "${perm.label}" permission from ${role.name}`
        );
      } else {
        toast.error(res?.error || "Could not update permission");
        setGrants((prev) => {
          const next = new Set(prev);
          if (granted) next.delete(k);
          else next.add(k);
          return next;
        });
      }
    });
  }

  return (
    <div className="overflow-x-auto">
      <Table>
        <TableHeader>
          <TableRow>
            <TableHead className="sticky left-0 bg-card">Permission</TableHead>
            {roles.map((r) => (
              <TableHead key={r.id} className="text-center whitespace-nowrap">
                {r.name}
              </TableHead>
            ))}
          </TableRow>
        </TableHeader>
        <TableBody>
          {permissions.map((p) => (
            <TableRow key={p.id}>
              <TableCell className="sticky left-0 bg-card font-medium whitespace-nowrap">
                {p.label}
                <span className="ml-2 text-xs text-muted-foreground">
                  {p.resource}.{p.action}
                </span>
              </TableCell>
              {roles.map((r) => {
                const isSA = r.slug === "super-admin";
                const checked = isSA || grants.has(key(r.id, p.id));
                return (
                  <TableCell key={r.id} className="text-center">
                    <Checkbox
                      checked={checked}
                      disabled={readOnly || isSA}
                      onCheckedChange={() => toggle(r, p, isSA)}
                    />
                  </TableCell>
                );
              })}
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </div>
  );
}