"use client";

import Image from "next/image";
import { useEffect, useState } from "react";
import { ChevronLeft, ChevronUp, ChevronDown, Clock } from "lucide-react";
import AnimatedSection from "@/components/AnimatedSection";
import { useRouter } from "next/navigation";
import { getOlympaidDetails } from "@/lib/api/apis";
import { DEFAULT_LANGUAGE, getStoredLanguage, Language } from "@/lib/language";
import { getTranslation } from "@/src/hooks/useTranslation";
import { useLanguage } from "@/src/hooks/LanguageContext";
import { decodeHtml } from "@/lib/commonFunctions";
import Link from "next/link";

export default function GiveGitaOlympiadPage() {
  const [aboutOpen, setAboutOpen] = useState<string | null>(
    "About the Olympiad",
  );

  const [benefitOpen, setBenefitOpen] = useState(false);
  const router = useRouter();
  const [olympiadData, setOlympiadData] = useState<any[]>([]);

  const timeLeft = "2 Days 10 Hours Left";

  const [isRegistered, setIsRegistered] = useState<boolean | null>(null);
  const [userData, setUserData] = useState<Record<string, any>>({});
  const [bannerImage, setBannerImage] = useState<string>(
    "/images/olympiad-banner.png",
  );
  const [mounted, setMounted] = useState(false);
  const [lang, setLang] = useState<Language>(DEFAULT_LANGUAGE);
  const { language } = useLanguage();
  const [loading, setLoading] = useState(false);

  // const [language, setLanguage] = useState<Language>(DEFAULT_LANGUAGE);

  // useEffect(() => {
  //   if (typeof window === "undefined") return;

  //   const storedLang = localStorage.getItem(
  //     "selectedLanguage",
  //   ) as Language | null;

  //   if (storedLang) {
  //     setLanguage(storedLang);
  //   }
  // }, []);

  useEffect(() => {
    if (typeof window === "undefined") return;

    const stored = localStorage.getItem("register_details");
    const data = localStorage.getItem("user_data");

    if (data) {
      const userData = JSON.parse(data);
      setUserData(userData);
    }

    if (stored) {
      try {
        const data = JSON.parse(stored);

        setIsRegistered(data?.regist_status == 1);
      } catch {
        setIsRegistered(false);
      }
    } else {
      setIsRegistered(false);
    }
  }, []);

  useEffect(() => {
    const scrollToTop = (smooth: boolean = true) => {
      if (typeof window === "undefined") return;

      window.scrollTo({
        top: 0,
        behavior: smooth ? "smooth" : "auto",
      });
    };
    scrollToTop();
  }, []);

  const handleOlympiad = async () => {
    try {
      setLoading(true);

      const id = localStorage.getItem("olympiadId") || "1";
      const formData = new FormData();
      formData.append("olympiad_id", JSON.parse(id));

      const res = await getOlympaidDetails(formData);

      if (res?.status && Array.isArray(res.data)) {
        setOlympiadData(res.data);

        // ✅ set first group's image as default banner
        const firstWithImage = res.data.find((i: any) => i.image_url);
        if (firstWithImage?.image_url) {
          setBannerImage(firstWithImage.image_url);
        }
      } else {
        setOlympiadData([]); // important
      }
    } catch (err) {
      console.error("❌ Olympiad API Error:", err);
      setOlympiadData([]);
    } finally {
      setLoading(false);
    }
  };

  const grouped = olympiadData.reduce((acc: any, item: any) => {
    const title = language === "hindi" ? item.group_title_2 : item.group_title;
    if (!title) return acc;
    const key = title?.trim();
    if (!acc[key]) acc[key] = [];
    acc[key].push(item);
    return acc;
  }, {});

  useEffect(() => {
    handleOlympiad();
  }, []);

  const handleJoin = () => {
    if (!userData?.id) {
      router.push("/login");
      return;
    }

    if (!isRegistered) {
      router.push("/olympiad/register");
      return;
    }

    // router.push("/quiz");
  };

  useEffect(() => {
    setLang(getStoredLanguage());
    setMounted(true);
  }, []);

  if (!mounted) return null;

  const t = getTranslation(lang);

  if (loading) {
    return (
      <div className="container mx-auto px-4 py-24 flex justify-center items-center">
        <div className="flex flex-col items-center gap-4">
          <div className="w-10 h-10 border-4 border-[#FAA631] border-t-transparent rounded-full animate-spin" />
          <p className="text-sm text-gray-600">{t.olympiadPage.loading}</p>
        </div>
      </div>
    );
  }

  return (
    <div className="pt-6 sm:pt-10 bg-gradient-to-br from-orange-50 to-white mt-10">
      <div className="container mx-auto px-4 py-12">
        {olympiadData.length > 0 ? (
          <AnimatedSection className="max-w-2xl mx-auto sm:bg-[#FFF4E4] rounded-3xl p-0 sm:p-10">
            <main className="flex-1">
              <div className="mx-auto  px-4 pb-28 pt-4 space-y-4">
                <section className="rounded-3xl overflow-hidden shadow-sm">
                  <div className="relative w-full aspect-[4/3] sm:h-[260px] rounded-3xl overflow-hidden">
                    <Image
                      src={bannerImage}
                      alt="Olympiad Banner"
                      fill
                      className="object-fill"
                      priority
                    />
                  </div>
                </section>

                {Object.entries(grouped).map(([groupTitle, items]) => {
                  const isOpen = aboutOpen === groupTitle;

                  return (
                    <section
                      key={groupTitle}
                      className="bg-white rounded-3xl shadow-sm px-5 py-4"
                    >
                      <button
                        onClick={() => {
                          setAboutOpen((prev: any) =>
                            prev === groupTitle ? null : groupTitle,
                          );

                          // ✅ update banner image when section opens
                          const firstItem: any = (items as any[])[0];
                          if (firstItem?.image_url) {
                            setBannerImage(firstItem.image_url);
                          }
                        }}
                        className="w-full flex items-center justify-between"
                      >
                        <span className="text-lg font-bold text-gray-900">
                          {groupTitle}
                        </span>

                        {isOpen ? (
                          <ChevronUp className="w-5 h-5 text-gray-500" />
                        ) : (
                          <ChevronDown className="w-5 h-5 text-gray-500" />
                        )}
                      </button>

                      {isOpen && (
                        <div className="mt-4 space-y-4 text-sm text-gray-700">
                          {(items as any[]).map((item) => {
                            const description =
                              language === "hindi"
                                ? item.description_hindi
                                : item.description;
                            const decodedHTML = decodeHtml(description);
                            const cleanHTML = decodedHTML
                              .replace(/\r/g, "")
                              .replace(/\t/g, "")
                              .replace(/&nbsp;/g, " ")
                              .replace(/<h3>\s*<\/h3>/g, "")
                              .replace(/\s\s+/g, " ")
                              .replace(/\n{3,}/g, "\n\n")
                              .trim();

                            return (
                              <div key={item.id} className="space-y-2">
                                {description && (
                                  <div
                                    className="text-gray-700 [&_ul]:list-disc [&_ul]:pl-5 [&_li]:pl-2 [&_li]:my-1 [&_h3]:font-bold [&_h3]:text-lg [&_h3]:mt-4 [&_h3]:mb-2"
                                    style={{
                                      maxWidth: "none",
                                      fontSize: "1rem",
                                      lineHeight: "1.75rem",
                                    }}
                                    dangerouslySetInnerHTML={{
                                      __html: cleanHTML,
                                    }}
                                  />
                                )}
                              </div>
                            );
                          })}
                        </div>
                      )}
                    </section>
                  );
                })}
              </div>
            </main>
            <div className="mb-12 text-center">
              <Link
                href="/donate"
                className="text-blue-600 cursor-pointer hover:underline"
              >
                {t.olympiadPage.donateLink}
              </Link>
            </div>
            {isRegistered === false && (
              <div className="fixed inset-x-0 bottom-0 sm:bg-[#FFF4E4]/95 pb-6 pt-3 rounded-b-3xl">
                <div className="mx-auto max-w-xl px-4">
                  <button
                    className="w-full rounded-full bg-[#FAA631] text-white font-semibold text-base py-3 shadow-md hover:bg-[#f59c25] transition"
                    onClick={handleJoin}
                  >
                    {t.olympiad.registerNow}
                  </button>
                </div>
              </div>
            )}
          </AnimatedSection>
        ) : (
          <div className="flex flex-col items-center justify-center py-16 sm:py-24">
            <div className="bg-white rounded-3xl shadow-sm border border-orange-100 px-8 py-10 max-w-md w-full text-center">
              <div className="w-16 h-16 rounded-2xl bg-[#FFF4E4] flex items-center justify-center mx-auto shadow-sm">
                <span className="text-3xl">📭</span>
              </div>

              <h2 className="mt-5 text-xl font-bold text-gray-900">
                {t.olympiadPage.noDataTitle}
              </h2>

              <p className="mt-2 text-sm text-gray-600 leading-relaxed">
                We couldn’t find any Olympiad details right now. Please check
                back in a while or refresh the page.
              </p>

              <button
                onClick={() => router.push("/")}
                className="mt-6 w-full rounded-full bg-[#FAA631] text-white font-semibold text-base py-3 shadow-md hover:bg-[#f59c25] transition"
              >
                {t.olympiadPage.goHome}
              </button>

              <p className="mt-4 text-xs text-gray-400">
                {t.olympiadPage.tryAgainLater}
              </p>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}