"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 };
type User = {
  id: string;
  name: string | null;
  email: string;
  status: string;
  teamId: string | null;
  roles: Role[];
  projects: Project[];
};

export function UserEditForm({ user, roles, teams, projects }: { user: User; roles: Role[]; teams: Team[]; projects: Project[] }) {
  const router = useRouter();
  const [message, setMessage] = useState("");
  const assignedRoles = new Set(user.roles.map((role) => role.id));
  const assignedProjects = new Set(user.projects.map((project) => project.id));

  async function submit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    const form = new FormData(event.currentTarget);
    const password = String(form.get("password") ?? "");
    const response = await fetch(`/api/users/${user.id}`, {
      method: "PATCH",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        name: form.get("name"),
        email: form.get("email"),
        status: form.get("status"),
        teamId: form.get("teamId") || null,
        roleIds: form.getAll("roleIds"),
        projectIds: form.getAll("projectIds"),
        ...(password ? { password } : {})
      })
    });
    setMessage(response.ok ? "User saved." : (await response.json()).error ?? "Could not save user.");
    router.refresh();
  }

  return (
    <form className="mt-6 grid gap-5" onSubmit={submit}>
      <section className="grid gap-3 rounded-lg border border-brand-primary/20 bg-white p-5 shadow-sm md:grid-cols-2">
        <h2 className="text-lg font-semibold md:col-span-2">Profile</h2>
        <label className="grid gap-1 text-xs font-medium text-slate-500">
          Name
          <input className="rounded-lg border border-slate-300 px-3 py-2 text-sm" name="name" defaultValue={user.name ?? ""} required />
        </label>
        <label className="grid gap-1 text-xs font-medium text-slate-500">
          Email
          <input className="rounded-lg border border-slate-300 px-3 py-2 text-sm" name="email" defaultValue={user.email} required type="email" />
        </label>
        <label className="grid gap-1 text-xs font-medium text-slate-500">
          Status
          <select className="rounded-lg border border-slate-300 px-3 py-2 text-sm" name="status" defaultValue={user.status}>
            <option value="active">Active</option>
            <option value="inactive">Inactive</option>
          </select>
        </label>
        <label className="grid gap-1 text-xs font-medium text-slate-500">
          Team
          <select className="rounded-lg border border-slate-300 px-3 py-2 text-sm" name="teamId" defaultValue={user.teamId ?? ""}>
            <option value="">No team</option>
            {teams.map((team) => <option key={team.id} value={team.id}>{team.name}</option>)}
          </select>
        </label>
        <label className="grid gap-1 text-xs font-medium text-slate-500 md:col-span-2">
          New password
          <input className="rounded-lg border border-slate-300 px-3 py-2 text-sm" name="password" placeholder="Leave blank to keep current password" type="password" />
        </label>
      </section>
      <section className="grid gap-3 rounded-lg border border-brand-primary/20 bg-white p-5 shadow-sm md:grid-cols-2">
        <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 defaultChecked={assignedRoles.has(role.id)} 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 defaultChecked={assignedProjects.has(project.id)} name="projectIds" type="checkbox" value={project.id} />
              {project.name}
            </label>
          ))}
        </div>
      </section>
      <div className="flex items-center gap-3">
        <button className="brand-button" type="submit">Save user</button>
        {message ? <span className="text-sm text-brand-secondary">{message}</span> : null}
      </div>
    </form>
  );
}