'use client';

import Link from 'next/link';
import { useParams } from 'next/navigation';
import { useQuery } from '@tanstack/react-query';

import { PageHeader } from '@/components/shared/page-header';
import { ReservationList, type ReservationRow } from '@/components/reservations/reservation-list';
import { TableSkeleton } from '@/components/shared/loading-skeleton';
import { apiFetch } from '@/lib/api/client';

interface ReservationsApiResponse {
  data: ReservationRow[];
  pagination: { total: number; page: number; pageSize: number };
}

export function BerthReservationsList() {
  const params = useParams<{ portSlug: string }>();
  const portSlug = params?.portSlug ?? '';

  const { data, isLoading } = useQuery<ReservationsApiResponse>({
    queryKey: ['berth-reservations', 'list'],
    queryFn: () => apiFetch('/api/v1/berth-reservations?page=1&limit=100&order=desc'),
  });

  return (
    <div className="flex flex-col gap-6">
      <PageHeader
        eyebrow="Marina"
        title="Berth Reservations"
        description="All reservations across all berths"
        actions={
          <Link
            href={`/${portSlug}/berths`}
            className="text-sm text-muted-foreground hover:text-foreground"
          >
            View berths
          </Link>
        }
      />

      {isLoading ? (
        <TableSkeleton />
      ) : (
        <ReservationList
          reservations={data?.data ?? []}
          showBerth
          portSlug={portSlug}
          emptyMessage="No reservations found."
        />
      )}
    </div>
  );
}