"use client";

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

export default function NewEmployeeForm() {
  const router = useRouter();
  const [open, setOpen] = useState(false);
  const [form, setForm] = useState({
    employeeCode: "",
    name: "",
    email: "",
    password: "",
    department: "",
    designation: "",
    phone: "",
  });
  const [error, setError] = useState<string | null>(null);
  const [saving, setSaving] = useState(false);

  function update(key: string, value: string) {
    setForm((f) => ({ ...f, [key]: value }));
  }

  async function onSubmit(e: React.FormEvent) {
    e.preventDefault();
    setSaving(true);
    setError(null);
    try {
      const res = await fetch("/api/employees", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(form),
      });
      if (!res.ok) {
        const d = await res.json().catch(() => ({}));
        setError(d.error || "Failed to create employee");
        return;
      }
      setOpen(false);
      setForm({ employeeCode: "", name: "", email: "", password: "", department: "", designation: "", phone: "" });
      router.refresh();
    } finally {
      setSaving(false);
    }
  }

  if (!open) {
    return (
      <button
        onClick={() => setOpen(true)}
        className="rounded-md bg-indigo-600 hover:bg-indigo-500 text-white text-sm font-medium px-4 py-2 transition"
      >
        + Add employee
      </button>
    );
  }

  return (
    <form
      onSubmit={onSubmit}
      className="rounded-xl border border-slate-800 bg-slate-900 p-5 grid grid-cols-2 gap-3 mb-4"
    >
      {[
        ["employeeCode", "Employee code"],
        ["name", "Full name"],
        ["email", "Email"],
        ["password", "Temporary password"],
        ["department", "Department"],
        ["designation", "Designation"],
        ["phone", "Phone"],
      ].map(([key, label]) => (
        <div key={key}>
          <label className="block text-xs text-slate-400 mb-1">{label}</label>
          <input
            required={["employeeCode", "name", "email", "password"].includes(key)}
            type={key === "password" ? "password" : key === "email" ? "email" : "text"}
            value={form[key as keyof typeof form]}
            onChange={(e) => update(key, e.target.value)}
            className="w-full rounded-md bg-slate-800 border border-slate-700 px-3 py-2 text-sm text-slate-100"
          />
        </div>
      ))}
      {error && <p className="col-span-2 text-sm text-red-400">{error}</p>}
      <div className="col-span-2 flex gap-2">
        <button
          type="submit"
          disabled={saving}
          className="rounded-md bg-indigo-600 hover:bg-indigo-500 disabled:opacity-50 text-white text-sm font-medium px-4 py-2"
        >
          {saving ? "Creating..." : "Create employee"}
        </button>
        <button
          type="button"
          onClick={() => setOpen(false)}
          className="rounded-md bg-slate-800 text-slate-300 text-sm px-4 py-2"
        >
          Cancel
        </button>
      </div>
    </form>
  );
}