"use client";

import Link from "next/link";
import { useParams } from "next/navigation";

import { ArrowLeft } from "lucide-react";

import { ReservationStatusBadge } from "@/app/_components/reservation-status-badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { NativeSelect, NativeSelectOption } from "@/components/ui/native-select";
import { DEFAULT_VENUE_ID } from "@/data/platform-mock";
import { getAuthUser } from "@/lib/auth";
import { usePlatformStore } from "@/stores/platform/platform-store";
import { useReservationById, useVenueTables } from "@/stores/platform/use-platform-selectors";

export default function ReservationDetailPage() {
  const params = useParams();
  const id = params.id as string;
  const user = getAuthUser();
  const venueId = user?.venueId ?? DEFAULT_VENUE_ID;
  const reservation = useReservationById(id);
  const tables = useVenueTables(venueId);
  const confirmReservation = usePlatformStore((s) => s.confirmReservation);
  const cancelReservation = usePlatformStore((s) => s.cancelReservation);
  const assignTable = usePlatformStore((s) => s.assignTable);

  if (!reservation) {
    return (
      <div className="p-6">
        <p>Reservation not found.</p>
        <Button asChild className="mt-4">
          <Link href="/manager/reservations">Back</Link>
        </Button>
      </div>
    );
  }

  const availableTables = tables.filter((t) => t.status === "available" || t.id === reservation.tableId);

  return (
    <div className="p-6 max-w-2xl space-y-6">
      <div className="flex items-center gap-3">
        <Button variant="ghost" size="icon" asChild>
          <Link href="/manager/reservations">
            <ArrowLeft className="size-4" />
          </Link>
        </Button>
        <div>
          <h1 className="text-2xl font-bold">{reservation.guestName}</h1>
          <p className="font-mono text-xs text-muted-foreground">{reservation.id}</p>
        </div>
        <ReservationStatusBadge status={reservation.status} />
      </div>

      <Card>
        <CardHeader>
          <CardTitle className="text-base">Guest details</CardTitle>
        </CardHeader>
        <CardContent className="space-y-2 text-sm">
          <p><span className="text-muted-foreground">Phone:</span> {reservation.phone}</p>
          <p><span className="text-muted-foreground">Email:</span> {reservation.email}</p>
          <p><span className="text-muted-foreground">Party:</span> {reservation.partySize}</p>
          <p><span className="text-muted-foreground">When:</span> {reservation.date} at {reservation.time}</p>
          <p><span className="text-muted-foreground">Table:</span> {reservation.tableNumber ?? "Not assigned"}</p>
          {reservation.notes && <p><span className="text-muted-foreground">Notes:</span> {reservation.notes}</p>}
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle className="text-base">Assign table</CardTitle>
        </CardHeader>
        <CardContent>
          <NativeSelect
            value={reservation.tableId ?? ""}
            onChange={(e) => e.target.value && assignTable(reservation.id, e.target.value)}
          >
            <NativeSelectOption value="">Select table</NativeSelectOption>
            {availableTables.map((t) => (
              <NativeSelectOption key={t.id} value={t.id}>
                Table {t.number}
              </NativeSelectOption>
            ))}
          </NativeSelect>
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle className="text-base">Reservation history (mock)</CardTitle>
        </CardHeader>
        <CardContent className="text-sm text-muted-foreground space-y-1">
          <p>Created {reservation.createdAt}</p>
          <p>Status: {reservation.status}</p>
        </CardContent>
      </Card>

      <div className="flex gap-2">
        {reservation.status === "pending" && (
          <Button onClick={() => confirmReservation(reservation.id)}>Confirm</Button>
        )}
        {!["cancelled", "completed"].includes(reservation.status) && (
          <Button variant="outline" onClick={() => cancelReservation(reservation.id)}>
            Cancel reservation
          </Button>
        )}
      </div>
    </div>
  );
}