"use client";

import React from "react";
import { t } from "@/content/locales";

interface VictoryScreenProps {
  credits: number;
  onRestart: () => void;
}

export default function VictoryScreen({
  credits,
  onRestart,
}: VictoryScreenProps) {
  const creditsBlue = "#4bd5ee";

  return (
    <div className="fixed inset-0 z-[120] flex items-center justify-center bg-black overflow-hidden">
      <div className="absolute inset-0 pointer-events-none">
        <div
          className="absolute inset-0 opacity-30"
          style={{
            backgroundImage: `
              radial-gradient(1px 1px at 20px 30px, #fff 100%, rgba(0,0,0,0)),
              radial-gradient(1px 1px at 40px 70px, #fff 100%, rgba(0,0,0,0)),
              radial-gradient(1px 1px at 50px 160px, #ddd 100%, rgba(0,0,0,0)),
              radial-gradient(1px 1px at 90px 40px, #fff 100%, rgba(0,0,0,0))
            `,
            backgroundSize: "200px 200px",
            backgroundRepeat: "repeat",
          }}
        />
        <div
          className="absolute inset-0 opacity-50"
          style={{
            backgroundImage: `
              radial-gradient(1.5px 1.5px at 100px 150px, #fff 100%, rgba(0,0,0,0)),
              radial-gradient(1.5px 1.5px at 300px 400px, #ddd 100%, rgba(0,0,0,0))
            `,
            backgroundSize: "450px 450px",
            backgroundRepeat: "repeat",
          }}
        />
      </div>

      <div
        className="absolute inset-0 opacity-10"
        style={{
          background: `radial-gradient(circle at center, ${creditsBlue} 0%, transparent 70%)`,
        }}
      />

      <div
        className="max-w-2xl w-full mx-4 relative z-10 text-center space-y-8 p-10 border-2 rounded-2xl bg-black/80 backdrop-blur-sm shadow-[0_0_50px_rgba(0,0,0,0.5)]"
        style={{ borderColor: creditsBlue }}
      >
        <div className="space-y-2">
          <h1 className="font-starjedi text-6xl" style={{ color: creditsBlue }}>
            {t.VICTORY.TITLE}
          </h1>
          <p
            className="font-mono tracking-[0.3em] uppercase text-xs opacity-70"
            style={{ color: creditsBlue }}
          >
            {t.VICTORY.SUBTITLE}
          </p>
        </div>

        <div
          className="space-y-6 leading-relaxed"
          style={{ color: creditsBlue }}
        >
          <div className="space-y-2">
            <p className="text-sm tracking-wider font-medium uppercase">
              {t.VICTORY.MESSAGE}
            </p>
            <p className="text-4xl font-black tracking-tighter">
              {credits.toLocaleString()} CR
            </p>
          </div>

          <div
            className="text-[10px] py-4 border-y border-opacity-20 inline-block px-8 tracking-[0.2em] uppercase italic"
            style={{ borderColor: creditsBlue }}
          >
            The galaxy will remember your name.
          </div>
        </div>

        <div className="pt-6">
          <button
            onClick={onRestart}
            className="px-12 py-5 border-2 font-black uppercase tracking-[0.3em] transition-all hover:text-black active:scale-95"
            style={{
              borderColor: creditsBlue,
              color: creditsBlue,
            }}
            onMouseOver={(e) => {
              e.currentTarget.style.backgroundColor = creditsBlue;
              e.currentTarget.style.color = "black";
            }}
            onMouseOut={(e) => {
              e.currentTarget.style.backgroundColor = "transparent";
              e.currentTarget.style.color = creditsBlue;
            }}
          >
            {t.VICTORY.BUTTON}
          </button>
        </div>
      </div>
    </div>
  );
}