"use client";

import { useState } from "react";

import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import {
  Dialog,
  DialogContent,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { DEFAULT_VENUE_ID } from "@/data/platform-mock";
import { getAuthUser } from "@/lib/auth";
import { usePlatformStore } from "@/stores/platform/platform-store";
import { useVenueTables, useVenueWaiting } from "@/stores/platform/use-platform-selectors";

export default function ManagerWaitingPage() {
  const user = getAuthUser();
  const venueId = user?.venueId ?? DEFAULT_VENUE_ID;
  const waiting = useVenueWaiting(venueId);
  const tables = useVenueTables(venueId);
  const assignTable = usePlatformStore((s) => s.assignTableToWaiting);
  const removeFromWaiting = usePlatformStore((s) => s.removeFromWaiting);
  const moveToReservation = usePlatformStore((s) => s.moveWaitingToReservation);

  const [assignId, setAssignId] = useState<string | null>(null);
  const available = tables.filter((t) => t.status === "available");
  const guest = waiting.find((w) => w.id === assignId);

  return (
    <div className="p-6 space-y-6">
      <div>
        <h1 className="text-2xl font-bold">Waiting list</h1>
        <p className="text-sm text-muted-foreground">Assign tables or move guests to active reservations</p>
      </div>
      <div className="space-y-3">
        {waiting.length === 0 ? (
          <p className="text-muted-foreground">No guests waiting.</p>
        ) : (
          waiting.map((w) => (
            <Card key={w.id}>
              <CardContent className="flex flex-wrap items-center justify-between gap-4 p-4">
                <div>
                  <p className="font-semibold">{w.guestName}</p>
                  <p className="text-sm text-muted-foreground">
                    Party of {w.partySize} · waiting since {w.waitingSince}
                  </p>
                </div>
                <div className="flex gap-2">
                  <Button onClick={() => setAssignId(w.id)}>Assign table</Button>
                  <Button variant="secondary" onClick={() => moveToReservation(w.id, venueId)}>
                    To reservation
                  </Button>
                  <Button variant="outline" onClick={() => removeFromWaiting(w.id)}>
                    Remove
                  </Button>
                </div>
              </CardContent>
            </Card>
          ))
        )}
      </div>

      <Dialog open={!!assignId} onOpenChange={(o) => !o && setAssignId(null)}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Assign table — {guest?.guestName}</DialogTitle>
          </DialogHeader>
          <div className="grid grid-cols-2 gap-2">
            {available.map((t) => (
              <Button
                key={t.id}
                variant="outline"
                onClick={() => {
                  if (assignId) assignTable(assignId, t.id);
                  setAssignId(null);
                }}
              >
                Table {t.number}
              </Button>
            ))}
          </div>
          <DialogFooter>
            <Button variant="ghost" onClick={() => setAssignId(null)}>Cancel</Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  );
}