"use client";

import { useEffect, useState } from "react";
import { Button } from "@/components/ui/button";
import { Flame, Trophy, Sparkles } from "lucide-react";
import { useActiveUser } from "@/hooks/useActiveUser";

export function StreakOnboardingModal() {
  const { user, loading } = useActiveUser();
  const [isOpen, setIsOpen] = useState(false);

  useEffect(() => {
    if (loading || !user) return;

    // Check sessionStorage
    const hasSeen = sessionStorage.getItem(`hasSeenStreakPopup_${user.id}`);
    if (!hasSeen) {
      setIsOpen(true);
    }
  }, [user, loading]);

  if (!isOpen || !user) return null;

  const streak = user.streak_count;
  const targetExam = user.target_exam?.replace("_", " ") || "JEE/NEET";

  // Streak-based wishes and titles
  let wishTitle = "Welcome to PragatiVeer! 🌟";
  let wishMessage = `Prepare yourself to conquer ${targetExam}. Your daily practice starts here!`;
  let badgeBorderColor = "border-[#00F0FF]/30";
  let badgeShadow = "shadow-[0_0_25px_rgba(0,240,255,0.25)]";

  if (streak === 0) {
    wishTitle = "Start Your Streak Today! 🚀";
    wishMessage = "Today is Day 1 of your journey. Establish your streak now and build the consistency needed for IIT/AIIMS!";
    badgeBorderColor = "border-blue-500/30";
    badgeShadow = "shadow-[0_0_20px_rgba(59,130,246,0.2)]";
  } else if (streak < 4) {
    wishTitle = "Keep the Fire Burning! 🔥";
    wishMessage = `Great job! You have maintained a ${streak}-day study streak. Keep practicing daily to build solid muscle memory!`;
    badgeBorderColor = "border-orange-500/30";
    badgeShadow = "shadow-[0_0_20px_rgba(249,115,22,0.25)]";
  } else {
    wishTitle = "Unstoppable Dedication! ⚡";
    wishMessage = `Incredible! A ${streak}-day streak shows true championship discipline. You are outperforming the competition. Let's make today count!`;
    badgeBorderColor = "border-[#D1FF4D]/30";
    badgeShadow = "shadow-[0_0_25px_rgba(209,255,77,0.25)]";
  }

  const handleEnter = () => {
    sessionStorage.setItem(`hasSeenStreakPopup_${user.id}`, "true");
    setIsOpen(false);
  };

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/90 backdrop-blur-lg animate-in fade-in duration-300">
      
      {/* Celebration Animation Canvas Overlay */}
      <iframe
        src={`/streak-animation.html?streak=${streak}`}
        className="absolute inset-0 w-full h-full border-none pointer-events-none z-10"
        title="Streak Celebration"
        allowtransparency="true"
      />

      {/* Adaptive Modal Content Card */}
      <div className="bg-background/95 border border-border/80 shadow-[0_0_60px_-10px_rgba(0,240,255,0.15)] rounded-3xl w-full max-w-lg p-8 text-center space-y-6 relative overflow-hidden animate-in zoom-in-95 slide-in-from-bottom-4 duration-300 z-20 pointer-events-auto mx-4">
        
        {/* Subtle background glow */}
        <div className="absolute -right-20 -top-20 size-48 bg-[#00F0FF]/5 rounded-full blur-3xl pointer-events-none" />
        <div className="absolute -left-20 -bottom-20 size-48 bg-primary/5 rounded-full blur-3xl pointer-events-none" />

        {/* Pulsing Badge with PragatiVeer Logo */}
        <div className="relative size-28 mx-auto flex items-center justify-center">
          {/* Glowing pulse rings */}
          <div className="absolute inset-2 rounded-full bg-[#00F0FF]/10 animate-ping" style={{ animationDuration: '3s' }} />
          
          <img 
            src="/PragatiVeer_Logo/SVG_Logos/Square_dark_background.svg" 
            alt="PragatiVeer" 
            className={`size-24 rounded-full border-2 ${badgeBorderColor} ${badgeShadow} animate-pulse relative z-10 object-cover`}
          />
        </div>

        {/* Text Greetings */}
        <div className="space-y-3">
          {streak > 0 ? (
            <div className="inline-flex items-center gap-1.5 px-3 py-1 bg-orange-500/10 border border-orange-500/20 text-orange-500 text-xs font-extrabold rounded-full tracking-wider uppercase">
              <Flame size={12} className="fill-current animate-bounce" /> {streak} Day Streak Active
            </div>
          ) : (
            <div className="inline-flex items-center gap-1.5 px-3 py-1 bg-blue-500/10 border border-blue-500/20 text-blue-400 text-xs font-extrabold rounded-full tracking-wider uppercase">
              <Sparkles size={12} className="animate-spin" style={{ animationDuration: '4s' }} /> Day 1 Awaits
            </div>
          )}
          
          <h3 className="text-2xl md:text-3xl font-black tracking-tight bg-gradient-to-r from-white via-white to-gray-400 bg-clip-text text-transparent">
            {wishTitle}
          </h3>
          <p className="text-gray-400 text-sm md:text-base leading-relaxed max-w-sm mx-auto pt-1">
            {wishMessage}
          </p>
        </div>

        {/* Action Button */}
        <div className="pt-2">
          <Button 
            onClick={handleEnter}
            className="w-full h-14 rounded-xl text-lg font-black bg-[#00F0FF] text-black hover:bg-[#00F0FF]/90 shadow-[0_0_20px_-3px_#00F0FF] hover:shadow-[0_0_30px_#00F0FF] hover:-translate-y-1 transition-all duration-300"
          >
            Enter Workspace
          </Button>
        </div>
      </div>
    </div>
  );
}