"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 { getLinkedViews } from "@/lib/gallery-views";
import { GalleryViews } from "@/types/gallery";
import { useAuthStore } from "@/stores/authStore";
import DestructibleAlert from "@/components/DestructibleAlert";

const HomePage = () => {
  const router = useRouter();
  const [linkedViews, setLinkedViews] = useState<GalleryViews[]>();
  const { user } = useAuthStore();

  useEffect(() => {
    const fetchedLinkedViews: GalleryViews[] = getLinkedViews();
    setLinkedViews(fetchedLinkedViews);
  }, []);

  return (
    <BackgroundWrapper>
      <div className="flex-1 min-h-screen">
        <Header displayUser />
        <div className="overflow-y-auto pt-4 h-[calc(100vh-80px)]">
          <div className="pb-40 mx-6">
            {!user?.is_verified && (
              <DestructibleAlert
                text="Please verify your account. Check your email for the verification link."
                variant="warning"
              />
            )}
            <SlidingGallery views={linkedViews} height="23vh" />
            <div className="flex flex-col gap-9">
              {/* Categories Section */}
              <div>
                <div className="flex item-scenter justify-between">
                  <h2 className="text-2xl font-bold text-[#113768]">
                    Categories
                  </h2>
                  <button
                    onClick={() => router.push("/categories")}
                    className={styles.arrowButton}
                  >
                    <ChevronRight size={24} color="#113768" />
                  </button>
                </div>
                <div className="grid grid-cols-2 gap-4 pt-6 ">
                  <button
                    onClick={() => router.push("/categories/topics")}
                    className="flex flex-col justify-center items-center border-[1px] border-blue-200 aspect-square rounded-3xl gap-2 bg-white"
                  >
                    <Image
                      src="/images/icons/topic-test.png"
                      alt="Topic Test"
                      width={85}
                      height={85}
                    />
                    <span className="font-medium text-[#113768]">
                      Topic Test
                    </span>
                  </button>

                  <button
                    onClick={() => router.push("/categories/mocks")}
                    className="flex flex-col justify-center items-center border-[1px] border-blue-200 aspect-square rounded-3xl gap-2 bg-white"
                  >
                    <Image
                      src="/images/icons/mock-test.png"
                      alt="Mock Test"
                      width={85}
                      height={85}
                    />
                    <span className="font-medium text-[#113768]">
                      Mock Test
                    </span>
                  </button>

                  <button
                    disabled
                    className="flex flex-col justify-center items-center border-[1px] border-blue-200 aspect-square rounded-3xl gap-2 bg-white"
                  >
                    <Image
                      src="/images/icons/past-paper.png"
                      alt="Past Papers"
                      width={68}
                      height={68}
                      className="opacity-50"
                    />
                    <span className="font-medium text-[#113768]/50">
                      Past Papers
                    </span>
                  </button>

                  <button
                    onClick={() => router.push("/categories/subjects")}
                    className="flex flex-col justify-center items-center border-[1px] border-blue-200 aspect-square rounded-3xl gap-2 bg-white"
                  >
                    <Image
                      src="/images/icons/subject-test.png"
                      alt="Subject Test"
                      width={80}
                      height={80}
                    />
                    <span className="font-medium text-[#113768]">
                      Subject Test
                    </span>
                  </button>
                </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>
                      ))
                    )} */}
                    <h2 className="text-center text-xl">Coming soon</h2>
                  </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;