"use client";

import Link from "next/link";

import { Eye, Pencil } from "lucide-react";

import { ReservationStatusBadge } from "@/app/_components/reservation-status-badge";
import { Button } from "@/components/ui/button";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { DEFAULT_VENUE_ID } from "@/data/platform-mock";
import { getAuthUser } from "@/lib/auth";
import { usePlatformStore } from "@/stores/platform/platform-store";
import { useVenueReservations } from "@/stores/platform/use-platform-selectors";

export default function ReservationsListPage() {
  const user = getAuthUser();
  const venueId = user?.venueId ?? DEFAULT_VENUE_ID;
  const reservations = useVenueReservations(venueId);
  const confirmReservation = usePlatformStore((s) => s.confirmReservation);
  const cancelReservation = usePlatformStore((s) => s.cancelReservation);

  return (
    <div className="p-6 space-y-6">
      <div className="flex flex-wrap items-center justify-between gap-3">
        <div>
          <h1 className="text-2xl font-bold">Reservations</h1>
          <p className="text-sm text-muted-foreground">View, confirm, edit, or cancel bookings</p>
        </div>
        <Button asChild>
          <Link href="/manager/reservations/new">Create reservation</Link>
        </Button>
      </div>

      <div className="rounded-lg border bg-card">
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead>ID</TableHead>
              <TableHead>Guest</TableHead>
              <TableHead>Party</TableHead>
              <TableHead>Time</TableHead>
              <TableHead>Status</TableHead>
              <TableHead>Table</TableHead>
              <TableHead className="text-right">Actions</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {reservations.map((r) => (
              <TableRow key={r.id}>
                <TableCell className="font-mono text-xs">{r.id}</TableCell>
                <TableCell className="font-medium">{r.guestName}</TableCell>
                <TableCell>{r.partySize}</TableCell>
                <TableCell>{r.time}</TableCell>
                <TableCell>
                  <ReservationStatusBadge status={r.status} />
                </TableCell>
                <TableCell>{r.tableNumber ?? "—"}</TableCell>
                <TableCell className="text-right space-x-1">
                  <Button size="sm" variant="ghost" asChild>
                    <Link href={`/manager/reservations/${r.id}`}>
                      <Eye className="size-3.5" />
                    </Link>
                  </Button>
                  {r.status === "pending" && (
                    <Button size="sm" variant="outline" onClick={() => confirmReservation(r.id)}>
                      Confirm
                    </Button>
                  )}
                  {!["cancelled", "completed"].includes(r.status) && (
                    <Button size="sm" variant="ghost" onClick={() => cancelReservation(r.id)}>
                      Cancel
                    </Button>
                  )}
                  <Button size="sm" variant="ghost" asChild>
                    <Link href={`/manager/reservations/${r.id}`}>
                      <Pencil className="size-3.5" />
                    </Link>
                  </Button>
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </div>
    </div>
  );
}