vpinball/components/landing/TableStaging.tsx

"use client";

import { useState, type ChangeEvent } from "react";
import Button, { buttonClassName } from "@/components/ui/Button";
import { formatBytes } from "@/lib/format";

const ROM_FILE_INPUT_ID = "rom-file-input";

export interface TableStagingProps {
  vpxFile: File;
  onPlay: (romFile: File | undefined, saveToLibrary: boolean) => void;
  onCancel: () => void;
}

export default function TableStaging({ vpxFile, onPlay, onCancel }: TableStagingProps) {
  const [romFile, setRomFile] = useState<File | null>(null);
  const [saveToLibrary, setSaveToLibrary] = useState(true);
  const [error, setError] = useState<string | null>(null);

  const handleRomChange = (e: ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    e.target.value = "";
    if (!file) return;
    if (!file.name.toLowerCase().endsWith(".zip")) {
      setError(`"${file.name}" isn't a .zip file.`);
      return;
    }
    setError(null);
    setRomFile(file);
  };

  return (
    <div className="relative overflow-hidden rounded-t-3xl rounded-b-lg border-2 border-chrome/40 bg-ash shadow-2xl">
      <div className="relative flex flex-col items-center gap-5 px-4 py-14 text-center sm:px-8">
        <p className="font-mono text-xs tracking-[0.3em] text-arc">TABLE SELECTED</p>
        <h2 className="max-w-lg truncate font-display text-3xl font-black tracking-wide text-paper sm:text-4xl">
          {vpxFile.name}
        </h2>
        <p className="font-mono text-xs text-chrome">{formatBytes(vpxFile.size)}</p>

        <div className="mt-2 flex flex-col items-center gap-2">
          <p className="max-w-sm font-body text-sm text-chrome">
            Real-hardware (&quot;SS&quot;) tables need a matching PinMAME ROM. Attach its zip if you have one
            — most tables don&apos;t need this.
          </p>
          <label htmlFor={ROM_FILE_INPUT_ID} className={buttonClassName("outline", "cursor-pointer text-sm")}>
            {romFile ? `ROM: ${romFile.name}` : "Attach ROM (.zip) — optional"}
          </label>
          <input
            id={ROM_FILE_INPUT_ID}
            type="file"
            accept=".zip"
            className="sr-only"
            onChange={handleRomChange}
          />
          {romFile && (
            <button
              type="button"
              onClick={() => setRomFile(null)}
              className="font-mono text-xs text-chrome underline decoration-dotted underline-offset-2 hover:text-arc"
            >
              Remove ROM
            </button>
          )}
        </div>

        <label className="flex items-center gap-2 font-mono text-xs text-chrome">
          <input
            type="checkbox"
            checked={saveToLibrary}
            onChange={(e) => setSaveToLibrary(e.target.checked)}
            className="accent-marquee"
          />
          Save to my library, so I don&apos;t need to re-upload it later
        </label>

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

        <div className="mt-2 flex items-center gap-3">
          <Button type="button" variant="primary" onClick={() => onPlay(romFile ?? undefined, saveToLibrary)}>
            Play
          </Button>
          <Button type="button" variant="quiet" onClick={onCancel}>
            Cancel
          </Button>
        </div>
      </div>
    </div>
  );
}