"use client";

import { useEffect, useState } from "react";
import Image from "next/image";

interface CertifiedStudent {
  id: string;
  level_name: string;
  student_name: string;
  image?: string | null;
}

interface LevelGroup {
  level: string;
  students: CertifiedStudent[];
}

const CertifiedStudents = () => {
  const [levels, setLevels] = useState<LevelGroup[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchStudents = async () => {
      try {
        const response = await fetch("/api/cms/kuchipudi-exams/students");
        const result = await response.json();

        if (result.success) {
          const students: CertifiedStudent[] = result.data;

          // Group by level_name while preserving the order returned by the API
          // (level_name desc, sort_order asc — matches the admin's configured ordering)
          const grouped: LevelGroup[] = [];
          const indexByLevel = new Map<string, number>();

          students.forEach((student) => {
            if (!indexByLevel.has(student.level_name)) {
              indexByLevel.set(student.level_name, grouped.length);
              grouped.push({ level: student.level_name, students: [] });
            }
            grouped[indexByLevel.get(student.level_name)!].students.push(student);
          });

          setLevels(grouped);
        }
      } catch (err) {
        console.error(err);
      } finally {
        setLoading(false);
      }
    };

    fetchStudents();
  }, []);

  if (loading || levels.length === 0) return null;

  return (
    <>
      <section className="aboutinnercontainer academycontainer certifiedstudents pt-0">
        <div className="container container-xxl">
          <div className="row">
            <div className="col-12" data-aos="fade-up" data-aos-duration="700">
              <div className="section-heading mb-3 mb-xxl-4">
                <h2>
                  <span>Certified Students</span>
                </h2>
                <p>
                  As mentioned in our Mission statement, our academy strives
                  not only to create Kuchipudi students but also future
                  Kuchipudi teachers who can take RKDA evolved training into
                  the future. Following RKDA students have taken yearly exams
                  and received the certificate.
                </p>
              </div>
            </div>
          </div>

          {levels.map((levelGroup, levelIndex) => (
            <div className="p-0" key={levelGroup.level}>
              <h3 data-aos="fade-up" data-aos-duration="700" data-aos-delay={levelIndex * 200}>
                {levelGroup.level}
              </h3>
              <div className="row gx-3">
                {levelGroup.students.map((student) => (
                  <div
                    key={student.id}
                    className="col-xxl-3 col-xl-3 col-lg-3 col-md-4 col-sm-4 col-6 mb-3"
                    data-aos="fade-up"
                    data-aos-duration="700"
                    data-aos-delay={levelIndex * 200}
                  >
                    <div className="certifiedstudentcar">
                      <div className="certifiedimg">
                        <div className="certifiedimginner">
                          {student.image ? (
                            <Image
                              src={student.image}
                              alt={student.student_name}
                              width={200}
                              height={280}
                            />
                          ) : (
                            <div
                              className="d-flex align-items-center justify-content-center bg-light text-muted"
                              style={{ width: 200, height: 280 }}
                            >
                              No photo
                            </div>
                          )}
                        </div>
                      </div>
                      <div className="certifiedcontent">
                        <p>{student.student_name}</p>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
      </section>
    </>
  );
};

export default CertifiedStudents;













// "use client";

// import Image from "next/image";

// const CertifiedStudents = () => {
//   const levels = [
//     {
//       level: "Level 4",
//       students: [
//         {
//           name: "Sriamsha Dubbaka",
//           image:
//             "https://www.rkda.org/wp-content/uploads/2020/10/Sriamsha-Dubbaka-1.jpg",
//         },
//         {
//           name: "Vinaya Koppaka",
//           image:
//             "https://www.rkda.org/wp-content/uploads/2020/10/Vinaya-Koppaka.jpg",
//         },
//       ],
//     },
//     {
//       level: "Level 3",
//       students: [
//         {
//           name: "Aishwarya Gangisetti",
//           image:
//             "https://www.rkda.org/wp-content/uploads/2020/10/Aishwarya-Gangisetti.png",
//         },
//         {
//           name: "Akshaya Nuthalapati",
//           image:
//             "https://www.rkda.org/wp-content/uploads/2020/10/Akshaya-Nuthalapati.jpg",
//         },
//         {
//           name: "Aleena Tony",
//           image:
//             "https://www.rkda.org/wp-content/uploads/2020/10/Aleena-Tony.png",
//         },
//         {
//           name: "Tejaswi Vendra",
//           image:
//             "https://www.rkda.org/wp-content/uploads/2020/10/Tejaswi-Vendra.jpg",
//         },
//       ],
//     },
//     {
//       level: "Level 2",
//       students: [
//         {
//           name: "Leena srihitha Pyneni",
//           image:
//             "https://www.rkda.org/wp-content/uploads/2020/10/Leena-srihitha-Pyneni.jpg",
//         },
//         {
//           name: "Manjiri Nagarsenkar",
//           image:
//             "https://www.rkda.org/wp-content/uploads/2020/10/Manjiri-Nagarsenkar.jpg",
//         },
//         {
//           name: "Rama Danda",
//           image:
//             "https://www.rkda.org/wp-content/uploads/2020/10/Rama-Danda.jpg",
//         },
//         {
//           name: "Reetika Boyina",
//           image:
//             "https://www.rkda.org/wp-content/uploads/2020/10/Reetika-Boyina.jpg",
//         },
//         {
//           name: "Sreekrupa Naraparaju",
//           image:
//             "https://www.rkda.org/wp-content/uploads/2020/10/Sreekrupa-Naraparaju.png",
//         },
//       ],
//     },
//         {
//       level: "Level 1",
//       students: [
//         {
//           name: "Krishna deepthi Achutuni",
//           image:
//             "https://www.rkda.org/wp-content/uploads/2020/10/Krishna-deepthi-Achutuni.png",
//         },
//         {
//           name: "Maneesha reddy Beeravolu",
//           image:
//             "https://www.rkda.org/wp-content/uploads/2020/10/Maneesha-reddy-Beeravolu.png",
//         },
//         {
//           name: "Srimathi Srivatsan",
//           image:
//             "https://www.rkda.org/wp-content/uploads/2020/10/Srimathi-Srivatsan.jpg",
//         },
//       ],
//     },
//   ];

//   return (
//     <>
//       <section className="aboutinnercontainer academycontainer certifiedstudents pt-0">
//         <div className="container container-xxl">
//           <div className="row">
//             <div className="col-12" data-aos="fade-up" data-aos-duration="700">
//               <div className="section-heading mb-3 mb-xxl-4">
//                 <h2>
//                   <span>Certified Students</span>
//                 </h2>
//                 <p>
//                   As mentioned in our Mission statement, our academy strives
//                   not only to create Kuchipudi students but also future
//                   Kuchipudi teachers who can take RKDA evolved training into
//                   the future. Following RKDA students have taken yearly exams
//                   and received the certificate.
//                 </p>
//               </div>
//             </div>
//           </div>

//           {levels.map((levelGroup, levelIndex) => (
//             <div className="p-0" key={levelGroup.level}>
//             <h3 data-aos="fade-up" data-aos-duration="700" data-aos-delay={levelIndex * 200}>{levelGroup.level}</h3>
//             <div className="row gx-3">
//               {levelGroup.students.map((student) => (
//                 <div className="col-xxl-3 col-xl-3 col-lg-3 col-md-4 col-sm-4 col-6 mb-3" data-aos="fade-up" data-aos-duration="700" data-aos-delay={levelIndex * 200}>
//                   <div className="certifiedstudentcar" key={student.name}>
//                     <div className="certifiedimg">
//                       <div className="certifiedimginner">
//                         <Image src={student.image} alt={student.name} width={200} height={280} />
//                       </div>
//                     </div>
//                     <div className="certifiedcontent">
//                       <p>{student.name}</p>
//                     </div>
//                   </div>
//                 </div>
//               ))}
//             </div>
//           </div>
//           ))}
//         </div>
//       </section>
//     </>
//   );
// };

// export default CertifiedStudents;