// src/pages/humanresources/TeachersRating.jsx

import React, { useState } from "react";

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

  const [formData, setFormData] = useState({
    teacherName: "",
    subject: "",
    rating: "5",
    remarks: "",
  });

  const [ratings, setRatings] = useState([
    {
      id: 1,
      teacherName: "Rahul Sharma",
      subject: "Mathematics",
      rating: 5,
      remarks: "Excellent teaching skills",
    },
    {
      id: 2,
      teacherName: "Priya Singh",
      subject: "English",
      rating: 4,
      remarks: "Very supportive teacher",
    },
  ]);

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

  const addRating = () => {
    if (!formData.teacherName || !formData.subject) {
      alert("Please fill all required fields");
      return;
    }

    setRatings([
      ...ratings,
      {
        id: Date.now(),
        teacherName: formData.teacherName,
        subject: formData.subject,
        rating: Number(formData.rating),
        remarks: formData.remarks,
      },
    ]);

    setFormData({
      teacherName: "",
      subject: "",
      rating: "5",
      remarks: "",
    });
  };

  const deleteRating = (id) => {
    setRatings(ratings.filter((item) => item.id !== id));
  };

  const filteredRatings = ratings.filter(
    (item) =>
      item.teacherName
        .toLowerCase()
        .includes(search.toLowerCase()) ||
      item.subject
        .toLowerCase()
        .includes(search.toLowerCase())
  );

  const avgRating =
    ratings.length > 0
      ? (
          ratings.reduce(
            (sum, item) => sum + item.rating,
            0
          ) / ratings.length
        ).toFixed(1)
      : 0;

  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">
          Teachers Rating
        </h1>

        <div className="bg-white px-4 py-2 rounded-lg shadow">
          Total Ratings : {ratings.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 Reviews
          </h3>
          <p className="text-3xl font-bold text-blue-600">
            {ratings.length}
          </p>
        </div>

        <div className="bg-white p-5 rounded-lg shadow">
          <h3 className="text-gray-500">
            Average Rating
          </h3>
          <p className="text-3xl font-bold text-yellow-500">
            ⭐ {avgRating}
          </p>
        </div>

        <div className="bg-white p-5 rounded-lg shadow">
          <h3 className="text-gray-500">
            Teachers Rated
          </h3>
          <p className="text-3xl font-bold text-green-600">
            {
              new Set(
                ratings.map(
                  (item) => item.teacherName
                )
              ).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 Teacher Rating
        </h2>

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

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

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

          <select
            name="rating"
            value={formData.rating}
            onChange={handleChange}
            className="border p-2 rounded"
          >
            <option value="5">⭐⭐⭐⭐⭐ (5)</option>
            <option value="4">⭐⭐⭐⭐ (4)</option>
            <option value="3">⭐⭐⭐ (3)</option>
            <option value="2">⭐⭐ (2)</option>
            <option value="1">⭐ (1)</option>
          </select>

        </div>

        <textarea
          rows="4"
          name="remarks"
          placeholder="Remarks / Feedback"
          value={formData.remarks}
          onChange={handleChange}
          className="border p-2 rounded w-full mt-4"
        />

        <button
          onClick={addRating}
          className="bg-blue-600 text-white px-5 py-2 rounded mt-4"
        >
          Submit Rating
        </button>

      </div>

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

        <input
          type="text"
          placeholder="Search Teacher..."
          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">
                Teacher
              </th>

              <th className="p-3 text-left">
                Subject
              </th>

              <th className="p-3 text-left">
                Rating
              </th>

              <th className="p-3 text-left">
                Remarks
              </th>

              <th className="p-3 text-center">
                Action
              </th>
            </tr>
          </thead>

          <tbody>

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

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

                  <td className="p-3">
                    {"⭐".repeat(item.rating)}
                  </td>

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

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

          </tbody>

        </table>

      </div>

    </div>
  );
};

export default TeachersRating;