import axios from "axios";
import React, { useEffect, useState } from "react";
import "./App.css";

function Home() {
  const [data, setData] = useState([]);
  const [rating, setRating] = useState(1);
  const [refresh, setRefresh] = useState(false); // To trigger re-render on data changes

  // Fetch course data
  useEffect(() => {
    const fetchData = async () => {
      const response = await axios.get("http://localhost:8001/courses/get");
      setData(response.data);
    };
    fetchData();
  }, [refresh]);

  // Apply for a course
  const handleApply = async (id) => {
    try {
      const response = await axios.post(`http://localhost:8001/courses/enroll/${id}`);
      alert("You have successfully enrolled for this course");
      setRefresh(!refresh); // Refresh data after applying
    } catch (error) {
      alert("Error applying for the course");
    }
  };

  // Update rating state on change
  const handleRating = (event) => {
    setRating(event.target.value);
  };

  // Add a rating to a course
  const handleAddRating = async (id) => {
    try {
      await axios.patch(`http://localhost:8001/courses/rating/${id}`, { rating: Number(rating)});
      
      setRefresh(!refresh); // Refresh data after rating
    } catch (error) {
      alert("Error adding rating");
    }
  };

  // Drop a course
  const handleDrop = async (id) => {
    try {
      await axios.delete(`http://localhost:8001/courses/drop/${id}`);
      setRefresh(!refresh); // Refresh data after dropping
    } catch (error) {
      alert("Error dropping the course");
    }
  };

  return (
    <div className="home">
      <header>
        <h2>ABC Learning</h2>
      </header>
      <div className="cardContainer">
        {data.map((course) => (
          <div className="card" key={course._id}>
            <ul>
              <div className="header">
                {/* Render course details */}
                <li data-testid="course-name">{course.courseName}</li>
                <li data-testid="course-dept">{course.courseDept}</li>
                <li data-testid="course-description">{course.description}</li>

                {/* Rating functionality */}
                <li>
                  <>
                    Rate:
                    <select
                      className="rating"
                      name="rating"
                      data-testid="select-box"
                      value={rating}
                      onChange={handleRating}
                    >
                      <option value="1">1</option>
                      <option value="2">2</option>
                      <option value="3">3</option>
                      <option value="4">4</option>
                      <option value="5">5</option>
                    </select>
                    <button
                      className="rate"
                      data-testid="add-rate"
                      onClick={() => handleAddRating(course._id)}
                    >
                      Add
                    </button>
                  </>
                </li>

                {/* Drop course button */}
                <li>
                  <button
                    className="drop"
                    data-testid="drop"
                    onClick={() => handleDrop(course._id)}
                  >
                    Drop Course
                  </button>
                </li>

                {/* Apply button */}
                <li>
                  <button
                    className="btn"
                    data-testid="apply"
                    onClick={() => handleApply(course._id)}
                  >
                    Apply
                  </button>
                </li>
              </div>
              <div className="footer">
                {/* Footer contents can go here */}
                <li data-testid="footer">Course Footer</li>
              </div>
            </ul>
          </div>
        ))}
      </div>
    </div>
  );
}

export default Home;