"use client";

import { useState } from "react";
import { API_URL } from '@/lib/api';

interface AddEmployeeModalProps {
  onClose: () => void;
  onEmployeeAdded: () => void;
}

export default function AddEmployeeModal({
  onClose,
  onEmployeeAdded,
}: AddEmployeeModalProps) {
  const [form, setForm] = useState({
    fullName: "",
    department: "",
    designation: "",
    phone: "",
    email: "",
    joiningDate: "",
    employmentStatus: "ACTIVE",
    reportingManager: "",
    trainingStatus: "ONGOING",
    notes: "",
  });

  function updateField(field: string, value: string) {
    setForm((prev) => ({ ...prev, [field]: value }));
  }

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();

    const res = await fetch(`${API_URL}/api/employees`, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(form),
    });

    if (res.ok) {
      onEmployeeAdded();
      onClose();
    }
  }

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/30 px-4">
      <div className="w-full max-w-3xl rounded-2xl bg-white p-8 shadow-2xl">
        <div className="mb-6">
          <h2 className="text-2xl font-bold text-slate-900">Add Employee</h2>
          <p className="text-sm text-slate-500">
            Create a new employee record.
          </p>
        </div>

        <form onSubmit={handleSubmit} className="grid grid-cols-2 gap-4">
          {[
            ["fullName", "Full Name"],
            ["department", "Department"],
            ["designation", "Designation"],
            ["phone", "Phone"],
            ["email", "Email"],
            ["joiningDate", "Joining Date"],
            ["reportingManager", "Reporting Manager"],
            ["trainingStatus", "Training Status"],
            ["employmentStatus", "Employment Status"],
          ].map(([field, label]) => (
            <div key={field}>
              <label className="mb-1 block text-sm font-medium text-slate-700">
                {label}
              </label>
              <input
                type={field === "joiningDate" ? "date" : "text"}
                value={form[field as keyof typeof form]}
                onChange={(e) => updateField(field, e.target.value)}
                className="w-full rounded-xl border border-slate-200 px-4 py-3 text-sm outline-none focus:ring-2 focus:ring-[#1296E8]"
              />
            </div>
          ))}

          <div className="col-span-2">
            <label className="mb-1 block text-sm font-medium text-slate-700">
              Notes
            </label>
            <textarea
              value={form.notes}
              onChange={(e) => updateField("notes", e.target.value)}
              className="h-24 w-full rounded-xl border border-slate-200 px-4 py-3 text-sm outline-none focus:ring-2 focus:ring-[#1296E8]"
            />
          </div>

          <div className="col-span-2 mt-4 flex justify-end gap-3">
            <button
              type="button"
              onClick={onClose}
              className="rounded-xl border border-slate-200 px-5 py-3 font-semibold text-slate-700"
            >
              Cancel
            </button>

            <button
              type="submit"
              className="rounded-xl bg-[#EE302B] px-5 py-3 font-semibold text-white"
            >
              Save Employee
            </button>
          </div>
        </form>
      </div>
    </div>
  );
}