'use client';

import { useState, useEffect } from 'react';
import { useQuery } from '@tanstack/react-query';
import { listCsvBookings } from '@/lib/api';
import { Link } from '@/i18n/navigation';
import { Plus, Clock, Eye, X, CreditCard, Pencil, MoreVertical, Lock, Sparkles } from 'lucide-react';
import ExportButton from '@/components/ExportButton';
import { useSearchParams } from 'next/navigation';
import { PageHeader } from '@/components/ui/PageHeader';
import { useTranslations, useLocale } from 'next-intl';
import { useReservationQuota } from '@/hooks/useReservationQuota';

type SearchType = 'pallets' | 'weight' | 'route' | 'status' | 'date' | 'quote';

// Statuses considered "not finalized": booking started but not yet paid.
const TO_FINALIZE_STATUSES = ['PENDING_PAYMENT', 'PENDING_BANK_TRANSFER'];

export default function BookingsListPage() {
  const t = useTranslations('dashboard.bookingsList');
  const locale = useLocale();
  const dateLocale = locale === 'fr' ? 'fr-FR' : 'en-US';
  const searchParams = useSearchParams();
  const [searchTerm, setSearchTerm] = useState('');
  const [searchType, setSearchType] = useState<SearchType>('route');
  const [statusFilter, setStatusFilter] = useState('');
  const [page, setPage] = useState(1);
  const [showTransferBanner, setShowTransferBanner] = useState(false);
  const [selectedBooking, setSelectedBooking] = useState<any | null>(null);
  const [openMenuId, setOpenMenuId] = useState<string | null>(null);
  const [menuPos, setMenuPos] = useState<{ top: number; right: number } | null>(null);
  const ITEMS_PER_PAGE = 20;

  // "Modifier" reopens the existing booking flow (search → carrier choice →
  // payment) pre-filled with the booking's data, so a change re-quotes the price.
  const buildEditUrl = (b: any) => {
    const enabledOptions = Object.keys(b.options || {})
      .filter(k => b.options[k])
      .join(',');
    const params = new URLSearchParams({
      editBookingId: b.id,
      origin: b.origin || b.originCity || '',
      destination: b.destination || b.destinationCity || '',
      volumeCBM: String(b.volumeCBM ?? ''),
      weightKG: String(b.weightKG ?? ''),
      palletCount: String(b.palletCount ?? ''),
      hasDangerousGoods: String(!!(b.options && b.options.dangerousGoods)),
    });
    if (enabledOptions) params.set('options', enabledOptions);
    return `/dashboard/search-advanced?${params.toString()}`;
  };

  // Kebab (⋮) actions menu — anchored with fixed positioning so it is never
  // clipped by the scrollable table container.
  const toggleMenu = (e: React.MouseEvent, bookingId: string) => {
    e.stopPropagation();
    if (openMenuId === bookingId) {
      setOpenMenuId(null);
      return;
    }
    const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
    setMenuPos({ top: rect.bottom + 6, right: window.innerWidth - rect.right });
    setOpenMenuId(bookingId);
  };

  useEffect(() => {
    if (!openMenuId) return;
    const close = () => setOpenMenuId(null);
    window.addEventListener('click', close);
    window.addEventListener('scroll', close, true);
    window.addEventListener('resize', close);
    return () => {
      window.removeEventListener('click', close);
      window.removeEventListener('scroll', close, true);
      window.removeEventListener('resize', close);
    };
  }, [openMenuId]);

  useEffect(() => {
    if (searchParams.get('transfer') === 'declared') {
      setShowTransferBanner(true);
    }
  }, [searchParams]);

  const {
    data: csvData,
    isLoading,
    error: csvError,
  } = useQuery({
    queryKey: ['csv-bookings'],
    queryFn: () =>
      listCsvBookings({
        page: 1,
        limit: 1000,
      }),
  });

  if (csvError) console.error('CSV bookings error:', csvError);

  const quota = useReservationQuota();

  // When the free-plan reservation limit is reached, the "New reservation"
  // entry point is replaced by an upgrade call-to-action.
  const newReservationAction = quota.blocked ? (
    <Link
      href="/dashboard/settings/subscription"
      className="inline-flex items-center gap-2 px-3 sm:px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-amber-500 hover:bg-amber-600"
    >
      <Sparkles className="h-4 w-4" />
      <span className="hidden sm:inline">{t('limit.upgrade')}</span>
      <span className="sm:hidden">{t('limit.upgradeShort')}</span>
    </Link>
  ) : (
    <Link
      href="/dashboard/search-advanced"
      className="inline-flex items-center px-3 sm:px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700"
    >
      <Plus className="h-4 w-4 sm:mr-2" />
      <span className="hidden sm:inline">{t('new')}</span>
    </Link>
  );

  const filterBookings = (bookings: any[]) => {
    let filtered = bookings;

    if (statusFilter) {
      if (statusFilter === 'to_finalize') {
        filtered = filtered.filter((booking: any) =>
          TO_FINALIZE_STATUSES.includes(booking.status)
        );
      } else {
        filtered = filtered.filter((booking: any) => booking.status === statusFilter);
      }
    }

    if (searchTerm.trim()) {
      const term = searchTerm.toLowerCase();

      filtered = filtered.filter((booking: any) => {
        switch (searchType) {
          case 'pallets':
            return booking.palletCount?.toString().includes(term);
          case 'weight':
            return booking.weightKG?.toString().includes(term);
          case 'route':
            const origin = booking.originCity?.toLowerCase() || '';
            const destination = booking.destinationCity?.toLowerCase() || '';
            return origin.includes(term) || destination.includes(term);
          case 'status':
            return booking.status?.toLowerCase().includes(term);
          case 'date':
            const date = new Date(
              booking.requestedPickupDate || booking.requestedAt
            ).toLocaleDateString(dateLocale);
            return date.includes(term);
          case 'quote':
            return (
              booking.id?.toLowerCase().includes(term) ||
              booking.quoteNumber?.toLowerCase().includes(term)
            );
          default:
            return true;
        }
      });
    }

    return filtered;
  };

  const filteredBookings = filterBookings(
    (csvData?.bookings || []).map(b => ({ ...b, type: 'csv' as const }))
  );

  const totalBookings = filteredBookings.length;
  const totalPages = Math.ceil(totalBookings / ITEMS_PER_PAGE);
  const startIndex = (page - 1) * ITEMS_PER_PAGE;
  const endIndex = startIndex + ITEMS_PER_PAGE;
  const paginatedBookings = filteredBookings.slice(startIndex, endIndex);

  const resetPage = () => setPage(1);

  const statusOptions = [
    { value: '', label: t('statusFilter.all') },
    { value: 'to_finalize', label: t('statusFilter.toFinalize') },
    { value: 'PENDING_PAYMENT', label: t('status.pendingPayment') },
    { value: 'PENDING_BANK_TRANSFER', label: t('status.pendingBankTransfer') },
    { value: 'PENDING', label: t('status.pending') },
    { value: 'ACCEPTED', label: t('status.accepted') },
    { value: 'REJECTED', label: t('status.rejected') },
    { value: 'CANCELLED', label: t('status.cancelled') },
  ];

  const searchTypeOptions: { value: SearchType; label: string }[] = [
    { value: 'route', label: t('searchType.route') },
    { value: 'pallets', label: t('searchType.pallets') },
    { value: 'weight', label: t('searchType.weight') },
    { value: 'status', label: t('searchType.status') },
    { value: 'date', label: t('searchType.date') },
    { value: 'quote', label: t('searchType.quote') },
  ];

  const getPlaceholder = () => {
    const keyMap: Record<SearchType, string> = {
      route: 'searchPlaceholder.route',
      pallets: 'searchPlaceholder.pallets',
      weight: 'searchPlaceholder.weight',
      status: 'searchPlaceholder.status',
      date: 'searchPlaceholder.date',
      quote: 'searchPlaceholder.quote',
    };
    return t(keyMap[searchType] as any);
  };

  const getStatusColor = (status: string) => {
    const colors: Record<string, string> = {
      PENDING_PAYMENT: 'bg-orange-100 text-orange-800',
      PENDING_BANK_TRANSFER: 'bg-blue-100 text-blue-800',
      PENDING: 'bg-yellow-100 text-yellow-800',
      ACCEPTED: 'bg-green-100 text-green-800',
      REJECTED: 'bg-red-100 text-red-800',
      CANCELLED: 'bg-gray-100 text-gray-800',
    };
    return colors[status] || 'bg-gray-100 text-gray-800';
  };

  const getStatusLabel = (status: string) => {
    const map: Record<string, string> = {
      PENDING_PAYMENT: t('status.pendingPayment'),
      PENDING_BANK_TRANSFER: t('status.pendingBankTransfer'),
      PENDING: t('status.pending'),
      ACCEPTED: t('status.accepted'),
      REJECTED: t('status.rejected'),
      CANCELLED: t('status.cancelled'),
    };
    return map[status] || status;
  };

  return (
    <div className="space-y-6">
      {showTransferBanner && (
        <div className="bg-amber-50 border border-amber-200 rounded-lg p-4 flex items-start justify-between">
          <div className="flex items-start space-x-3">
            <Clock className="h-5 w-5 text-amber-600 flex-shrink-0 mt-0.5" />
            <div>
              <p className="font-medium text-amber-800">{t('transferBanner.title')}</p>
              <p className="text-sm text-amber-700 mt-0.5">{t('transferBanner.message')}</p>
            </div>
          </div>
          <button
            onClick={() => setShowTransferBanner(false)}
            className="text-amber-500 hover:text-amber-700 ml-4 flex-shrink-0"
          >
            ✕
          </button>
        </div>
      )}
      <PageHeader
        title={t('title')}
        description={t('description')}
        actions={
          <>
            <ExportButton
              data={filteredBookings}
              filename={t('exportFilename')}
              columns={[
                { key: 'id', label: t('export.id') },
                { key: 'palletCount', label: t('export.pallets'), format: v => `${v || 0}` },
                { key: 'weightKG', label: t('export.weight'), format: v => `${v || 0}` },
                { key: 'volumeCBM', label: t('export.volume'), format: v => `${v || 0}` },
                { key: 'origin', label: t('export.origin') },
                { key: 'destination', label: t('export.destination') },
                { key: 'carrierName', label: t('export.carrier') },
                { key: 'status', label: t('export.status'), format: v => getStatusLabel(v) },
                {
                  key: 'createdAt',
                  label: t('export.createdAt'),
                  format: v => (v ? new Date(v).toLocaleDateString(dateLocale) : ''),
                },
              ]}
            />
            {newReservationAction}
          </>
        }
      />

      {quota.blocked && (
        <div className="bg-amber-50 border border-amber-200 rounded-lg p-4 flex items-start gap-3">
          <Lock className="h-5 w-5 text-amber-600 flex-shrink-0 mt-0.5" />
          <div className="flex-1">
            <p className="font-medium text-amber-800">{t('limit.title')}</p>
            <p className="text-sm text-amber-700 mt-0.5">
              {t('limit.message', { max: quota.max })}
            </p>
            <Link
              href="/dashboard/settings/subscription"
              className="mt-3 inline-flex items-center gap-2 px-4 py-2 bg-amber-500 text-white text-sm font-medium rounded-lg hover:bg-amber-600 transition-colors"
            >
              <Sparkles className="h-4 w-4" />
              {t('limit.upgrade')}
            </Link>
          </div>
        </div>
      )}

      <div className="bg-white rounded-lg shadow p-4">
        <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
          <div>
            <label htmlFor="searchType" className="sr-only">
              {t('searchType.label')}
            </label>
            <select
              id="searchType"
              value={searchType}
              onChange={e => {
                setSearchType(e.target.value as SearchType);
                resetPage();
              }}
              className="block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md"
            >
              {searchTypeOptions.map(option => (
                <option key={option.value} value={option.value}>
                  {option.label}
                </option>
              ))}
            </select>
          </div>
          <div className="md:col-span-2">
            <label htmlFor="search" className="sr-only">
              {t('search')}
            </label>
            <div className="relative">
              <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                <svg
                  className="h-5 w-5 text-gray-400"
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                >
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth={2}
                    d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
                  />
                </svg>
              </div>
              <input
                type="text"
                id="search"
                value={searchTerm}
                onChange={e => {
                  setSearchTerm(e.target.value);
                  resetPage();
                }}
                className="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md leading-5 bg-white placeholder-gray-500 focus:outline-none focus:placeholder-gray-400 focus:ring-1 focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
                placeholder={getPlaceholder()}
              />
            </div>
          </div>
          <div>
            <label htmlFor="status" className="sr-only">
              {t('statusFilter.label')}
            </label>
            <select
              id="status"
              value={statusFilter}
              onChange={e => {
                setStatusFilter(e.target.value);
                resetPage();
              }}
              className="block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md"
            >
              {statusOptions.map(option => (
                <option key={option.value} value={option.value}>
                  {option.label}
                </option>
              ))}
            </select>
          </div>
        </div>
      </div>

      <div className="bg-white rounded-lg shadow overflow-hidden">
        {isLoading ? (
          <div className="px-6 py-12 text-center text-gray-500">
            <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto mb-4"></div>
            {t('loading')}
          </div>
        ) : paginatedBookings && paginatedBookings.length > 0 ? (
          <>
            <div className="md:hidden divide-y divide-gray-200">
              {paginatedBookings.map((booking: any) => (
                <div key={`${booking.type}-${booking.id}`} className="p-4 space-y-3">
                  <div className="flex items-start justify-between">
                    <div>
                      <div className="text-sm font-semibold text-gray-900">
                        {booking.type === 'csv'
                          ? `${booking.origin} → ${booking.destination}`
                          : booking.route || 'N/A'}
                      </div>
                      <div className="text-xs text-gray-500 mt-0.5">
                        {booking.type === 'csv' ? booking.carrierName : booking.carrier || ''}
                      </div>
                    </div>
                    <span
                      className={`px-2 py-1 text-xs font-semibold rounded-full flex-shrink-0 ${getStatusColor(booking.status)}`}
                    >
                      {getStatusLabel(booking.status)}
                    </span>
                  </div>
                  <div className="grid grid-cols-3 gap-2 text-xs">
                    <div>
                      <div className="text-gray-400 uppercase tracking-wide">
                        {t('mobile.pallets')}
                      </div>
                      <div className="font-medium text-gray-900 mt-0.5">
                        {booking.type === 'csv'
                          ? t('units.palletsShort', { count: booking.palletCount })
                          : t('units.containersShort', { count: booking.containers?.length || 0 })}
                      </div>
                    </div>
                    <div>
                      <div className="text-gray-400 uppercase tracking-wide">
                        {t('mobile.weight')}
                      </div>
                      <div className="font-medium text-gray-900 mt-0.5">
                        {booking.type === 'csv'
                          ? t('units.kg', { value: booking.weightKG })
                          : booking.totalWeight
                            ? t('units.kg', { value: booking.totalWeight })
                            : 'N/A'}
                      </div>
                    </div>
                    <div>
                      <div className="text-gray-400 uppercase tracking-wide">
                        {t('mobile.date')}
                      </div>
                      <div className="font-medium text-gray-900 mt-0.5">
                        {booking.createdAt || booking.requestedAt
                          ? new Date(booking.createdAt || booking.requestedAt).toLocaleDateString(
                              dateLocale,
                              { day: '2-digit', month: '2-digit', year: '2-digit' }
                            )
                          : 'N/A'}
                      </div>
                    </div>
                  </div>
                  <div className="flex items-center justify-between">
                    <div className="text-xs text-gray-400">
                      {booking.type === 'csv'
                        ? t('mobile.ref', {
                            id: booking.bookingId || booking.id.slice(0, 8).toUpperCase(),
                          })
                        : t('mobile.booking', { number: booking.bookingNumber || '-' })}
                    </div>
                    <button
                      onClick={e => toggleMenu(e, booking.id)}
                      className="p-2 -mr-1 rounded-full text-gray-500 hover:bg-gray-100 transition-colors"
                      title={t('columns.actions')}
                      aria-label={t('columns.actions')}
                    >
                      <MoreVertical className="h-5 w-5" />
                    </button>
                  </div>
                </div>
              ))}
            </div>

            <div className="hidden md:block overflow-x-auto">
              <table className="min-w-full divide-y divide-gray-200">
                <thead className="bg-gray-50">
                  <tr>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                      {t('columns.reference')}
                    </th>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                      {t('columns.route')}
                    </th>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                      {t('columns.cargo')}
                    </th>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                      {t('columns.status')}
                    </th>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                      {t('columns.date')}
                    </th>
                    <th className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
                      {t('columns.actions')}
                    </th>
                  </tr>
                </thead>
                <tbody className="bg-white divide-y divide-gray-200">
                  {paginatedBookings.map((booking: any) => {
                    const reference =
                      booking.type === 'csv'
                        ? `#${booking.bookingId || booking.id.slice(0, 8).toUpperCase()}`
                        : booking.bookingNumber || `#${booking.id.slice(0, 8).toUpperCase()}`;
                    return (
                      <tr key={`${booking.type}-${booking.id}`} className="group hover:bg-gray-50">
                        <td className="px-6 py-4 whitespace-nowrap">
                          <div className="text-sm font-semibold text-brand-navy">
                            {booking.bookingNumber || reference}
                          </div>
                          {booking.bookingNumber && (
                            <div className="text-xs text-gray-400">{reference}</div>
                          )}
                        </td>
                        <td className="px-6 py-4">
                          <div className="text-sm text-gray-900">
                            {booking.type === 'csv'
                              ? `${booking.origin} → ${booking.destination}`
                              : booking.route || 'N/A'}
                          </div>
                          <div className="text-sm text-gray-500">
                            {booking.type === 'csv'
                              ? `${booking.carrierName}`
                              : booking.carrier || ''}
                          </div>
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap">
                          <div className="text-sm text-gray-900">
                            {booking.type === 'csv'
                              ? t('units.palletsCount', { count: booking.palletCount })
                              : t('units.containersCount', {
                                  count: booking.containers?.length || 0,
                                })}
                            {' · '}
                            {booking.type === 'csv' ? 'LCL' : booking.containerType || 'FCL'}
                          </div>
                          <div className="text-xs text-gray-500">
                            {booking.type === 'csv'
                              ? `${t('units.kg', { value: booking.weightKG })} · ${t('units.cbm', { value: booking.volumeCBM })}`
                              : booking.totalWeight
                                ? t('units.kg', { value: booking.totalWeight })
                                : ''}
                          </div>
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap">
                          <span
                            className={`px-2 py-1 inline-flex text-xs leading-5 font-semibold rounded-full ${getStatusColor(
                              booking.status
                            )}`}
                          >
                            {getStatusLabel(booking.status)}
                          </span>
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                          {booking.createdAt || booking.requestedAt
                            ? new Date(
                                booking.createdAt || booking.requestedAt
                              ).toLocaleDateString(dateLocale, {
                                day: '2-digit',
                                month: '2-digit',
                                year: 'numeric',
                              })
                            : 'N/A'}
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap text-right">
                          <button
                            onClick={e => toggleMenu(e, booking.id)}
                            className="p-2 rounded-full text-gray-500 hover:bg-gray-100 transition-colors"
                            title={t('columns.actions')}
                            aria-label={t('columns.actions')}
                          >
                            <MoreVertical className="h-5 w-5" />
                          </button>
                        </td>
                      </tr>
                    );
                  })}
                </tbody>
              </table>
            </div>

            {totalPages > 1 && (
              <div className="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6">
                <div className="flex-1 flex justify-between sm:hidden">
                  <button
                    onClick={() => setPage(page - 1)}
                    disabled={page === 1}
                    className="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 disabled:bg-gray-100 disabled:text-gray-400 disabled:cursor-not-allowed"
                  >
                    {t('pagination.previous')}
                  </button>
                  <button
                    onClick={() => setPage(page + 1)}
                    disabled={page >= totalPages}
                    className="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 disabled:bg-gray-100 disabled:text-gray-400 disabled:cursor-not-allowed"
                  >
                    {t('pagination.next')}
                  </button>
                </div>
                <div className="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
                  <div>
                    <p className="text-sm text-gray-700">
                      {t.rich('pagination.showing', {
                        start: startIndex + 1,
                        end: Math.min(endIndex, totalBookings),
                        total: totalBookings,
                        b: chunks => <span className="font-medium">{chunks}</span>,
                      })}
                    </p>
                  </div>
                  <div>
                    <nav
                      className="relative z-0 inline-flex rounded-md shadow-sm -space-x-px"
                      aria-label="Pagination"
                    >
                      <button
                        onClick={() => setPage(page - 1)}
                        disabled={page === 1}
                        className="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 disabled:bg-gray-100 disabled:text-gray-400 disabled:cursor-not-allowed"
                      >
                        <span className="sr-only">{t('pagination.previous')}</span>
                        <svg className="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
                          <path
                            fillRule="evenodd"
                            d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
                            clipRule="evenodd"
                          />
                        </svg>
                      </button>

                      {[...Array(totalPages)].map((_, idx) => {
                        const pageNum = idx + 1;
                        const showPage =
                          pageNum === 1 ||
                          pageNum === totalPages ||
                          (pageNum >= page - 1 && pageNum <= page + 1);

                        if (!showPage && pageNum === 2) {
                          return (
                            <span
                              key={pageNum}
                              className="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700"
                            >
                              ...
                            </span>
                          );
                        }
                        if (!showPage && pageNum === totalPages - 1) {
                          return (
                            <span
                              key={pageNum}
                              className="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700"
                            >
                              ...
                            </span>
                          );
                        }
                        if (!showPage) return null;

                        return (
                          <button
                            key={pageNum}
                            onClick={() => setPage(pageNum)}
                            className={`relative inline-flex items-center px-4 py-2 border text-sm font-medium ${
                              page === pageNum
                                ? 'z-10 bg-blue-50 border-blue-500 text-blue-600'
                                : 'bg-white border-gray-300 text-gray-500 hover:bg-gray-50'
                            }`}
                          >
                            {pageNum}
                          </button>
                        );
                      })}

                      <button
                        onClick={() => setPage(page + 1)}
                        disabled={page >= totalPages}
                        className="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 disabled:bg-gray-100 disabled:text-gray-400 disabled:cursor-not-allowed"
                      >
                        <span className="sr-only">{t('pagination.next')}</span>
                        <svg className="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
                          <path
                            fillRule="evenodd"
                            d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
                            clipRule="evenodd"
                          />
                        </svg>
                      </button>
                    </nav>
                  </div>
                </div>
              </div>
            )}
          </>
        ) : (
          <div className="px-6 py-12 text-center">
            <svg
              className="mx-auto h-12 w-12 text-gray-400"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={2}
                d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"
              />
            </svg>
            <h3 className="mt-2 text-sm font-medium text-gray-900">{t('empty.title')}</h3>
            <p className="mt-1 text-sm text-gray-500">
              {searchTerm || statusFilter ? t('empty.hasFilters') : t('empty.noBookings')}
            </p>
            <div className="mt-6">
              {quota.blocked ? (
                <Link
                  href="/dashboard/settings/subscription"
                  className="inline-flex items-center gap-2 px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-amber-500 hover:bg-amber-600"
                >
                  <Sparkles className="h-4 w-4" />
                  {t('limit.upgrade')}
                </Link>
              ) : (
                <Link
                  href="/dashboard/search-advanced"
                  className="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700"
                >
                  <Plus className="mr-2 h-4 w-4" />
                  {t('new')}
                </Link>
              )}
            </div>
          </div>
        )}
      </div>

      {/* Actions menu (⋮) — fixed-positioned to avoid clipping */}
      {openMenuId &&
        menuPos &&
        (() => {
          const b = paginatedBookings.find((x: any) => x.id === openMenuId);
          if (!b) return null;
          return (
            <div
              className="fixed z-50 w-44 bg-white rounded-lg shadow-lg border border-gray-200 py-1"
              style={{ top: menuPos.top, right: menuPos.right }}
              onClick={e => e.stopPropagation()}
            >
              {b.status === 'PENDING_PAYMENT' && (
                <>
                  <Link
                    href={buildEditUrl(b)}
                    className="flex items-center gap-2 px-4 py-2 text-sm text-gray-700 hover:bg-gray-50"
                  >
                    <Pencil className="h-4 w-4 text-gray-500" />
                    {t('actions.edit')}
                  </Link>
                  <Link
                    href={`/dashboard/booking/${b.id}/pay`}
                    className="flex items-center gap-2 px-4 py-2 text-sm text-gray-700 hover:bg-gray-50"
                  >
                    <CreditCard className="h-4 w-4 text-orange-500" />
                    {t('actions.pay')}
                  </Link>
                </>
              )}
              <button
                onClick={() => {
                  setOpenMenuId(null);
                  setSelectedBooking(b);
                }}
                className="flex items-center gap-2 w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-50"
              >
                <Eye className="h-4 w-4 text-blue-600" />
                {t('actions.view')}
              </button>
            </div>
          );
        })()}

      {/* Booking Detail Modal */}
      {selectedBooking && (
        <div className="fixed inset-0 z-50 overflow-y-auto">
          <div className="flex items-center justify-center min-h-screen px-4 py-8">
            <div
              className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"
              onClick={() => setSelectedBooking(null)}
            />
            <div className="relative bg-white rounded-xl shadow-xl w-full max-w-2xl">
              <div className="flex items-center justify-between px-6 py-4 border-b border-gray-200">
                <h2 className="text-lg font-semibold text-gray-900">
                  {t('detail.title')}
                  {selectedBooking.bookingId
                    ? ` #${selectedBooking.bookingId}`
                    : ` #${selectedBooking.id?.slice(0, 8).toUpperCase()}`}
                </h2>
                <button
                  onClick={() => setSelectedBooking(null)}
                  className="text-gray-400 hover:text-gray-600 transition-colors"
                >
                  <X className="h-5 w-5" />
                </button>
              </div>
              <div className="px-6 py-4 space-y-4">
                <div className="flex items-center gap-2">
                  <span className={`px-2.5 py-1 rounded-full text-xs font-semibold ${getStatusColor(selectedBooking.status)}`}>
                    {getStatusLabel(selectedBooking.status)}
                  </span>
                  {selectedBooking.carrierName && (
                    <span className="text-sm text-gray-500">{selectedBooking.carrierName}</span>
                  )}
                </div>
                <div className="grid grid-cols-2 gap-4 text-sm">
                  <div>
                    <p className="text-xs font-medium text-gray-400 uppercase tracking-wide">{t('detail.route')}</p>
                    <p className="mt-1 text-gray-900">
                      {selectedBooking.origin || selectedBooking.originCity || 'N/A'}
                      {' → '}
                      {selectedBooking.destination || selectedBooking.destinationCity || 'N/A'}
                    </p>
                  </div>
                  <div>
                    <p className="text-xs font-medium text-gray-400 uppercase tracking-wide">{t('detail.date')}</p>
                    <p className="mt-1 text-gray-900">
                      {selectedBooking.createdAt || selectedBooking.requestedAt
                        ? new Date(
                            selectedBooking.createdAt || selectedBooking.requestedAt
                          ).toLocaleDateString(dateLocale, {
                            day: '2-digit',
                            month: 'long',
                            year: 'numeric',
                          })
                        : 'N/A'}
                    </p>
                  </div>
                  <div>
                    <p className="text-xs font-medium text-gray-400 uppercase tracking-wide">{t('detail.cargo')}</p>
                    <p className="mt-1 text-gray-900">
                      {selectedBooking.palletCount
                        ? t('units.palletsCount', { count: selectedBooking.palletCount })
                        : '-'}
                    </p>
                  </div>
                  <div>
                    <p className="text-xs font-medium text-gray-400 uppercase tracking-wide">{t('detail.weight')}</p>
                    <p className="mt-1 text-gray-900">
                      {selectedBooking.weightKG ? t('units.kg', { value: selectedBooking.weightKG }) : 'N/A'}
                      {selectedBooking.volumeCBM ? ` / ${t('units.cbm', { value: selectedBooking.volumeCBM })}` : ''}
                    </p>
                  </div>
                  {selectedBooking.requestedPickupDate && (
                    <div>
                      <p className="text-xs font-medium text-gray-400 uppercase tracking-wide">{t('detail.pickupDate')}</p>
                      <p className="mt-1 text-gray-900">
                        {new Date(selectedBooking.requestedPickupDate).toLocaleDateString(dateLocale, {
                          day: '2-digit',
                          month: 'long',
                          year: 'numeric',
                        })}
                      </p>
                    </div>
                  )}
                  {(selectedBooking.priceEUR || selectedBooking.priceUSD) && (
                    <div>
                      <p className="text-xs font-medium text-gray-400 uppercase tracking-wide">{t('detail.price')}</p>
                      <p className="mt-1 font-semibold text-gray-900">
                        {selectedBooking.priceEUR
                          ? `${selectedBooking.priceEUR} €`
                          : `${selectedBooking.priceUSD} $`}
                      </p>
                    </div>
                  )}
                </div>
                {selectedBooking.status === 'PENDING_PAYMENT' && (
                  <div className="mt-4 pt-4 border-t border-gray-100">
                    <p className="text-sm text-orange-700 bg-orange-50 rounded-lg px-3 py-2">
                      {t('detail.pendingPaymentNotice')}
                    </p>
                    <div className="mt-3 flex items-center gap-2">
                      <Link
                        href={buildEditUrl(selectedBooking)}
                        onClick={() => setSelectedBooking(null)}
                        className="inline-flex items-center gap-2 px-4 py-2 bg-gray-100 text-gray-700 text-sm font-medium rounded-lg hover:bg-gray-200 transition-colors"
                      >
                        <Pencil className="h-4 w-4" />
                        {t('actions.edit')}
                      </Link>
                      <Link
                        href={`/dashboard/booking/${selectedBooking.id}/pay`}
                        onClick={() => setSelectedBooking(null)}
                        className="inline-flex items-center gap-2 px-4 py-2 bg-orange-500 text-white text-sm font-medium rounded-lg hover:bg-orange-600 transition-colors"
                      >
                        <CreditCard className="h-4 w-4" />
                        {t('detail.payNow')}
                      </Link>
                    </div>
                  </div>
                )}
              </div>
              <div className="px-6 py-4 border-t border-gray-200 flex justify-end">
                <button
                  onClick={() => setSelectedBooking(null)}
                  className="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors"
                >
                  {t('detail.close')}
                </button>
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}