"use client";

import { useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import Image from "next/image";
import { Crown, Star, ArrowLeft, Trophy } from "lucide-react";
import AnimatedSection from "@/components/AnimatedSection";
import { getHomeApi } from "@/lib/api/apis";
import { useLanguage } from "@/src/hooks/LanguageContext";
import { getTranslation } from "@/src/hooks/useTranslation";

export default function AllPrizesPage() {
  const router = useRouter();
  const { language } = useLanguage();
  const t = getTranslation(language).prizesPage;
  const [prizeData, setPrizeData] = useState<any>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    window.scrollTo({ top: 0, behavior: "smooth" });
  }, []);

  useEffect(() => {
    (async () => {
      try {
        const userId =
          typeof window !== "undefined"
            ? JSON.parse(localStorage.getItem("user_data") || "{}").id || ""
            : "";
        const res = await getHomeApi(userId);
        setPrizeData(res?.data?.prize_list?.[0] || null);
      } finally {
        setLoading(false);
      }
    })();
  }, []);

  const formatINR = (value?: number | string) => {
    if (!value) return "—";
    return Number(value).toLocaleString("en-IN");
  };

  if (loading) {
    return (
      <div className="pt-20 min-h-screen bg-gradient-to-br from-orange-50 to-white flex items-center justify-center">
        <div className="flex flex-col items-center gap-4">
          <div className="w-12 h-12 border-4 border-[#FAA631] border-t-transparent rounded-full animate-spin" />
          <p className="text-gray-500 font-medium">{t.loading}</p>
        </div>
      </div>
    );
  }

  return (
    <div className="pt-20 min-h-screen bg-gradient-to-br from-[#ffba26] via-[#fcc349] to-[#fcdb92]">
      {/* CSS Animations */}
      <style jsx>{`
        @keyframes gradient-x {
          0%, 100% { background-position: 0% 50%; }
          50% { background-position: 100% 50%; }
        }
        @keyframes float {
          0%, 100% { transform: translateY(0px); }
          50% { transform: translateY(-10px); }
        }
        @keyframes pulse-glow {
          0%, 100% { box-shadow: 0 0 20px rgba(250, 166, 49, 0.3); }
          50% { box-shadow: 0 0 40px rgba(250, 166, 49, 0.6); }
        }
        .animate-gradient-x {
          background-size: 200% 200%;
          animation: gradient-x 3s ease infinite;
        }
        .animate-float { animation: float 6s ease-in-out infinite; }
        .animate-pulse-glow { animation: pulse-glow 2s ease-in-out infinite; }
      `}</style>

      <div className="container mx-auto px-4 py-10">
        {/* Back Button */}
        <button
          onClick={() => router.back()}
          className="flex items-center gap-2 text-gray-800 font-semibold mb-8 hover:text-gray-900 transition group"
        >
          <ArrowLeft className="w-5 h-5 group-hover:-translate-x-1 transition-transform" />
          {t.back}
        </button>

        {/* Page Header */}
        <AnimatedSection className="text-center mb-10">
          <div className="inline-block p-3 bg-gradient-to-br from-[#FAA631] to-[#E6952B] rounded-2xl mb-4 shadow-lg shadow-[#FAA631]/40">
            <Trophy className="w-12 h-12 text-white" />
          </div>
          <h1 className="text-3xl md:text-4xl lg:text-5xl font-bold text-gray-900 mb-3">
            {t.title}
          </h1>
          <p className="text-base md:text-lg text-gray-800 font-medium">
            {t.totalPrizePool}{" "}
            <span className="text-2xl md:text-3xl font-extrabold bg-gradient-to-r from-[#E6952B] to-[#FAA631] bg-clip-text text-transparent">
              ₹{formatINR(prizeData?.total_amount)}
            </span>
          </p>
        </AnimatedSection>

        {/* Top 3 Cards */}
        <AnimatedSection delay={100}>
          <div className="relative bg-white/90 backdrop-blur-sm rounded-3xl border border-[#FAA631]/30 shadow-2xl p-6 md:p-10 mb-8 overflow-hidden">
            {/* Top golden border */}
            <div className="absolute top-0 left-0 right-0 h-1.5 bg-gradient-to-r from-[#FFD56A] via-[#FAA631] to-[#FFD56A] animate-gradient-x" />

            {/* Floating particles */}
            <div className="absolute inset-0 opacity-5 pointer-events-none">
              <span className="absolute animate-float" style={{ top: "15%", left: "8%" }}>✨</span>
              <span className="absolute animate-float" style={{ top: "65%", left: "85%", animationDelay: "0.7s" }}>⭐</span>
              <span className="absolute animate-float" style={{ top: "80%", left: "25%", animationDelay: "0.3s" }}>🏆</span>
            </div>

            <div className="flex flex-col md:flex-row items-center justify-center gap-8 md:gap-12 lg:gap-16 w-full relative z-10">

              {/* 2nd Prize */}
              <div className="group transform transition-all duration-300 hover:scale-105 hover:-translate-y-2 w-full md:w-auto">
                <div className="relative flex justify-center">
                  <div className="absolute -inset-4 bg-gradient-to-br from-gray-300 to-gray-400 rounded-full blur opacity-20 group-hover:opacity-30" />
                  <div className="relative w-24 md:w-28 h-24 md:h-28 bg-gradient-to-b from-gray-200 to-gray-300 rounded-full flex items-center justify-center shadow-xl border-4 border-gray-300">
                    <Image src="/images/trophy.svg" alt="Silver Trophy" width={80} height={80} className="w-12 md:w-16 h-12 md:h-16" />
                  </div>
                </div>
                <div className="mt-5 text-center">
                  <div className="inline-block px-4 py-1.5 bg-gradient-to-r from-gray-200 to-gray-300 rounded-full mb-2 shadow-inner">
                    <p className="text-xl md:text-2xl font-bold text-gray-700">2nd</p>
                  </div>
                  <p className="text-xl md:text-2xl lg:text-3xl font-bold text-gray-900 mb-1 break-words px-2">
                    ₹{formatINR(prizeData?.prize_items?.[1]?.prize_amount) || "—"}
                  </p>
                  <p className="text-gray-600 text-sm">
                    {prizeData?.prize_items?.[1]?.prize_winners || "--"} {t.winners}
                  </p>
                </div>
              </div>

              {/* 1st Prize */}
              <div className="order-first md:order-none group transform transition-all duration-300 hover:scale-110 hover:-translate-y-3 w-full md:w-auto">
                <div className="relative mb-6 flex justify-center">
                  <div className="absolute -inset-4 bg-gradient-to-br from-[#FAA631]/30 to-[#E6952B]/30 rounded-full blur-xl" />
                  <div className="absolute -inset-2 bg-gradient-to-br from-[#FFD56A] to-[#FAA631] rounded-full blur opacity-50 animate-pulse" />
                  <div className="relative w-32 md:w-36 h-32 md:h-36 bg-gradient-to-b from-[#FFD56A] to-[#FAA631] rounded-full flex items-center justify-center shadow-2xl border-4 border-[#FFB347] animate-pulse-glow">
                    <Image src="/images/trophy.svg" alt="Gold Trophy" width={100} height={100} className="w-16 md:w-20 h-16 md:h-20" />
                    <div className="absolute -top-2 -right-2 w-9 md:w-10 h-9 md:h-10 bg-gradient-to-br from-[#FFD56A] to-[#FAA631] rounded-full flex items-center justify-center shadow-lg">
                      <Crown className="w-5 md:w-6 h-5 md:h-6 text-white" />
                    </div>
                  </div>
                </div>
                <div className="text-center">
                  <div className="inline-block px-5 md:px-6 py-2.5 md:py-3 bg-gradient-to-r from-[#FAA631] to-[#E6952B] rounded-full mb-3 shadow-lg shadow-[#FAA631]/40">
                    <p className="text-2xl md:text-3xl font-bold text-white">1st</p>
                  </div>
                  <p className="text-2xl md:text-3xl lg:text-4xl font-bold bg-gradient-to-r from-[#E6952B] to-[#FAA631] bg-clip-text text-transparent mb-2 break-words px-2">
                    ₹{formatINR(prizeData?.prize_items?.[0]?.prize_amount) || "—"}
                  </p>
                  <p className="text-[#E6952B] text-sm font-semibold mb-2">
                    {prizeData?.prize_items?.[0]?.prize_winners || "--"} {t.winners}
                  </p>
                  <div className="inline-flex items-center gap-1 text-xs font-bold text-[#E6952B] bg-[#FAA631]/10 px-3 py-1 rounded-full border border-[#FAA631]/20">
                    <Star className="w-3 h-3" /> {t.topPrize}
                  </div>
                </div>
              </div>

              {/* 3rd Prize */}
              <div className="group transform transition-all duration-300 hover:scale-105 hover:-translate-y-2 w-full md:w-auto">
                <div className="relative flex justify-center">
                  <div className="absolute -inset-4 bg-gradient-to-br from-[#E6952B]/20 to-[#D6851B]/20 rounded-full blur opacity-20 group-hover:opacity-30" />
                  <div className="relative w-20 md:w-24 h-20 md:h-24 bg-gradient-to-b from-[#E6952B] to-[#D6851B] rounded-full flex items-center justify-center shadow-xl border-4 border-[#E6952B]">
                    <Image src="/images/trophy.svg" alt="Bronze Trophy" width={70} height={70} className="w-10 md:w-14 h-10 md:h-14" />
                  </div>
                </div>
                <div className="mt-5 text-center">
                  <div className="inline-block px-4 py-1.5 bg-gradient-to-r from-[#E6952B] to-[#D6851B] rounded-full mb-2 shadow-inner">
                    <p className="text-xl md:text-2xl font-bold text-white">3rd</p>
                  </div>
                  <p className="text-xl md:text-2xl lg:text-3xl font-bold text-gray-900 mb-1 break-words px-2">
                    ₹{formatINR(prizeData?.prize_items?.[2]?.prize_amount) || "—"}
                  </p>
                  <p className="text-gray-600 text-sm">
                    {prizeData?.prize_items?.[2]?.prize_winners || "--"} {t.winners}
                  </p>
                </div>
              </div>

            </div>
          </div>
        </AnimatedSection>

        {/* Full Prizes Table */}
        {prizeData?.prize_items?.length > 3 && (
          <AnimatedSection delay={150}>
            <div className="bg-white/90 backdrop-blur-sm rounded-3xl border border-[#FAA631]/30 shadow-2xl overflow-hidden mb-10">
              {/* Table Header */}
              <div className="bg-gradient-to-r from-[#FAA631] to-[#E6952B] px-4 md:px-6 py-4">
                <h2 className="text-white font-bold text-lg md:text-xl">{t.morePrizes}</h2>
              </div>

              {/* Column Headers */}
              <div className="grid grid-cols-3 bg-gray-50 border-b border-gray-200 text-gray-600 font-semibold text-xs md:text-sm px-4 md:px-6 py-3">
                <div>{t.rank}</div>
                <div className="text-center">{t.winners}</div>
                <div className="text-right">{t.winnings}</div>
              </div>

              {/* Rows */}
              {prizeData.prize_items.slice(3).map((item: any, index: number) => (
                <div
                  key={index}
                  className={`grid grid-cols-3 px-4 md:px-6 py-3 border-b border-gray-100 text-xs md:text-sm items-center transition hover:bg-orange-50 ${
                    index % 2 === 0 ? "bg-white" : "bg-gray-50/50"
                  }`}
                >
                  <div className="text-[#FAA631] font-semibold">{item.prize_position}</div>
                  <div className="text-center text-gray-700">{item.prize_winners}</div>
                  <div className="text-right font-semibold text-gray-900 break-words">
                    ₹{formatINR(item.prize_amount)}
                  </div>
                </div>
              ))}
            </div>
          </AnimatedSection>
        )}
      </div>
    </div>
  );
}