"use client";

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

type User = { id: string; name: string | null; email: string };
type Team = { id: string; name: string; users: User[] };

export function TeamEditForm({ team, users }: { team: Team; users: User[] }) {
  const router = useRouter();
  const [message, setMessage] = useState("");
  const assigned = new Set(team.users.map((user) => user.id));

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

  return (
    <form className="mt-6 grid gap-3 rounded-lg border border-brand-primary/20 bg-white p-5 shadow-sm" onSubmit={submit}>
      <h2 className="text-lg font-semibold">Edit team</h2>
      <label className="grid gap-1 text-xs font-medium text-slate-500">
        Team name
        <input className="rounded-lg border border-slate-300 px-3 py-2 text-sm" name="name" defaultValue={team.name} required />
      </label>
      <div className="grid gap-2 text-sm md:grid-cols-2">
        {users.map((user) => (
          <label className="flex items-center gap-2" key={user.id}>
            <input defaultChecked={assigned.has(user.id)} name="userIds" type="checkbox" value={user.id} />
            {user.name ?? user.email}
          </label>
        ))}
      </div>
      <div className="flex items-center gap-3">
        <button className="brand-button-secondary" type="submit">Save team</button>
        {message ? <span className="text-sm text-brand-secondary">{message}</span> : null}
      </div>
    </form>
  );
}