"use client";

import Link from "next/link";
import { useParams } from "next/navigation";

import { ArrowLeft } from "lucide-react";

import { Button } from "@/components/ui/button";
import { useVenue, useVenueTables } from "@/stores/platform/use-platform-selectors";

import { FloorOverviewGrid } from "../../../_components/floor-overview-grid";

export default function VenueFloorPage() {
  const params = useParams();
  const venueId = params.id as string;
  const venue = useVenue(venueId);
  const tables = useVenueTables(venueId);

  return (
    <div className="p-6 space-y-6">
      <div className="flex items-center gap-3">
        <Button variant="ghost" size="icon" asChild>
          <Link href="/admin/venues">
            <ArrowLeft className="size-4" />
          </Link>
        </Button>
        <div>
          <h1 className="text-2xl font-bold">{venue?.name ?? "Venue"} — floor overview</h1>
          <p className="text-sm text-muted-foreground">Read-only operational visibility (not a floor editor)</p>
        </div>
      </div>
      <div className="flex gap-4 text-sm">
        <span className="flex items-center gap-2"><span className="size-3 rounded-full bg-emerald-500" /> Available</span>
        <span className="flex items-center gap-2"><span className="size-3 rounded-full bg-amber-500" /> Reserved</span>
        <span className="flex items-center gap-2"><span className="size-3 rounded-full bg-red-500" /> Occupied</span>
      </div>
      <FloorOverviewGrid tables={tables} />
    </div>
  );
}