import { useState } from "react";
import axios from "axios";
import { Link } from "react-router-dom";

function Employee() {
  const [form, setForm] = useState({
    employeeNumber: "",
    firstName: "",
    lastName: "",
    position: "",
    departmentCode: "",
    hiredDate: ""
  });

  const save = async (e) => {
    e.preventDefault();
    await axios.post("http://localhost:5000/employees", form);

    setForm({
      employeeNumber: "",
      firstName: "",
      lastName: "",
      position: "",
      departmentCode: "",
      hiredDate: ""
    });

    alert("Employee saved");
  };

  return (
    <div className="p">
      <div className="w" style={{ maxWidth: 900 }}>
        <div className="h c" style={{ background: "#0891b2", color: "white", border: "none" }}>
          <div>
            <p className="t" style={{ fontSize: 12, textTransform: "uppercase", letterSpacing: "0.3em", color: "#cffafe" }}>Employees</p>
            <h2 className="t" style={{ marginTop: 8, fontSize: 30, fontWeight: 700 }}>Employee Form</h2>
            <p className="m" style={{ marginTop: 8, color: "#ecfeff" }}>Insert operation only.</p>
          </div>
          <Link to="/dashboard" className="b" style={{ background: "rgba(255,255,255,0.15)", color: "white" }}>
            Back
          </Link>
        </div>

        <form onSubmit={save} className="c">
          <h3 className="t" style={{ fontSize: 24, fontWeight: 700, color: "#0f172a" }}>Add Employee</h3>
          <p className="m" style={{ marginTop: 8 }}>Enter employee details and click save.</p>

          <div className="f" style={{ gridTemplateColumns: "repeat(2, 1fr)" }}>
            <input
              placeholder="Employee number"
              value={form.employeeNumber}
              onChange={(e) => setForm({ ...form, employeeNumber: e.target.value })}
              className="i"
              required
            />

            <input
              placeholder="Position"
              value={form.position}
              onChange={(e) => setForm({ ...form, position: e.target.value })}
              className="i"
              required
            />

            <input
              placeholder="First name"
              value={form.firstName}
              onChange={(e) => setForm({ ...form, firstName: e.target.value })}
              className="i"
              required
            />

            <input
              placeholder="Last name"
              value={form.lastName}
              onChange={(e) => setForm({ ...form, lastName: e.target.value })}
              className="i"
              required
            />

            <input
              placeholder="Department code"
              value={form.departmentCode}
              onChange={(e) => setForm({ ...form, departmentCode: e.target.value })}
              className="i"
              required
            />

            <input
              type="date"
              value={form.hiredDate}
              onChange={(e) => setForm({ ...form, hiredDate: e.target.value })}
              className="i"
              required
            />
          </div>

          <button className="b" style={{ marginTop: 24, width: "100%", background: "#0891b2", color: "white" }}>
            Save Employee
          </button>
        </form>
      </div>
    </div>
  );
}

export default Employee;
