"use client";

import { useState } from "react";

import { ArrowRight, Clock, Trash2, Users } from "lucide-react";

import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { useOpsVenueId } from "@/stores/operations/operations-store";
import {
  useOpsWaitingActions,
  useVenueTables,
  useVenueWaiting,
} from "@/stores/platform/use-platform-selectors";

import { OperationsHeader } from "../_components/operations-header";

export default function WaitingListPage() {
  const venueId = useOpsVenueId();
  const waiting = useVenueWaiting(venueId);
  const tables = useVenueTables(venueId);
  const { assignTableToWaiting: assignTable, removeFromWaiting, moveToReservation } =
    useOpsWaitingActions();

  const [assignGuestId, setAssignGuestId] = useState<string | null>(null);
  const availableTables = tables.filter((t) => t.status === "available");

  const guest = waiting.find((w) => w.id === assignGuestId);

  return (
    <>
      <OperationsHeader title="Waiting list" subtitle="Venue walk-ins — assign tables or move to arrivals" />
      <div className="flex-1 overflow-auto p-4 md:p-6">
        <div className="space-y-3">
          {waiting.length === 0 ? (
            <p className="py-12 text-center text-muted-foreground">Waiting list is empty.</p>
          ) : (
            waiting.map((entry) => (
              <Card key={entry.id} className="border-0 shadow-sm">
                <CardContent className="flex flex-col gap-4 p-4 sm:flex-row sm:items-center sm:justify-between">
                  <div>
                    <h3 className="text-lg font-semibold">{entry.guestName}</h3>
                    <div className="mt-1 flex flex-wrap gap-3 text-sm text-muted-foreground">
                      <span className="flex items-center gap-1">
                        <Users className="size-3.5" />
                        Party of {entry.partySize}
                      </span>
                      <span className="flex items-center gap-1">
                        <Clock className="size-3.5" />
                        Waiting {entry.waitingSince}
                      </span>
                      {entry.preferredTime && <span>Preferred: {entry.preferredTime}</span>}
                    </div>
                    {entry.notes && <p className="mt-2 text-sm text-muted-foreground">{entry.notes}</p>}
                  </div>
                  <div className="flex flex-wrap gap-2">
                    <Button className="h-11" onClick={() => setAssignGuestId(entry.id)}>
                      Assign table
                    </Button>
                    <Button className="h-11" variant="secondary" onClick={() => moveToReservation(entry.id)}>
                      <ArrowRight className="mr-2 size-4" />
                      To arrivals
                    </Button>
                    <Button className="h-11" variant="outline" onClick={() => removeFromWaiting(entry.id)}>
                      <Trash2 className="mr-2 size-4" />
                      Remove
                    </Button>
                  </div>
                </CardContent>
              </Card>
            ))
          )}
        </div>
      </div>

      <Dialog open={!!assignGuestId} onOpenChange={(o) => !o && setAssignGuestId(null)}>
        <DialogContent className="max-w-sm sm:max-w-md">
          <DialogHeader>
            <DialogTitle>Assign table</DialogTitle>
            <DialogDescription>
              {guest ? `Select an available table for ${guest.guestName} (party of ${guest.partySize})` : ""}
            </DialogDescription>
          </DialogHeader>
          <div className="grid grid-cols-2 gap-2 py-2">
            {availableTables.length === 0 ? (
              <p className="col-span-2 py-4 text-center text-sm text-muted-foreground">No tables available.</p>
            ) : (
              availableTables.map((t) => (
                <Button
                  key={t.id}
                  variant="outline"
                  className="h-14 text-base font-semibold"
                  onClick={() => {
                    if (assignGuestId) assignTable(assignGuestId, t.id);
                    setAssignGuestId(null);
                  }}
                >
                  Table {t.number}
                  <span className="ml-1 text-xs font-normal text-muted-foreground">({t.capacity})</span>
                </Button>
              ))
            )}
          </div>
          <DialogFooter>
            <Button variant="ghost" className="h-11" onClick={() => setAssignGuestId(null)}>
              Cancel
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </>
  );
}