import React, { useState, useEffect } from "react";
import axios from "axios";
import * as XLSX from "xlsx-js-style";

const CourseConsolidated = () => {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);
  const [currentPage, setCurrentPage] = useState(1);
  const tablesPerPage = 5;
  const [expandedCourse, setExpandedCourse] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await axios.get(
          "http://localhost:8080/api/table/course-consolidated"
        );
        setData(response.data);
        setLoading(false);
      } catch (error) {
        console.error("Error fetching table data:", error);
        setLoading(false);
      }
    };

    fetchData();
  }, []);

  if (loading) {
    return <div>Loading...</div>;
  }

  // Extract unique courses by courseCode
  const uniqueCourses = [...new Set(data.map((row) => row.courseCode))];

  // Pagination
  const indexOfLastTable = currentPage * tablesPerPage;
  const indexOfFirstTable = indexOfLastTable - tablesPerPage;
  const currentCourses = uniqueCourses.slice(
    indexOfFirstTable,
    indexOfLastTable
  );

  const totalPages = Math.ceil(uniqueCourses.length / tablesPerPage);

  const handleNextPage = () => {
    if (currentPage < totalPages) setCurrentPage((prevPage) => prevPage + 1);
  };

  const handlePrevPage = () => {
    if (currentPage > 1) setCurrentPage((prevPage) => prevPage - 1);
  };

  const createExcelFile = (courseData, courseName) => {
    const workbook = XLSX.utils.book_new();
    const worksheet = XLSX.utils.json_to_sheet(courseData);
    XLSX.utils.book_append_sheet(workbook, worksheet, courseName);
    XLSX.writeFile(workbook, `${courseName.replace(/\s+/g, "_")}_Table.xlsx`);
  };

  return (
    <div>
      <h1 style={{ textAlign: "center" }}>
        Course Tables with Download Options
      </h1>

      <div
        style={{
          maxHeight: "70vh",
          overflowY: "auto",
          border: "1px solid #ccc",
          padding: "10px",
          borderRadius: "5px",
          backgroundColor: "#f9f9f9",
        }}
      >
        {currentCourses.map((courseCode, index) => {
          const courseData = data.filter(
            (row) => row.courseCode === courseCode
          );
          const courseName = courseData[0]?.courseName; // Get course name from first item
          return (
            <div key={index} style={{ marginBottom: "20px" }}>
              <div
                style={{
                  display: "flex",
                  justifyContent: "space-between",
                  alignItems: "center",
                  cursor: "pointer",
                  backgroundColor: "#ffffff",
                  color: "black",
                  padding: "10px",
                  borderRadius: "5px",
                }}
                onClick={() =>
                  setExpandedCourse(
                    expandedCourse === courseCode ? null : courseCode
                  )
                }
              >
                <h2 style={{ margin: 0 }}>{courseName}'s Table</h2>
                <button
                  onClick={() => createExcelFile(courseData, courseName)}
                  className="btn btn-primary"
                  style={{
                    padding: "10px 15px",
                    backgroundColor: "#007bff",
                    color: "white",
                    textDecoration: "none",
                    borderRadius: "5px",
                  }}
                >
                  Download {courseName}'s Table
                </button>
              </div>

              {expandedCourse === courseCode && (
                <table
                  border="1"
                  style={{
                    width: "100%",
                    textAlign: "left",
                    marginTop: "20px",
                  }}
                >
                  <thead>
                    <tr>
                      <th>Semester</th>
                      <th>Course Code</th>
                      <th>Course Name</th>
                      <th>Exam Type</th>
                      <th>Year</th>
                      <th>Oral/Practical</th>
                      <th>Assessment</th>
                      <th>Reassessment</th>
                      <th>Paper Setting</th>
                      <th>Moderation</th>
                      <th>PwD Paper Setting</th>
                    </tr>
                  </thead>
                  <tbody>
                    {courseData.map((row, idx) => (
                      <tr key={idx}>
                        <td>{row.semester}</td>
                        <td>{row.courseCode}</td>
                        <td>{row.courseName}</td>
                        <td>{row.examType}</td>
                        <td>{row.year}</td>
                        <td>
                          {row.oralPracticalTeachers &&
                          row.oralPracticalTeachers.length > 0 ? (
                            <ul style={{ margin: 0, paddingLeft: "20px" }}>
                              {row.oralPracticalTeachers.map((teacher, idx) => (
                                <li key={idx}>{teacher}</li>
                              ))}
                            </ul>
                          ) : (
                            "N/A"
                          )}
                        </td>
                        <td>
                          {row.assesmentTeachers &&
                          row.assesmentTeachers.length > 0 ? (
                            <ul style={{ margin: 0, paddingLeft: "20px" }}>
                              {row.assesmentTeachers.map((teacher, idx) => (
                                <li key={idx}>{teacher}</li>
                              ))}
                            </ul>
                          ) : (
                            "N/A"
                          )}
                        </td>
                        <td>
                          {row.reassessmentTeachers &&
                          row.reassessmentTeachers.length > 0 ? (
                            <ul style={{ margin: 0, paddingLeft: "20px" }}>
                              {row.reassessmentTeachers.map((teacher, idx) => (
                                <li key={idx}>{teacher}</li>
                              ))}
                            </ul>
                          ) : (
                            "N/A"
                          )}
                        </td>
                        <td>
                          {row.paperSettingTeachers &&
                          row.paperSettingTeachers.length > 0 ? (
                            <ul style={{ margin: 0, paddingLeft: "20px" }}>
                              {row.paperSettingTeachers.map((teacher, idx) => (
                                <li key={idx}>{teacher}</li>
                              ))}
                            </ul>
                          ) : (
                            "N/A"
                          )}
                        </td>
                        <td>
                          {row.moderationTeachers &&
                          row.moderationTeachers.length > 0 ? (
                            <ul style={{ margin: 0, paddingLeft: "20px" }}>
                              {row.moderationTeachers.map((teacher, idx) => (
                                <li key={idx}>{teacher}</li>
                              ))}
                            </ul>
                          ) : (
                            "N/A"
                          )}
                        </td>
                        <td>
                          {row.pwdPaperSettingTeachers &&
                          row.pwdPaperSettingTeachers.length > 0 ? (
                            <ul style={{ margin: 0, paddingLeft: "20px" }}>
                              {row.pwdPaperSettingTeachers.map(
                                (teacher, idx) => (
                                  <li key={idx}>{teacher}</li>
                                )
                              )}
                            </ul>
                          ) : (
                            "N/A"
                          )}
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              )}
            </div>
          );
        })}
      </div>

      {/* Pagination controls */}
      <div style={{ textAlign: "center", marginTop: "20px" }}>
        <button
          onClick={handlePrevPage}
          disabled={currentPage === 1}
          style={{
            padding: "10px 15px",
            marginRight: "10px",
            backgroundColor: currentPage === 1 ? "#ccc" : "#007bff",
            color: "white",
            borderRadius: "5px",
            border: "none",
          }}
        >
          Previous
        </button>
        <span>
          Page {currentPage} of {totalPages}
        </span>
        <button
          onClick={handleNextPage}
          disabled={currentPage === totalPages}
          style={{
            padding: "10px 15px",
            marginLeft: "10px",
            backgroundColor: currentPage === totalPages ? "#ccc" : "#007bff",
            color: "white",
            borderRadius: "5px",
            border: "none",
          }}
        >
          Next
        </button>
      </div>
    </div>
  );
};

export default CourseConsolidated;