"use client";

import React, { useEffect, useState } from "react";
import { Sparkles, Loader2, Flame } from "lucide-react";
import { BoothConfig } from "@/types/booth";
import { useI18n } from "@/lib/i18n";
import { MascotGuide } from "@/components/MascotGuide";

interface LoadingScreenProps {
  config: BoothConfig;
  currentStepMessage?: string;
}

export const LoadingScreen: React.FC<LoadingScreenProps> = ({
  config,
  currentStepMessage,
}) => {
  const { t } = useI18n();
  const [progress, setProgress] = useState(15);

  useEffect(() => {
    const timer = setInterval(() => {
      setProgress((prev) => {
        if (prev >= 92) return prev;
        return prev + Math.floor(Math.random() * 8) + 3;
      });
    }, 700);

    return () => clearInterval(timer);
  }, []);

  return (
    <div className="relative flex-1 flex flex-col items-center justify-center p-6 text-center select-none overflow-hidden">
      {/* Animated Center Karate Ghost & Ki-Sphere */}
      <div className="relative mb-4 flex flex-col items-center">
        <MascotGuide
          pose="punch"
          size="md"
          speechPosition="top"
          speechText={{
            en: "KIAI! Gathering dojo ki and pumpkin magic...",
            zh: "气合！正在汇聚道馆灵气与南瓜魔法...",
          }}
        />
      </div>

      <h2 className="text-xl sm:text-2xl font-black text-white tracking-wide mb-2 drop-shadow-[0_2px_0_#090314]">
        {t(config.labels.processingTitle)}
      </h2>

      <p className="text-xs sm:text-sm text-purple-200 max-w-xs mb-6 font-medium leading-relaxed drop-shadow">
        {currentStepMessage || t(config.labels.processingSubtitle)}
      </p>

      {/* Chunky Progress Bar */}
      <div className="w-full max-w-xs h-6 rounded-full bg-black/60 border-2 border-black p-1 shadow-inner relative overflow-hidden">
        <div
          className="h-full rounded-full bg-gradient-to-r from-amber-400 via-orange-500 to-cyan-400 transition-all duration-300 shadow-[0_0_15px_rgba(251,191,36,0.6)]"
          style={{ width: `${progress}%` }}
        />
      </div>

      <span className="text-[11px] font-black text-amber-300 mt-2 tracking-wider">
        {progress}% · {t({ en: "MARTIAL MAGIC BREWING", zh: "武道气合凝聚中" })}
      </span>
    </div>
  );
};