examjam-frontend/app/(tabs)/home/page.tsx

"use client";

import React, { useState, useEffect, ReactNode } from "react";
import { useRouter } from "next/navigation";
import Image from "next/image";
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";
import { API_URL } from "@/lib/auth";
import { Avatar } from "@/components/ui/avatar";
import { getLinkedViews } from "@/lib/gallery-views";
import { getTopThree } from "@/lib/leaderboard";

interface LinkedView {
  id: string;
  content: ReactNode;
}

const page = () => {
  const router = useRouter();
  const [boardData, setBoardData] = useState([]);
  const [boardError, setBoardError] = useState(null);
  const [linkedViews, setLinkedViews] = useState<LinkedView[]>();

  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 },
  ];

  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");
      }
    }
    const fetchedLinkedViews = getLinkedViews();
    setLinkedViews(fetchedLinkedViews);

    return () => {
      isMounted = false;
    };
  }, []);

  return (
    <BackgroundWrapper>
      <div className={styles.container}>
        <Header displayUser />
        <div className={styles.scrollContainer}>
          <div className={styles.contentWrapper}>
            <SlidingGallery views={linkedViews} height="23vh" />
            <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>
                          <Avatar className="bg-slate-300 w-4 h-4 rounded-full"></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;