import React, { useState, useEffect } from "react";
import { useNavigate, useParams } from "react-router";
import { toast } from "react-toastify";
import { addEmployee } from "../new/api";
import { editEmployee } from "../edit/api";
import "./ContactFormPage.css";

export default function EmployeeFormPage() {
  const { id } = useParams();
  const isEdit = !!id;
  const navigate = useNavigate();
  const [loading, setLoading] = useState(false);
  const [employee, setEmployee] = useState({});

  const handleChange = (e) => {
    const { name, value, type, checked } = e.target;
    setEmployee((p) => ({
      ...p,
      [name]: type === "checkbox" ? checked : value,
    }));
  };

  const handleSubmit = async (e) => {
    e.preventDefault();

    if (!employee.FirstName || !employee.LastName) {
      toast.error("First & last name required");
      return;
    }

    try {
      setLoading(true);

      if (isEdit) {
        await editEmployee(employee);
        toast.success("Employee updated!");
      } else {
        await addEmployee(employee);
        toast.success("Employee created!");
      }

      navigate("/employees");
    } catch (err) {
      console.error(err);
      toast.error("Operation failed.");
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="contactFormWrapper">
      <div className="formCard">
        <div className="formHeader">
          <h2>{isEdit ? "Edit Employee" : "Create Employee"}</h2>
        </div>

        <form onSubmit={handleSubmit} className="contactForm">
          {/* General Section */}
          <section className="section">
            <h5 className="sectionTitle">General Details</h5>

            <div className="contactFormBody">
              <div className="formGroup">
                <label className="formLabel">
                  First Name <span className="required">*</span>
                </label>
                <input
                  name="FirstName"
                  className="formControl"
                  value={employee.FirstName ?? ""}
                  onChange={handleChange}
                />
              </div>

              <div className="formGroup">
                <label className="formLabel">Middle Name</label>
                <input
                  name="MiddleName"
                  className="formControl"
                  value={employee.MiddleName ?? ""}
                  onChange={handleChange}
                />
              </div>

              <div className="formGroup">
                <label className="formLabel">
                  Last Name <span className="required">*</span>
                </label>
                <input
                  name="LastName"
                  className="formControl"
                  value={employee.LastName ?? ""}
                  onChange={handleChange}
                />
              </div>

              <div className="formGroup">
                <label className="formLabel">Job Title</label>
                <input
                  name="JobTitle"
                  className="formControl"
                  value={employee.JobTitle ?? ""}
                  onChange={handleChange}
                />
              </div>

              <div className="formGroup">
                <label className="formLabel">Department</label>
                <input
                  name="Department"
                  className="formControl"
                  value={employee.Department ?? ""}
                  onChange={handleChange}
                />
              </div>

              <div className="formGroup">
                <label className="formLabel">Status</label>
                <select
                  name="Status"
                  className="formControl"
                  value={employee.Status ?? ""}
                  onChange={handleChange}
                >
                  <option value="">Select</option>
                  <option value="Active">Active</option>
                  <option value="Terminated">Terminated</option>
                  <option value="Leave">Leave</option>
                </select>
              </div>

              <div className="formGroup fullWidth">
                <label className="formLabel">About</label>
                <input
                  name="About"
                  className="formControl"
                  value={employee.About ?? ""}
                  onChange={handleChange}
                />
              </div>
            </div>
          </section>

          <hr />

          {/* Contact info */}
          <section className="section">
            <h5 className="sectionTitle">Contact Information</h5>

            <div className="contactFormBody">
              <div className="formGroup">
                <label className="formLabel">Email</label>
                <input
                  name="Email"
                  className="formControl"
                  value={employee.Email ?? ""}
                  onChange={handleChange}
                />
              </div>

              <div className="formGroup">
                <label className="formLabel">Phone</label>
                <input
                  name="Phone"
                  className="formControl"
                  value={employee.Phone ?? ""}
                  onChange={handleChange}
                />
              </div>
            </div>
          </section>

          <hr />

          {/* Submit */}
          <div className="formActions">
            <div className="formNote">
              All fields marked <span className="required">*</span> are required
            </div>
            <button className="btnPrimary" type="submit" disabled={loading}>
              {loading ? "Saving..." : isEdit ? "Update Employee" : "Create Employee"}
            </button>
          </div>
        </form>
      </div>
    </div>
  );
}