"use client";

import { useState } from "react";

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

import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import type { PlatformReservation } from "@/data/platform-mock";
import { useOpsVenueId } from "@/stores/operations/operations-store";
import { useOpsArrivalActions, useVenueOpsArrivals } from "@/stores/platform/use-platform-selectors";

import { OperationsHeader } from "../_components/operations-header";
import { ArrivalStatusBadge } from "../_components/ops-status-badge";
import { ReservationQuickView } from "../_components/reservation-quick-view";

export default function ArrivalsPage() {
  const venueId = useOpsVenueId();
  const arrivals = useVenueOpsArrivals(venueId);
  const { confirmArrival, markNoShow, markArrivalOccupied: markOccupied } = useOpsArrivalActions();

  const [selected, setSelected] = useState<PlatformReservation | null>(null);
  const [viewOpen, setViewOpen] = useState(false);

  const active = arrivals.filter(
    (a) => !["completed", "no_show", "cancelled"].includes(a.status),
  );

  const openView = (r: PlatformReservation) => {
    setSelected(r);
    setViewOpen(true);
  };

  return (
    <>
      <OperationsHeader title="Arrivals" subtitle="Manage guest check-in and seating flow" />
      <div className="flex-1 overflow-auto p-4 md:p-6">
        <div className="mb-4 flex flex-wrap gap-2 text-xs text-muted-foreground">
          <span className="rounded-md border px-2 py-1">Reserved → Arrived → Occupied → Completed</span>
        </div>
        <div className="space-y-3">
          {active.length === 0 ? (
            <p className="py-12 text-center text-muted-foreground">No active arrivals in queue.</p>
          ) : (
            active.map((arrival) => (
              <Card key={arrival.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 className="min-w-0 flex-1">
                    <div className="flex flex-wrap items-center gap-2">
                      <h3 className="text-lg font-semibold">{arrival.guestName}</h3>
                      <ArrivalStatusBadge status={arrival.status} />
                    </div>
                    <p className="mt-1 text-sm text-muted-foreground">
                      {arrival.time} · Party of {arrival.partySize}
                      {arrival.tableNumber ? ` · Table ${arrival.tableNumber}` : " · No table"}
                    </p>
                  </div>
                  <div className="flex flex-wrap gap-2">
                    {["reserved", "confirmed", "pending"].includes(arrival.status) && (
                      <Button className="h-11 px-4" onClick={() => confirmArrival(arrival.id)}>
                        <UserCheck className="mr-2 size-4" />
                        Confirm arrival
                      </Button>
                    )}
                    {arrival.status === "arrived" && (
                      <Button className="h-11 px-4" variant="secondary" onClick={() => markOccupied(arrival.id)}>
                        Mark seated
                      </Button>
                    )}
                    {["reserved", "confirmed", "pending", "arrived"].includes(arrival.status) && (
                      <Button className="h-11 px-4" variant="outline" onClick={() => markNoShow(arrival.id)}>
                        <UserX className="mr-2 size-4" />
                        No-show
                      </Button>
                    )}
                    <Button className="h-11 px-4" variant="ghost" onClick={() => openView(arrival)}>
                      <Eye className="mr-2 size-4" />
                      View
                    </Button>
                  </div>
                </CardContent>
              </Card>
            ))
          )}
        </div>
      </div>

      <ReservationQuickView
        reservation={selected}
        open={viewOpen}
        onOpenChange={setViewOpen}
        onConfirmArrival={
          selected && ["reserved", "confirmed", "pending"].includes(selected.status)
            ? () => {
                confirmArrival(selected.id);
                setViewOpen(false);
              }
            : undefined
        }
        onMarkOccupied={
          selected?.status === "arrived"
            ? () => {
                markOccupied(selected.id);
                setViewOpen(false);
              }
            : undefined
        }
      />
    </>
  );
}