karate_halloween/components/screens/ResultScreen.tsx

"use client";

import React, { useState, useEffect } from "react";
import { Download } from "lucide-react";
import confetti from "canvas-confetti";
import { BoothConfig } from "@/types/booth";
import { useI18n } from "@/lib/i18n";
import { MascotGuide } from "@/components/MascotGuide";

interface ResultScreenProps {
  config: BoothConfig;
  resultImageUrl: string;
  providerInfo?: {
    provider: string;
    model: string;
    durationMs: number;
    fallbackTriggered: boolean;
  };
  onStartOver?: () => void;
}

export const ResultScreen: React.FC<ResultScreenProps> = ({
  config,
  resultImageUrl,
  providerInfo,
  onStartOver,
}) => {
  const { t, isWeChat } = useI18n();
  const [currentUrl, setCurrentUrl] = useState("");

  useEffect(() => {
    try {
      confetti({
        particleCount: 80,
        spread: 85,
        origin: { y: 0.65 },
        colors: ["#ff6d00", "#06b6d4", "#a855f7", "#fbbf24", "#ffffff"],
      });
    } catch (e) {
      // Ignore
    }

    if (typeof window !== "undefined") {
      setCurrentUrl(window.location.href);
    }
  }, []);

  const handleDownload = () => {
    const a = document.createElement("a");
    a.href = resultImageUrl;
    a.download = `shanghai-karate-spooky-${Date.now()}.jpg`;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
  };

  return (
    <div className="relative flex-1 flex flex-col justify-between p-2 sm:p-3 overflow-hidden select-none">
      {/* Top spacing */}
      <div className="w-full min-h-[4px] sm:min-h-[8px]" />

      {/* Main Result Image Card - Compact 9:16 frame */}
      <div className="relative w-full max-w-[275px] sm:max-w-[310px] mx-auto aspect-[9/16] rounded-2xl sm:rounded-3xl overflow-hidden bg-black border-4 border-black shadow-[0_8px_0_#090314,0_0_25px_rgba(255,109,0,0.3)] flex items-center justify-center my-auto">
        {/* eslint-disable-next-line @next/next/no-img-element */}
        <img
          src={resultImageUrl}
          alt="Halloween Karate Result"
          className="w-full h-full object-cover select-none"
        />

        {/* WeChat Long-Press Save Floating Badge */}
        {isWeChat && (
          <div className="absolute top-2 inset-x-3 py-1 px-3 rounded-full bg-black/75 backdrop-blur-sm border border-amber-400/50 text-center">
            <span className="text-[10px] sm:text-[11px] font-bold text-amber-300">
              👉 {t(config.labels.wechatSaveTip)}
            </span>
          </div>
        )}
      </div>

      {/* Bottom Bar: Mascot on far bottom-left, Save Button on bottom-right */}
      <div className="w-full max-w-[340px] sm:max-w-md mx-auto flex items-end justify-between z-30 -mt-10 sm:-mt-12 px-1 pb-1">
        {/* Mascot hugging the far bottom-left with speech bubble to the right and lifted higher */}
        <div className="pointer-events-none -ml-4 sm:-ml-2 -mb-1">
          <MascotGuide
            pose="zen"
            size="md"
            speechPosition="right"
            speechClassName="-translate-y-10 sm:-translate-y-8 max-w-[340px] sm:max-w-[400px]"
            speechText={{
              en: "Sensational! A true Shanghai Halloween Master!",
              zh: "太赞了！真正的万圣空手道宗师诞生！",
            }}
          />
        </div>

        {/* Save Button on the bottom-right */}
        <div className="pb-1.5 shrink-0">
          <button
            onClick={handleDownload}
            className="py-2 px-3.5 game-btn-gold font-extrabold text-xs sm:text-sm tracking-wider flex items-center space-x-1.5 uppercase font-cinzel shadow-lg active:scale-95 cursor-pointer"
          >
            <Download size={15} className="stroke-[2.5]" />
            <span>{t(config.labels.downloadLabel)}</span>
          </button>
        </div>
      </div>
    </div>
  );
};