"use client";

import { useRouter } from "next/navigation";
import { useState } from "react";
import Button, { buttonClassName } from "@/components/ui/Button";
import FileDropZone, { VPX_FILE_INPUT_ID } from "@/components/FileDropZone";
import TableStaging from "./TableStaging";
import { setPendingTable } from "@/lib/pinball/tableSelectionStore";

export default function AttractHero() {
  const router = useRouter();
  const [error, setError] = useState<string | null>(null);
  const [stagedFile, setStagedFile] = useState<File | null>(null);

  const handleFile = (file: File) => {
    setError(null);
    setStagedFile(file);
  };

  const handlePlay = (romFile: File | undefined, saveToLibrary: boolean) => {
    if (!stagedFile) return;
    setPendingTable({ kind: "upload", vpxFile: stagedFile, romFile, saveToLibrary });
    router.push("/play");
  };

  if (stagedFile) {
    return (
      <div className="w-full max-w-4xl">
        <TableStaging vpxFile={stagedFile} onPlay={handlePlay} onCancel={() => setStagedFile(null)} />
      </div>
    );
  }

  return (
    <FileDropZone onFile={handleFile} onError={setError} className="w-full max-w-4xl">
      <div className="relative overflow-hidden rounded-lg border-2 border-chrome/40 bg-ash shadow-2xl">
        {/* Backglass glow — stands in for real playfield art; GI-lamp amber + a cyan tube accent. */}
        <div
          aria-hidden
          className="pointer-events-none absolute inset-0 opacity-70"
          style={{
            background:
              "radial-gradient(60% 50% at 30% 20%, rgba(255,122,41,0.35), transparent 70%), radial-gradient(45% 40% at 80% 70%, rgba(76,224,210,0.25), transparent 70%)",
          }}
        />
        <div
          aria-hidden
          className="pointer-events-none absolute inset-0"
          style={{
            backgroundImage:
              "repeating-linear-gradient(0deg, rgba(255,255,255,0.03) 0px, rgba(255,255,255,0.03) 1px, transparent 1px, transparent 3px)",
          }}
        />

        <div className="relative flex flex-col items-center gap-6 px-4 py-14 text-center sm:px-8 sm:py-28">
          <p className="font-mono text-xs tracking-[0.3em] text-arc">WEBASSEMBLY · WEBGL2 · REAL .VPX TABLES</p>
          <h1 className="font-display text-5xl font-black leading-none tracking-wide text-paper sm:text-8xl">
            VPINBALL
          </h1>
          <p className="max-w-md font-body text-chrome">
            Real Visual Pinball tables, playing in your browser. Drop in a{" "}
            <code className="font-mono text-arc">.vpx</code> file, or try the bundled demo.
          </p>

          <div className="mt-4 flex flex-col items-center gap-3 sm:flex-row">
            <Button type="button" variant="primary" onClick={() => router.push("/play")}>
              Play Demo
            </Button>
            <label htmlFor={VPX_FILE_INPUT_ID} className={buttonClassName("outline", "cursor-pointer")}>
              Load Table
            </label>
          </div>

          <p className="font-mono text-xs text-chrome">or drag a .vpx file anywhere onto this panel</p>

          {error && (
            <p role="alert" className="font-mono text-sm text-marquee">
              {error}
            </p>
          )}
        </div>
      </div>
    </FileDropZone>
  );
}