"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 { setPendingTable } from "@/lib/pinball/tableSelectionStore";

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

  const handleFile = (file: File) => {
    setError(null);
    setPendingTable(file);
    router.push("/play");
  };

  return (
    <FileDropZone onFile={handleFile} onError={setError} className="w-full max-w-4xl">
      <div className="relative overflow-hidden rounded-t-3xl rounded-b-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-8 py-20 text-center 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-6xl 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")}>
              Insert Coin — Play Demo
            </Button>
            <label htmlFor={VPX_FILE_INPUT_ID} className={buttonClassName("outline", "cursor-pointer")}>
              Load Your 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>
  );
}