"use client";

import { useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import { formatBytes } from "@/lib/format";
import { deleteFromLibrary, listLibrary, type LibraryEntryMeta } from "@/lib/pinball/tableLibrary";
import { setPendingTable } from "@/lib/pinball/tableSelectionStore";

export default function TableLibrary() {
  const router = useRouter();
  const [entries, setEntries] = useState<LibraryEntryMeta[] | null>(null);

  useEffect(() => {
    listLibrary()
      .then(setEntries)
      .catch((err) => {
        console.error("Failed to read table library:", err);
        setEntries([]);
      });
  }, []);

  if (!entries || entries.length === 0) return null;

  const handlePlay = (id: string) => {
    setPendingTable({ kind: "library", id });
    router.push("/play");
  };

  const handleDelete = async (id: string) => {
    await deleteFromLibrary(id);
    setEntries((prev) => prev?.filter((entry) => entry.id !== id) ?? null);
  };

  return (
    <div className="w-full max-w-4xl">
      <h2 className="mb-3 font-display text-xl tracking-wide text-paper">Your Library</h2>
      <ul className="divide-y divide-chrome/20 rounded-lg border border-chrome/30 bg-ash">
        {entries.map((entry) => (
          <li key={entry.id} className="flex items-center justify-between gap-3 px-4 py-3">
            <div className="min-w-0">
              <div className="truncate font-mono text-sm text-paper">{entry.name}</div>
              <div className="font-mono text-xs text-chrome">
                {formatBytes(entry.sizeBytes)}
                {entry.romFileName ? ` · ROM: ${entry.romFileName}` : ""}
              </div>
            </div>
            <div className="flex shrink-0 items-center gap-2">
              <button
                type="button"
                onClick={() => handlePlay(entry.id)}
                className="rounded-full border-2 border-marquee bg-marquee/10 px-4 py-1.5 font-display text-sm tracking-wide text-marquee transition hover:bg-marquee/20"
              >
                Play
              </button>
              <button
                type="button"
                onClick={() => handleDelete(entry.id)}
                className="rounded-full border border-chrome/40 px-4 py-1.5 font-display text-sm tracking-wide text-chrome transition hover:border-marquee hover:text-marquee"
              >
                Delete
              </button>
            </div>
          </li>
        ))}
      </ul>
    </div>
  );
}