"use client";

import { useMemo, useState } from "react";

import { Eye, UserCheck, UserMinus, Users } from "lucide-react";

import { Button } from "@/components/ui/button";
import type { FloorTable } from "@/data/platform-mock";
import { cn } from "@/lib/utils";
import {
  useOpsTableActions,
  useReservationById,
  useVenueOpsArrivals,
} from "@/stores/platform/use-platform-selectors";
import { useOpsVenueId } from "@/stores/operations/operations-store";

import { ReservationQuickView } from "./reservation-quick-view";
import { TableStatusBadge, tableBorderClass } from "./ops-status-badge";

interface TableCardProps {
  table: FloorTable;
}

export function TableCard({ table }: TableCardProps) {
  const [viewOpen, setViewOpen] = useState(false);
  const venueId = useOpsVenueId();
  const { markArrived, markOccupied, markFree } = useOpsTableActions();
  const arrivals = useVenueOpsArrivals(venueId);
  const reservationFromStore = useReservationById(table.reservationId);

  const reservation = useMemo(() => {
    if (!table.reservationId) return undefined;
    return (
      reservationFromStore ?? arrivals.find((a) => a.id === table.reservationId)
    );
  }, [table.reservationId, reservationFromStore, arrivals]);

  return (
    <>
      <article
        className={cn(
          "flex flex-col rounded-xl border-2 p-4 transition-shadow hover:shadow-md",
          tableBorderClass(table.status),
        )}
      >
        <div className="mb-3 flex items-start justify-between gap-2">
          <div>
            <p className="text-2xl font-bold leading-none">T{table.number}</p>
            <p className="mt-1 text-xs text-muted-foreground">Seats {table.capacity}</p>
          </div>
          <TableStatusBadge status={table.status} />
        </div>

        {table.guestName ? (
          <div className="mb-3 space-y-1 text-sm">
            <p className="font-semibold truncate">{table.guestName}</p>
            <div className="flex items-center gap-3 text-muted-foreground">
              {table.partySize != null && (
                <span className="flex items-center gap-1">
                  <Users className="size-3.5" />
                  {table.partySize}
                </span>
              )}
              {table.reservationTime && <span>{table.reservationTime}</span>}
            </div>
          </div>
        ) : (
          <p className="mb-3 text-sm text-muted-foreground">No guest assigned</p>
        )}

        <div className="mt-auto grid grid-cols-2 gap-2">
          {table.status === "reserved" && (
            <Button className="col-span-2 h-11 text-sm" onClick={() => markArrived(table.id)}>
              <UserCheck className="size-4 mr-1.5" />
              Mark arrived
            </Button>
          )}
          {(table.status === "reserved" || table.status === "available") && table.guestName && (
            <Button className="h-11 text-sm" variant="secondary" onClick={() => markOccupied(table.id)}>
              Mark occupied
            </Button>
          )}
          {table.status === "occupied" && (
            <Button className="col-span-2 h-11 text-sm" variant="outline" onClick={() => markFree(table.id)}>
              <UserMinus className="size-4 mr-1.5" />
              Mark table free
            </Button>
          )}
          {table.reservationId && (
            <Button
              className={cn("h-11 text-sm", table.status !== "occupied" && !table.guestName ? "col-span-2" : "")}
              variant="ghost"
              onClick={() => setViewOpen(true)}
            >
              <Eye className="size-4 mr-1.5" />
              View reservation
            </Button>
          )}
        </div>
      </article>

      <ReservationQuickView
        reservation={reservation ?? null}
        open={viewOpen}
        onOpenChange={setViewOpen}
        readOnly
      />
    </>
  );
}