"use client";

import { FormEvent, useState } from "react";
import { useRouter } from "next/navigation";

type Role = {
  id: string;
  name: string;
  key: string;
  systemRole?: string | null;
  _count?: { users: number };
  permissions: { id: string; key: string; name: string }[];
};

type Permission = { id: string; key: string; name: string };

export function RolePermissionsForm({ role, permissions }: { role: Role; permissions: Permission[] }) {
  const router = useRouter();
  const [message, setMessage] = useState("");
  const assigned = new Set(role.permissions.map((permission) => permission.id));
  const userCount = role._count?.users ?? 0;
  const canDelete = !role.systemRole && userCount === 0;

  async function submit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    const form = new FormData(event.currentTarget);
    const response = await fetch(`/api/roles/${role.id}`, {
      method: "PATCH",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ permissionIds: form.getAll("permissionIds") })
    });
    setMessage(response.ok ? "Permissions saved." : (await response.json()).error ?? "Could not save permissions.");
    router.refresh();
  }

  async function deleteRole() {
    if (!canDelete || !confirm(`Delete ${role.name}?`)) return;
    const response = await fetch(`/api/roles/${role.id}`, { method: "DELETE" });
    setMessage(response.ok ? "Role deleted." : (await response.json()).error ?? "Could not delete role.");
    router.refresh();
  }

  return (
    <form className="admin-card grid gap-4 p-5" onSubmit={submit}>
      <div className="flex items-start justify-between gap-3">
        <div>
          <h2 className="font-semibold">{role.name}</h2>
          <p className="text-xs uppercase tracking-wide text-slate-500">{role.key}</p>
        </div>
        <span className="rounded-lg bg-slate-100 px-2 py-1 text-xs font-semibold text-slate-500">{userCount} users</span>
      </div>
      <div className="grid gap-2 text-sm">
        {permissions.map((permission) => (
          <label className="flex items-center gap-2 rounded-lg border border-slate-200 px-3 py-2" key={permission.id}>
            <input defaultChecked={assigned.has(permission.id)} name="permissionIds" type="checkbox" value={permission.id} />
            <span>
              <span className="block font-medium">{permission.name}</span>
              <span className="text-xs text-slate-500">{permission.key}</span>
            </span>
          </label>
        ))}
      </div>
      <div className="flex items-center gap-3">
        <button className="brand-button-secondary" type="submit">Save permissions</button>
        {!role.systemRole ? (
          <button className="rounded-lg border border-red-200 px-4 py-2 text-sm font-semibold text-red-700 disabled:cursor-not-allowed disabled:opacity-50" disabled={!canDelete} onClick={deleteRole} type="button">
            Delete role
          </button>
        ) : null}
        {message ? <span className="text-sm text-brand-secondary">{message}</span> : null}
      </div>
      {!role.systemRole && !canDelete ? <p className="text-xs text-slate-500">Custom roles can be deleted only after all users are removed from the role.</p> : null}
    </form>
  );
}