"use client";

import React, { useState, useEffect } 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 { ChevronRight } from "lucide-react";
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";
import DestructibleAlert from "@/components/DestructibleAlert";
import { GalleryViews } from "@/types/gallery";

interface LeaderboardEntry {
  id: string;
  name: string;
  points: number;
}

const HomePage = () => {
  const router = useRouter();
  const [boardData, setBoardData] = useState<LeaderboardEntry[]>([]);
  const [boardError, setBoardError] = useState<string | null>(null);
  const [linkedViews, setLinkedViews] = useState<GalleryViews[]>();

  useEffect(() => {
    let isMounted = true;

    const fetchBoardData = async () => {
      try {
        const response = await fetch(`${API_URL}/leaderboard`);
        if (!response.ok) {
          throw new Error("Failed to fetch leaderboard data");
        }

        const data: LeaderboardEntry[] = await response.json();
        if (isMounted) setBoardData(data);
      } catch (err) {
        if (isMounted) {
          const message =
            err instanceof Error ? err.message : "An unexpected error occurred";
          setBoardError(message);
        }
      }
    };

    const fetchedLinkedViews: GalleryViews[] = getLinkedViews();
    setLinkedViews(fetchedLinkedViews);

    fetchBoardData();

    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}>
                    {boardError ? (
                      <DestructibleAlert text={boardError} />
                    ) : (
                      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" />
                            <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 HomePage;