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

function Department() {
  const [form, setForm] = useState({
    departmentCode: "",
    departmentName: "",
    grossSalary: ""
  });

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

    setForm({
      departmentCode: "",
      departmentName: "",
      grossSalary: ""
    });

    alert("Department saved");
  };

  return (
    <div className="p">
      <div className="w" style={{ maxWidth: 900 }}>
        <div className="h c" style={{ background: "#059669", color: "white", border: "none" }}>
          <div>
            <p className="t" style={{ fontSize: 12, textTransform: "uppercase", letterSpacing: "0.3em", color: "#d1fae5" }}>Departments</p>
            <h2 className="t" style={{ marginTop: 8, fontSize: 30, fontWeight: 700 }}>Department Form</h2>
            <p className="m" style={{ marginTop: 8, color: "#ecfdf5" }}>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 Department</h3>
          <p className="m" style={{ marginTop: 8 }}>Enter department details and click save.</p>

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

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

            <input
              type="number"
              placeholder="Gross salary"
              value={form.grossSalary}
              onChange={(e) => setForm({ ...form, grossSalary: e.target.value })}
              className="i"
              required
            />
          </div>

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

export default Department;
