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

// const ConsolidatedTable = () => {
//   const [data, setData] = useState([]);
//   const [loading, setLoading] = useState(true);

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

//     fetchData();
//   }, []);

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

//   return (
//     <div>
//       <h1>Consolidated Table</h1>
//       <table border="1" style={{ width: "100%", textAlign: "left" }}>
//         <thead>
//           <tr>
//             <th>Semester</th>
//             <th>Course Code</th>
//             <th>Course Name</th>
//             <th>Exam Type</th>
//             <th>Year</th>
//             <th>Marks</th>
//             <th>Name</th>
//             <th>Affiliation/College</th>
//             <th>Highest Qualification</th>
//             <th>Career Experience</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>
//           {data.map((row, index) => (
//             <tr key={index}>
//               <td>{row.semester}</td>
//               <td>{row.courseCode}</td>
//               <td>{row.courseName}</td>
//               <td>{row.examType}</td>
//               <td>{row.year}</td>
//               <td>{row.marks}</td>
//               <td>{row.Name}</td>
//               <td>{row.affiliation}</td>
//               <td>{row.qualification}</td>
//               <td>{row.experience}</td>
//               <td>{row.oralPractical}</td>
//               <td>{row.assessment}</td>
//               <td>{row.reassessment}</td>
//               <td>{row.paperSetting}</td>
//               <td>{row.moderation}</td>
//               <td>{row.pwdPaperSetting}</td>
//             </tr>
//           ))}
//         </tbody>
//       </table>
//     </div>
//   );
// };

// export default ConsolidatedTable;



import React, { useState, useEffect } from "react";
import axios from "axios";
import { CSVLink } from "react-csv";

const ConsolidatedTable = () => {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await axios.get("http://localhost:8080/api/table/consolidated-table");
        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 faculty names
  const uniqueTeachers = [...new Set(data.map((row) => row.Name))];

  return (
    <div>
      <h1>Faculty Tables with Download Option</h1>
      {uniqueTeachers.map((teacher, index) => {
        // Filter rows for the current teacher
        const teacherData = data.filter((row) => row.Name === teacher);

        return (
          <div key={index} style={{ marginBottom: "20px" }}>
            <h2>{teacher}'s Table</h2>
            <table border="1" style={{ width: "100%", textAlign: "left", marginBottom: "10px" }}>
              <thead>
                <tr>
                  <th>Semester</th>
                  <th>Course Code</th>
                  <th>Course Name</th>
                  <th>Exam Type</th>
                  <th>Year</th>
                  <th>Marks</th>
                  <th>Name</th>
                  <th>Affiliation/College</th>
                  <th>Highest Qualification</th>
                  <th>Career Experience</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>
                {teacherData.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.marks}</td>
                    <td>{row.Name}</td>
                    <td>{row.affiliation}</td>
                    <td>{row.qualification}</td>
                    <td>{row.experience}</td>
                    <td>{row.oralPractical}</td>
                    <td>{row.assessment}</td>
                    <td>{row.reassessment}</td>
                    <td>{row.paperSetting}</td>
                    <td>{row.moderation}</td>
                    <td>{row.pwdPaperSetting}</td>
                  </tr>
                ))}
              </tbody>
            </table>
            {/* CSV Download Button */}
            <CSVLink
              data={teacherData}
              filename={`${teacher.replace(/\s+/g, "_")}_table.csv`}
              className="btn btn-primary"
              style={{
                padding: "10px 15px",
                backgroundColor: "#007bff",
                color: "white",
                textDecoration: "none",
                borderRadius: "5px",
              }}
            >
              Download CSV
            </CSVLink>
          </div>
        );
      })}
    </div>
  );
};

export default ConsolidatedTable;