// src/pages/humanresources/StaffDirectory.jsx

import React, { useState } from "react";

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

  const [formData, setFormData] = useState({
    name: "",
    department: "",
    designation: "",
    phone: "",
    email: "",
    joiningDate: "",
  });

  const [staff, setStaff] = useState([
    {
      id: 1,
      name: "Rahul Sharma",
      department: "IT",
      designation: "Developer",
      phone: "9876543210",
      email: "rahul@gmail.com",
      joiningDate: "2025-01-15",
      status: "Active",
    },
    {
      id: 2,
      name: "Priya Singh",
      department: "HR",
      designation: "Manager",
      phone: "9876541230",
      email: "priya@gmail.com",
      joiningDate: "2024-08-10",
      status: "Active",
    },
  ]);

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

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

    setStaff([
      ...staff,
      {
        id: Date.now(),
        ...formData,
        status: "Active",
      },
    ]);

    setFormData({
      name: "",
      department: "",
      designation: "",
      phone: "",
      email: "",
      joiningDate: "",
    });
  };

  const deleteStaff = (id) => {
    setStaff(staff.filter((item) => item.id !== id));
  };

  const filteredStaff = staff.filter(
    (item) =>
      item.name.toLowerCase().includes(search.toLowerCase()) ||
      item.department.toLowerCase().includes(search.toLowerCase()) ||
      item.designation.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">
          Staff Directory
        </h1>

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

      {/* Cards */}
      <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">

        <div className="bg-white p-5 rounded-lg shadow">
          <h3 className="text-gray-500">
            Total Staff
          </h3>
          <p className="text-3xl font-bold text-blue-600">
            {staff.length}
          </p>
        </div>

        <div className="bg-white p-5 rounded-lg shadow">
          <h3 className="text-gray-500">
            Active Staff
          </h3>
          <p className="text-3xl font-bold text-green-600">
            {
              staff.filter(
                (s) => s.status === "Active"
              ).length
            }
          </p>
        </div>

        <div className="bg-white p-5 rounded-lg shadow">
          <h3 className="text-gray-500">
            Departments
          </h3>
          <p className="text-3xl font-bold text-purple-600">
            {
              new Set(
                staff.map(
                  (s) => s.department
                )
              ).size
            }
          </p>
        </div>

      </div>

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

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

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

          <input
            type="text"
            name="name"
            placeholder="Staff Name"
            value={formData.name}
            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="text"
            name="phone"
            placeholder="Phone Number"
            value={formData.phone}
            onChange={handleChange}
            className="border p-2 rounded"
          />

          <input
            type="email"
            name="email"
            placeholder="Email Address"
            value={formData.email}
            onChange={handleChange}
            className="border p-2 rounded"
          />

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

        </div>

        <button
          onClick={addStaff}
          className="bg-blue-600 text-white px-5 py-2 rounded mt-4"
        >
          Add 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">
                Name
              </th>
              <th className="p-3 text-left">
                Department
              </th>
              <th className="p-3 text-left">
                Designation
              </th>
              <th className="p-3 text-left">
                Phone
              </th>
              <th className="p-3 text-left">
                Email
              </th>
              <th className="p-3 text-left">
                Joining Date
              </th>
              <th className="p-3 text-left">
                Status
              </th>
              <th className="p-3 text-center">
                Action
              </th>
            </tr>
          </thead>

          <tbody>

            {filteredStaff.map((item) => (
              <tr
                key={item.id}
                className="border-t hover:bg-gray-50"
              >
                <td className="p-3">
                  {item.name}
                </td>

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

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

                <td className="p-3">
                  {item.phone}
                </td>

                <td className="p-3">
                  {item.email}
                </td>

                <td className="p-3">
                  {item.joiningDate}
                </td>

                <td className="p-3">
                  <span className="bg-green-100 text-green-700 px-3 py-1 rounded-full text-sm">
                    {item.status}
                  </span>
                </td>

                <td className="p-3 text-center">
                  <button
                    onClick={() =>
                      deleteStaff(item.id)
                    }
                    className="bg-red-600 text-white px-3 py-1 rounded"
                  >
                    Delete
                  </button>
                </td>

              </tr>
            ))}

          </tbody>

        </table>

      </div>

    </div>
  );
};

export default StaffDirectory;