"use client";

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

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

export function RoleCreateForm({ permissions }: { permissions: Permission[] }) {
  const router = useRouter();
  const [message, setMessage] = useState("");

  async function submit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    const form = new FormData(event.currentTarget);
    const response = await fetch("/api/roles", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ name: form.get("name"), permissionIds: form.getAll("permissionIds") })
    });
    setMessage(response.ok ? "Role created." : (await response.json()).error ?? "Could not create role.");
    if (response.ok) {
      event.currentTarget.reset();
      router.refresh();
    }
  }

  return (
    <form className="admin-card mt-6 grid gap-4 p-5" onSubmit={submit}>
      <h2 className="text-lg font-semibold">Create custom role</h2>
      <input className="admin-input" name="name" placeholder="Role name" required />
      <div className="grid gap-2 text-sm md:grid-cols-2">
        {permissions.map((permission) => (
          <label className="flex items-center gap-2" key={permission.id}>
            <input name="permissionIds" type="checkbox" value={permission.id} />
            {permission.name}
          </label>
        ))}
      </div>
      <div className="flex items-center gap-3">
        <button className="brand-button" type="submit">Create role</button>
        {message ? <span className="text-sm text-brand-secondary">{message}</span> : null}
      </div>
    </form>
  );
}