"use client";

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

type Role = { id: string; name: string; key: string };
type Team = { id: string; name: string };
type Project = { id: string; name: string };

export function UserForm({ roles, teams, projects }: { roles: Role[]; teams: Team[]; projects: Project[] }) {
  const router = useRouter();
  const [status, setStatus] = useState("");

  async function submit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    setStatus("");
    const form = new FormData(event.currentTarget);
    const response = await fetch("/api/users", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        name: form.get("name"),
        email: form.get("email"),
        password: form.get("password"),
        teamId: form.get("teamId") || null,
        roleIds: form.getAll("roleIds"),
        projectIds: form.getAll("projectIds")
      })
    });
    if (!response.ok) {
      const payload = await response.json();
      setStatus(payload.error ?? "Could not create user.");
      return;
    }
    event.currentTarget.reset();
    router.refresh();
  }

  return (
    <form className="grid gap-3 rounded-lg border border-brand-primary/20 bg-white p-5 shadow-sm" onSubmit={submit}>
      <h2 className="text-lg font-semibold">Create user</h2>
      <input className="rounded-lg border border-slate-300 px-3 py-2 text-sm" name="name" placeholder="Name" />
      <input className="rounded-lg border border-slate-300 px-3 py-2 text-sm" name="email" placeholder="Email" required />
      <input className="rounded-lg border border-slate-300 px-3 py-2 text-sm" name="password" placeholder="Temporary password" required type="password" />
      <select className="rounded-lg border border-slate-300 px-3 py-2 text-sm" name="teamId">
        <option value="">No team</option>
        {teams.map((team) => <option key={team.id} value={team.id}>{team.name}</option>)}
      </select>
      <div className="grid gap-2 text-sm">
        <p className="font-medium">Roles</p>
        {roles.map((role) => (
          <label className="flex items-center gap-2" key={role.id}>
            <input name="roleIds" type="checkbox" value={role.id} />
            {role.name}
          </label>
        ))}
      </div>
      <div className="grid gap-2 text-sm">
        <p className="font-medium">Projects</p>
        {projects.map((project) => (
          <label className="flex items-center gap-2" key={project.id}>
            <input name="projectIds" type="checkbox" value={project.id} />
            {project.name}
          </label>
        ))}
      </div>
      <button className="brand-button" type="submit">Create user</button>
      {status ? <p className="text-sm text-brand-primary">{status}</p> : null}
    </form>
  );
}