"use client";

import React from "react";
import { ArrowLeft, Check, RefreshCw } from "lucide-react";
import { BoothConfig } from "@/types/booth";
import { useI18n } from "@/lib/i18n";
import { MascotGuide } from "@/components/MascotGuide";

interface ConfirmScreenProps {
  config: BoothConfig;
  photoUrl: string;
  onConfirm: () => void;
  onRetake: () => void;
}

export const ConfirmScreen: React.FC<ConfirmScreenProps> = ({
  config,
  photoUrl,
  onConfirm,
  onRetake,
}) => {
  const { t } = useI18n();

  return (
    <div className="relative flex-1 flex flex-col items-center justify-between p-3 sm:p-4 overflow-hidden select-none">
      {/* Top Header - Back/Retake button on top left, title removed */}
      <div className="w-full flex items-center justify-between px-1 mb-1 z-30 min-h-[40px]">
        <button
          onClick={onRetake}
          className="p-2 px-3 rounded-2xl btn-cartoon-dark text-white flex items-center space-x-1 font-black text-xs cursor-pointer shadow-md"
        >
          <ArrowLeft size={16} className="stroke-[3]" />
          <span>{t(config.labels.retakeButton)}</span>
        </button>

        <div className="w-16" />
      </div>

      {/* Captured Photo Preview Card */}
      <div className="relative w-full max-w-sm aspect-[9/16] 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={photoUrl}
          alt="Captured Pose"
          className="w-full h-full object-cover select-none"
        />

        {/* Mascot Comic Callout in preview */}
        <div className="absolute -bottom-2 -left-2 sm:bottom-1 sm:left-1 pointer-events-none z-20">
          <MascotGuide
            pose="bow"
            size="md"
            speechPosition="right"
            speechText={{
              en: "Epic martial focus! Ready to pick your style?",
              zh: "气势十足！准备好选择你的万圣风格了吗？",
            }}
          />
        </div>
      </div>

      {/* Bottom Action Bar - Single centered button matching Standby Screen style */}
      <div className="w-full max-w-sm flex items-center justify-center py-2 z-20 min-h-[70px]">
        <button
          onClick={onConfirm}
          className="w-full max-w-[210px] sm:max-w-[240px] py-2 sm:py-2.5 px-4 game-btn-gold font-extrabold text-xs sm:text-sm tracking-wider flex items-center justify-center space-x-2 text-center select-none uppercase font-cinzel shadow-lg active:scale-95"
        >
          <Check size={17} className="stroke-[3]" />
          <span>{t(config.labels.confirmButton)}</span>
        </button>
      </div>
    </div>
  );
};