import React, { useEffect } from "react";
import { createPortal } from "react-dom";
import confetti from "canvas-confetti";
import { stylesTokens } from "../styles/theme";
import { useLanguage } from "../i18n";

export default function GameStartCelebration({ open, onClose }) {
  const { t, language } = useLanguage();
  useEffect(() => {
    if (!open) return;

    const burst = () => {
      confetti({
        particleCount: 70,
        spread: 78,
        startVelocity: 32,
        origin: { y: 0.62 },
        colors: ["#e9d8a6", "#7cffa8", "#8fb6ff", "#ffffff"],
      });
    };

    burst();
    const second = setTimeout(burst, 480);
    const close = setTimeout(onClose, 3000);
    return () => {
      clearTimeout(second);
      clearTimeout(close);
    };
  }, [open, onClose]);

  if (!open) return null;

  return createPortal(
    <div className="hp-start-overlay" onClick={onClose} role="dialog" aria-label={t("gameStarted")}>
      <div className="hp-start-card" onClick={(event) => event.stopPropagation()}>
        <div className="hp-start-rune">✦</div>
        <div className="hp-start-kicker">{t("investigationsBegin")}</div>
        <div className="hp-start-title">{t("gameStarted")}</div>
        <div className="hp-start-subtitle">{t("bestDetective")}</div>
        <button onClick={onClose} style={{ marginTop: 18, color: stylesTokens.textGold }}>
          {language === "en" ? "Let’s go" : "Los geht's"}
        </button>
      </div>
    </div>,
    document.body
  );
}