import React, { useState } from "react";

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

  const [formData, setFormData] = useState({
    employee: "",
    department: "",
    basicSalary: "",
    allowance: "",
    deduction: "",
  });

  const [payrolls, setPayrolls] = useState([
    {
      id: 1,
      employee: "Rahul Sharma",
      department: "IT",
      basicSalary: 30000,
      allowance: 5000,
      deduction: 2000,
      status: "Paid",
    },
    {
      id: 2,
      employee: "Neha Verma",
      department: "Accounts",
      basicSalary: 28000,
      allowance: 3000,
      deduction: 1000,
      status: "Pending",
    },
  ]);

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

  const addPayroll = () => {
    if (
      !formData.employee ||
      !formData.department ||
      !formData.basicSalary
    ) {
      alert("Please fill required fields");
      return;
    }

    setPayrolls([
      ...payrolls,
      {
        id: Date.now(),
        ...formData,
        status: "Pending",
      },
    ]);

    setFormData({
      employee: "",
      department: "",
      basicSalary: "",
      allowance: "",
      deduction: "",
    });
  };

  const markPaid = (id) => {
    setPayrolls(
      payrolls.map((item) =>
        item.id === id
          ? { ...item, status: "Paid" }
          : item
      )
    );
  };

  const deletePayroll = (id) => {
    setPayrolls(
      payrolls.filter((item) => item.id !== id)
    );
  };

  const filteredPayrolls = payrolls.filter((item) =>
    item.employee
      .toLowerCase()
      .includes(search.toLowerCase())
  );

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

      <div className="flex justify-between items-center mb-6">
        <h1 className="text-2xl font-bold">
          Payroll Management
        </h1>

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

      {/* Stats */}

      <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 Payroll
          </h3>
          <p className="text-3xl font-bold text-blue-600">
            {payrolls.length}
          </p>
        </div>

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

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

      </div>

      {/* Form */}

      <div className="bg-white p-6 rounded-lg shadow mb-6">

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

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

          <input
            type="text"
            name="employee"
            placeholder="Employee Name"
            value={formData.employee}
            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="number"
            name="basicSalary"
            placeholder="Basic Salary"
            value={formData.basicSalary}
            onChange={handleChange}
            className="border p-2 rounded"
          />

          <input
            type="number"
            name="allowance"
            placeholder="Allowance"
            value={formData.allowance}
            onChange={handleChange}
            className="border p-2 rounded"
          />

          <input
            type="number"
            name="deduction"
            placeholder="Deduction"
            value={formData.deduction}
            onChange={handleChange}
            className="border p-2 rounded"
          />

        </div>

        <button
          onClick={addPayroll}
          className="bg-blue-600 text-white px-5 py-2 rounded mt-4"
        >
          Add Payroll
        </button>

      </div>

      {/* Search */}

      <div className="bg-white p-4 rounded-lg shadow mb-6">

        <input
          type="text"
          placeholder="Search Employee..."
          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">
                Employee
              </th>
              <th className="p-3 text-left">
                Department
              </th>
              <th className="p-3 text-left">
                Salary
              </th>
              <th className="p-3 text-left">
                Net Salary
              </th>
              <th className="p-3 text-left">
                Status
              </th>
              <th className="p-3 text-center">
                Action
              </th>
            </tr>
          </thead>

          <tbody>

            {filteredPayrolls.map((item) => {

              const netSalary =
                Number(item.basicSalary) +
                Number(item.allowance || 0) -
                Number(item.deduction || 0);

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

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

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

                  <td className="p-3 font-semibold">
                    ₹{netSalary}
                  </td>

                  <td className="p-3">

                    <span
                      className={`px-3 py-1 rounded-full text-sm ${
                        item.status === "Paid"
                          ? "bg-green-100 text-green-700"
                          : "bg-red-100 text-red-700"
                      }`}
                    >
                      {item.status}
                    </span>

                  </td>

                  <td className="p-3 text-center space-x-2">

                    {item.status === "Pending" && (
                      <button
                        onClick={() =>
                          markPaid(item.id)
                        }
                        className="bg-green-600 text-white px-3 py-1 rounded"
                      >
                        Pay
                      </button>
                    )}

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

                  </td>
                </tr>
              );
            })}

          </tbody>

        </table>

      </div>

    </div>
  );
};

export default Payroll;