"use client";

import { Calendar, Mail, Phone, StickyNote, Users } from "lucide-react";

import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import type { PlatformReservation } from "@/data/platform-mock";

import { ArrivalStatusBadge } from "./ops-status-badge";

interface ReservationQuickViewProps {
  reservation: PlatformReservation | null;
  open: boolean;
  onOpenChange: (open: boolean) => void;
  onConfirmArrival?: () => void;
  onMarkOccupied?: () => void;
  readOnly?: boolean;
}

export function ReservationQuickView({
  reservation,
  open,
  onOpenChange,
  onConfirmArrival,
  onMarkOccupied,
  readOnly = false,
}: ReservationQuickViewProps) {
  if (!reservation) return null;

  const canConfirm = ["reserved", "confirmed", "pending"].includes(reservation.status);
  const canSeat = reservation.status === "arrived";

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-md gap-0 p-0 sm:max-w-lg">
        <DialogHeader className="border-b px-5 py-4">
          <div className="flex items-start justify-between gap-3">
            <div>
              <DialogTitle className="text-lg">{reservation.guestName}</DialogTitle>
              <DialogDescription className="mt-1">Reservation quick view — read only</DialogDescription>
            </div>
            <ArrivalStatusBadge status={reservation.status} />
          </div>
        </DialogHeader>

        <div className="space-y-4 px-5 py-4">
          <dl className="grid gap-3 text-sm">
            <div className="flex items-center gap-3">
              <Calendar className="size-4 shrink-0 text-muted-foreground" />
              <div>
                <dt className="text-muted-foreground text-xs">Time</dt>
                <dd className="font-medium">{reservation.time}</dd>
              </div>
            </div>
            <div className="flex items-center gap-3">
              <Users className="size-4 shrink-0 text-muted-foreground" />
              <div>
                <dt className="text-muted-foreground text-xs">Party size</dt>
                <dd className="font-medium">{reservation.partySize} guests</dd>
              </div>
            </div>
            <div className="flex items-center gap-3">
              <span className="flex size-4 shrink-0 items-center justify-center text-muted-foreground text-xs font-bold">
                T
              </span>
              <div>
                <dt className="text-muted-foreground text-xs">Table</dt>
                <dd className="font-medium">{reservation.tableNumber ?? "Not assigned"}</dd>
              </div>
            </div>
            <div className="flex items-center gap-3">
              <Phone className="size-4 shrink-0 text-muted-foreground" />
              <dd>{reservation.phone}</dd>
            </div>
            <div className="flex items-center gap-3">
              <Mail className="size-4 shrink-0 text-muted-foreground" />
              <dd>{reservation.email}</dd>
            </div>
          </dl>

          {(reservation.occasion || reservation.preferences || reservation.notes) && (
            <div className="rounded-lg border bg-muted/30 p-3 space-y-2">
              <div className="flex items-center gap-2 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
                <StickyNote className="size-3.5" />
                Notes & preferences
              </div>
              {reservation.occasion && <p className="text-sm"><span className="text-muted-foreground">Occasion: </span>{reservation.occasion}</p>}
              {reservation.preferences && <p className="text-sm"><span className="text-muted-foreground">Preferences: </span>{reservation.preferences}</p>}
              {reservation.notes && <p className="text-sm"><span className="text-muted-foreground">Notes: </span>{reservation.notes}</p>}
            </div>
          )}
        </div>

        <DialogFooter className="flex-col gap-2 border-t px-5 py-4 sm:flex-row sm:justify-between">
          <div className="flex w-full flex-col gap-2 sm:flex-row sm:flex-1">
            {!readOnly && canConfirm && onConfirmArrival && (
              <Button className="h-11 flex-1 text-base" onClick={onConfirmArrival}>
                Confirm arrival
              </Button>
            )}
            {!readOnly && canSeat && onMarkOccupied && (
              <Button className="h-11 flex-1 text-base" variant="secondary" onClick={onMarkOccupied}>
                Mark seated
              </Button>
            )}
          </div>
          <Button variant="outline" className="h-11 min-w-[120px] text-base" onClick={() => onOpenChange(false)}>
            Close
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}