"use client";

import { useEffect, useState } from "react";
import PinballCanvas from "./PinballCanvas";
import { takePendingTable } from "@/lib/pinball/tableSelectionStore";
import type { TableInfo } from "@/lib/pinball/types";

interface ResolvedTable {
  tableData?: ArrayBuffer;
  tableInfo: TableInfo;
}

export default function PlayView() {
  const [resolved, setResolved] = useState<ResolvedTable | null>(null);

  useEffect(() => {
    let cancelled = false;
    (async () => {
      const file = takePendingTable();
      if (file) {
        const tableData = await file.arrayBuffer();
        if (cancelled) return;
        setResolved({
          tableData,
          tableInfo: { name: file.name, sizeBytes: file.size, isDemo: false },
        });
        return;
      }
      // No pending upload (fresh visit, or a hard refresh of /play) — fall
      // back to the bundled demo table rather than dead-ending the route.
      setResolved({
        tableInfo: { name: "Demo table", sizeBytes: 0, isDemo: true },
      });
    })();
    return () => {
      cancelled = true;
    };
  }, []);

  if (!resolved) {
    return (
      <div className="flex h-full w-full items-center justify-center bg-ink font-mono text-chrome">
        Preparing table…
      </div>
    );
  }

  return (
    <PinballCanvas tableData={resolved.tableData} tableInfo={resolved.tableInfo} key={resolved.tableInfo.name} />
  );
}