"use client";

import React, { useState, useEffect } from "react";
import { useRouter } from "next/navigation";
import Image from "next/image";
import Link from "next/link";
import Header from "@/components/Header";
import SlidingGallery from "@/components/SlidingGallery";
import BackgroundWrapper from "@/components/BackgroundWrapper";
import DestructibleAlert from "@/components/DestructibleAlert";
import { ChevronRight } from "lucide-react"; // Using Lucide React for icons
import styles from "@/css/Home.module.css";

const API_URL = process.env.NEXT_PUBLIC_API_URL || "http://localhost:3000/api";

const page = () => {
  const profileImg = "/images/static/avatar.jpg";
  const router = useRouter();
  const [boardData, setBoardData] = useState([]);
  const [boardError, setBoardError] = useState(null);

  const performanceData = [
    { label: "Mock Test", progress: 20 },
    { label: "Topic Test", progress: 70 },
    { label: "Subject Test", progress: 50 },
  ];

  const progressData = [
    { label: "Physics", progress: 25 },
    { label: "Chemistry", progress: 57 },
  ];

  // Fetch function for leaderboard data
  useEffect(() => {
    let isMounted = true;
    async function fetchBoardData() {
      try {
        const response = await fetch(`${API_URL}/leaderboard`);
        if (!response.ok) {
          throw new Error("Failed to fetch leaderboard data");
        }
        const data = await response.json();
        if (isMounted) setBoardData(data);
      } catch (error) {
        if (isMounted) setBoardError(error.message || "An error occurred");
      }
    }
    fetchBoardData();
    return () => {
      isMounted = false;
    };
  }, []);

  const getTopThree = (boardData) => {
    if (!boardData || boardData.length === 0) return [];
    return boardData
      .slice()
      .sort((a, b) => b.points - a.points)
      .slice(0, 3)
      .map((player, index) => ({
        ...player,
        rank: index + 1,
        height: index === 0 ? 250 : index === 1 ? 200 : 170,
      }));
  };

  return (
    <BackgroundWrapper>
      <div className={styles.container}>
        <Header displayTabTitle={null} displayUser image={profileImg} />
        <div className={styles.scrollContainer}>
          <div className={styles.contentWrapper}>
            <SlidingGallery />
            <div className={styles.mainContent}>
              {/* Categories Section */}
              <div>
                <div className={styles.sectionHeader}>
                  <h2 className={styles.sectionTitle}>Categories</h2>
                  <button
                    onClick={() => router.push("/categories")}
                    className={styles.arrowButton}
                  >
                    <ChevronRight size={24} color="#113768" />
                  </button>
                </div>
                <div className={styles.categoriesContainer}>
                  <div className={styles.categoryRow}>
                    <button
                      disabled
                      className={`${styles.categoryButton} ${styles.disabled}`}
                    >
                      <Image
                        src="/images/icons/topic-test.png"
                        alt="Topic Test"
                        width={85}
                        height={85}
                      />
                      <span className={styles.categoryButtonText}>
                        Topic Test
                      </span>
                    </button>
                    <button
                      onClick={() => router.push("/unit")}
                      className={styles.categoryButton}
                    >
                      <Image
                        src="/images/icons/mock-test.png"
                        alt="Mock Test"
                        width={85}
                        height={85}
                      />
                      <span className={styles.categoryButtonText}>
                        Mock Test
                      </span>
                    </button>
                  </div>
                  <div className={styles.categoryRow}>
                    <button
                      disabled
                      className={`${styles.categoryButton} ${styles.disabled}`}
                    >
                      <Image
                        src="/images/icons/past-paper.png"
                        alt="Past Papers"
                        width={68}
                        height={68}
                      />
                      <span className={styles.categoryButtonText}>
                        Past Papers
                      </span>
                    </button>
                    <button
                      disabled
                      className={`${styles.categoryButton} ${styles.disabled}`}
                    >
                      <Image
                        src="/images/icons/subject-test.png"
                        alt="Subject Test"
                        width={80}
                        height={80}
                      />
                      <span className={styles.categoryButtonText}>
                        Subject Test
                      </span>
                    </button>
                  </div>
                </div>
              </div>

              {/* Leaderboard Section */}
              <div className={styles.leaderboardWrapper}>
                <h2 className={styles.sectionTitle}>Leaderboard</h2>
                <div className={styles.leaderboardContainer}>
                  <div className={styles.topThreeHeader}>
                    <span className={styles.topThreeTitle}>Top 3</span>
                    <button
                      onClick={() => router.push("/leaderboard")}
                      className={styles.arrowButton}
                    >
                      <ChevronRight size={24} color="#113768" />
                    </button>
                  </div>
                  <div className={styles.divider}></div>
                  <div className={styles.topThreeList}>
                    {getTopThree(boardData).map((student, idx) => (
                      <div key={idx} className={styles.topThreeItem}>
                        <div className={styles.studentInfo}>
                          <span className={styles.rank}>{student.rank}</span>
                          <Image
                            src="/images/static/avatar.jpg"
                            alt="Avatar"
                            width={20}
                            height={20}
                            className={styles.avatar}
                          />
                          <span className={styles.studentName}>
                            {student.name}
                          </span>
                        </div>
                        <span className={styles.points}>
                          {student.points}pt
                        </span>
                      </div>
                    ))}
                  </div>
                </div>
              </div>

              {/* Performance Summary Section */}
              <div className={styles.section}>
                <div className={styles.sectionHeader}>
                  <h2 className={styles.sectionTitle}>Performance Summary</h2>
                  <button
                    disabled
                    onClick={() => router.push("/performance")}
                    className={styles.arrowButton}
                  >
                    <ChevronRight size={24} color="#113768" />
                  </button>
                </div>
                <div className={styles.comingSoonCard}>
                  <p className={styles.comingSoonText}>Coming soon.</p>
                </div>
              </div>

              {/* Progress Tracker Section */}
              <div className={styles.section}>
                <div className={styles.sectionHeader}>
                  <h2 className={styles.sectionTitle}>Progress Tracker</h2>
                  <button
                    disabled
                    onClick={() => router.push("/progress")}
                    className={styles.arrowButton}
                  >
                    <ChevronRight size={24} color="#113768" />
                  </button>
                </div>
                <div className={styles.comingSoonCard}>
                  <p className={styles.comingSoonText}>Coming soon.</p>
                </div>
              </div>

              {/* Daily Quiz Section */}
              <div className={styles.section}>
                <h2 className={styles.sectionTitle}>Daily Quiz</h2>
                <div className={styles.comingSoonCard}>
                  <p className={styles.comingSoonText}>Coming soon.</p>
                </div>
              </div>

              {/* Live Exams Section */}
              <div className={`${styles.section} ${styles.lastSection}`}>
                <h2 className={styles.sectionTitle}>Live Exams</h2>
                <div className={styles.comingSoonCard}>
                  <p className={styles.comingSoonText}>Coming soon.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </BackgroundWrapper>
  );
};

export default page;