"use client";

import React from "react";
import { RotateCcw } from "lucide-react";
import { BoothConfig } from "@/types/booth";
import { useI18n } from "@/lib/i18n";

interface RateLimitedScreenProps {
  config: BoothConfig;
  resetMinutes: number;
  onReset: () => void;
}

export const RateLimitedScreen: React.FC<RateLimitedScreenProps> = ({
  config,
  resetMinutes,
  onReset,
}) => {
  const { t } = useI18n();

  return (
    <div className="relative flex-1 flex flex-col items-center justify-center p-8 text-center select-none space-y-6">
      <div className="w-24 h-24 rounded-full bg-gradient-to-tr from-purple-900 to-orange-950 flex items-center justify-center border-2 border-orange-500/40 shadow-[0_0_30px_rgba(255,109,0,0.3)]">
        <span className="text-4xl animate-bounce">⏳</span>
      </div>

      <div className="space-y-2 max-w-xs">
        <h2 className="text-2xl font-black text-white tracking-wide drop-shadow-[0_2px_0_#090314]">
          {t({ en: "Martial Energy Cooling Down! ⚡", zh: "武道气合修整中！⚡" })}
        </h2>
        <p className="text-amber-200/90 text-sm leading-relaxed font-bold">
          {t({
            en: "You have conjured the maximum number of Halloween portraits for this session.",
            zh: "当前设备生成的万圣武道照已达上限，稍作休息吧！"
          })}
        </p>
        {resetMinutes > 0 && (
          <p className="text-slate-300 text-xs mt-2 bg-black/40 px-3 py-1.5 rounded-full border border-purple-500/30">
            {t({
              en: `More energy ready in approx ${resetMinutes} minutes.`,
              zh: `预计约 ${resetMinutes} 分钟后恢复。`
            })}
          </p>
        )}
      </div>

      <button
        onClick={onReset}
        className="px-6 py-3.5 rounded-2xl btn-cartoon-orange text-white font-black text-sm shadow-xl flex items-center space-x-2 transition active:scale-95"
      >
        <RotateCcw size={18} />
        <span>{t({ en: "Return to Dojo 🥋", zh: "返回万圣道馆 🥋" })}</span>
      </button>
    </div>
  );
};