import React, { useState } from "react";

const DisabledStaff = () => {
  const [search, setSearch] = useState("");

  const [formData, setFormData] = useState({
    staffId: "",
    staffName: "",
    department: "",
    designation: "",
    disableDate: "",
    reason: "",
  });

  const [staffList, setStaffList] = useState([
    {
      id: 1,
      staffId: "EMP001",
      staffName: "Rahul Sharma",
      department: "IT",
      designation: "Developer",
      disableDate: "2026-06-01",
      reason: "Resigned",
    },
  ]);

  const handleChange = (e) => {
    setFormData({
      ...formData,
      [e.target.name]: e.target.value,
    });
  };

  const addStaff = () => {
    if (
      !formData.staffId ||
      !formData.staffName ||
      !formData.department
    ) {
      alert("Please fill required fields");
      return;
    }

    setStaffList([
      ...staffList,
      {
        id: Date.now(),
        ...formData,
      },
    ]);

    setFormData({
      staffId: "",
      staffName: "",
      department: "",
      designation: "",
      disableDate: "",
      reason: "",
    });
  };

  const deleteStaff = (id) => {
    setStaffList(
      staffList.filter((staff) => staff.id !== id)
    );
  };

  const filteredStaff = staffList.filter(
    (item) =>
      item.staffName
        .toLowerCase()
        .includes(search.toLowerCase()) ||
      item.staffId
        .toLowerCase()
        .includes(search.toLowerCase())
  );

  return (
    <div className="p-6 bg-gray-100 min-h-screen">

      {/* Header */}
      <div className="flex justify-between items-center mb-6">
        <h1 className="text-2xl font-bold">
          Disabled Staff
        </h1>

        <div className="bg-white px-4 py-2 rounded-lg shadow">
          Total Disabled Staff : {staffList.length}
        </div>
      </div>

      {/* Form */}
      <div className="bg-white p-6 rounded-lg shadow mb-6">

        <h2 className="text-lg font-semibold mb-4">
          Disable Staff Record
        </h2>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">

          <input
            type="text"
            name="staffId"
            placeholder="Staff ID"
            value={formData.staffId}
            onChange={handleChange}
            className="border p-2 rounded"
          />

          <input
            type="text"
            name="staffName"
            placeholder="Staff Name"
            value={formData.staffName}
            onChange={handleChange}
            className="border p-2 rounded"
          />

          <input
            type="text"
            name="department"
            placeholder="Department"
            value={formData.department}
            onChange={handleChange}
            className="border p-2 rounded"
          />

          <input
            type="text"
            name="designation"
            placeholder="Designation"
            value={formData.designation}
            onChange={handleChange}
            className="border p-2 rounded"
          />

          <input
            type="date"
            name="disableDate"
            value={formData.disableDate}
            onChange={handleChange}
            className="border p-2 rounded"
          />

        </div>

        <textarea
          rows="4"
          name="reason"
          placeholder="Reason For Disable"
          value={formData.reason}
          onChange={handleChange}
          className="border p-2 rounded w-full mt-4"
        />

        <button
          onClick={addStaff}
          className="bg-red-600 text-white px-5 py-2 rounded mt-4"
        >
          Disable Staff
        </button>

      </div>

      {/* Search */}
      <div className="bg-white p-4 rounded-lg shadow mb-6">
        <input
          type="text"
          placeholder="Search Staff..."
          value={search}
          onChange={(e) =>
            setSearch(e.target.value)
          }
          className="border p-2 rounded w-full md:w-1/3"
        />
      </div>

      {/* Table */}
      <div className="bg-white rounded-lg shadow overflow-x-auto">

        <table className="w-full">

          <thead className="bg-gray-100">
            <tr>
              <th className="p-3 text-left">
                Staff ID
              </th>
              <th className="p-3 text-left">
                Staff Name
              </th>
              <th className="p-3 text-left">
                Department
              </th>
              <th className="p-3 text-left">
                Designation
              </th>
              <th className="p-3 text-left">
                Disable Date
              </th>
              <th className="p-3 text-left">
                Reason
              </th>
              <th className="p-3 text-center">
                Action
              </th>
            </tr>
          </thead>

          <tbody>

            {filteredStaff.length > 0 ? (
              filteredStaff.map((staff) => (
                <tr
                  key={staff.id}
                  className="border-t hover:bg-gray-50"
                >
                  <td className="p-3">
                    {staff.staffId}
                  </td>

                  <td className="p-3">
                    {staff.staffName}
                  </td>

                  <td className="p-3">
                    {staff.department}
                  </td>

                  <td className="p-3">
                    {staff.designation}
                  </td>

                  <td className="p-3">
                    {staff.disableDate}
                  </td>

                  <td className="p-3">
                    {staff.reason}
                  </td>

                  <td className="p-3 text-center">
                    <button
                      onClick={() =>
                        deleteStaff(staff.id)
                      }
                      className="bg-red-600 text-white px-3 py-1 rounded"
                    >
                      Delete
                    </button>
                  </td>
                </tr>
              ))
            ) : (
              <tr>
                <td
                  colSpan="7"
                  className="text-center p-6 text-gray-500"
                >
                  No Disabled Staff Found
                </td>
              </tr>
            )}

          </tbody>

        </table>

      </div>
    </div>
  );
};

export default DisabledStaff;