'use client';

import { useState, useEffect, useCallback, useRef } from 'react';
import { useTranslations, useLocale } from 'next-intl';
import { listCsvBookings, CsvBookingResponse } from '@/lib/api/bookings';
import {
  FileText,
  Image as ImageIcon,
  FileEdit,
  FileSpreadsheet,
  Paperclip,
  Trash2,
} from 'lucide-react';
import type { ReactNode } from 'react';
import ExportButton from '@/components/ExportButton';
import { PageHeader } from '@/components/ui/PageHeader';

interface Document {
  id: string;
  fileName: string;
  filePath: string;
  type: string;
  mimeType: string;
  size: number;
  uploadedAt?: Date;
  name?: string;
  url?: string;
}

interface DocumentWithBooking extends Document {
  bookingId: string;
  quoteNumber: string;
  route: string;
  status: string;
  carrierName: string;
  fileType?: string;
}

export default function UserDocumentsPage() {
  const t = useTranslations('dashboard.userDocuments');
  const locale = useLocale();
  const [bookings, setBookings] = useState<CsvBookingResponse[]>([]);
  const [documents, setDocuments] = useState<DocumentWithBooking[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [searchTerm, setSearchTerm] = useState('');
  const [filterStatus, setFilterStatus] = useState('all');
  const [filterQuoteNumber, setFilterQuoteNumber] = useState('');
  const [currentPage, setCurrentPage] = useState(1);
  const [itemsPerPage, setItemsPerPage] = useState(10);

  const [showAddModal, setShowAddModal] = useState(false);
  const [selectedBookingId, setSelectedBookingId] = useState<string | null>(null);
  const [uploadingFiles, setUploadingFiles] = useState(false);
  const [isDraggingAdd, setIsDraggingAdd] = useState(false);
  const [addFiles, setAddFiles] = useState<File[]>([]);
  const fileInputRef = useRef<HTMLInputElement>(null);

  const [showReplaceModal, setShowReplaceModal] = useState(false);
  const [documentToReplace, setDocumentToReplace] = useState<DocumentWithBooking | null>(null);
  const [replacingFile, setReplacingFile] = useState(false);
  const [isDraggingReplace, setIsDraggingReplace] = useState(false);
  const [replaceFile, setReplaceFile] = useState<File | null>(null);
  const replaceFileInputRef = useRef<HTMLInputElement>(null);

  const [showDeleteModal, setShowDeleteModal] = useState(false);
  const [documentToDelete, setDocumentToDelete] = useState<DocumentWithBooking | null>(null);
  const [deletingFile, setDeletingFile] = useState(false);

  const [openDropdownId, setOpenDropdownId] = useState<string | null>(null);
  const [dropdownPos, setDropdownPos] = useState<{ top: number; right: number } | null>(null);

  const getQuoteNumber = (booking: CsvBookingResponse): string => {
    return `#${booking.bookingId || booking.id.slice(0, 8).toUpperCase()}`;
  };

  const getFileType = (fileName: string): string => {
    const ext = fileName.split('.').pop()?.toLowerCase() || '';
    const typeMap: Record<string, string> = {
      pdf: 'PDF',
      doc: 'Word',
      docx: 'Word',
      xls: 'Excel',
      xlsx: 'Excel',
      jpg: 'Image',
      jpeg: 'Image',
      png: 'Image',
      gif: 'Image',
      txt: 'Text',
      csv: 'CSV',
    };
    return typeMap[ext] || ext.toUpperCase();
  };

  const fetchBookingsAndDocuments = useCallback(async () => {
    try {
      setLoading(true);
      const response = await listCsvBookings({ page: 1, limit: 1000 });
      const allBookings = response.bookings || [];
      setBookings(allBookings);

      const allDocuments: DocumentWithBooking[] = [];

      allBookings.forEach((booking: CsvBookingResponse) => {
        if (booking.documents && booking.documents.length > 0) {
          booking.documents.forEach((doc: any, index: number) => {
            const actualFileName = doc.fileName || doc.name || 'document';
            const actualFilePath = doc.filePath || doc.url || '';
            const actualMimeType = doc.mimeType || doc.type || '';

            let fileType = '';
            if (actualMimeType.includes('/')) {
              const parts = actualMimeType.split('/');
              fileType = getFileType(parts[1]);
            } else {
              fileType = getFileType(actualFileName);
            }

            allDocuments.push({
              id: doc.id || `${booking.id}-doc-${index}`,
              fileName: actualFileName,
              filePath: actualFilePath,
              type: doc.type || '',
              mimeType: actualMimeType,
              size: doc.size || 0,
              uploadedAt: doc.uploadedAt,
              bookingId: booking.id,
              quoteNumber: getQuoteNumber(booking),
              route: `${booking.origin || 'N/A'} → ${booking.destination || 'N/A'}`,
              status: booking.status,
              carrierName: booking.carrierName || 'N/A',
              fileType: fileType,
            });
          });
        }
      });

      setDocuments(allDocuments);
      setError(null);
    } catch (err: any) {
      setError(err.message || t('error'));
    } finally {
      setLoading(false);
    }
  }, [t]);

  useEffect(() => {
    fetchBookingsAndDocuments();
  }, [fetchBookingsAndDocuments]);

  const filteredDocuments = documents.filter(doc => {
    const matchesSearch =
      searchTerm === '' ||
      (doc.fileName && doc.fileName.toLowerCase().includes(searchTerm.toLowerCase())) ||
      (doc.type && doc.type.toLowerCase().includes(searchTerm.toLowerCase())) ||
      doc.route.toLowerCase().includes(searchTerm.toLowerCase()) ||
      doc.carrierName.toLowerCase().includes(searchTerm.toLowerCase());

    const matchesStatus = filterStatus === 'all' || doc.status === filterStatus;

    const matchesQuote =
      filterQuoteNumber === '' ||
      doc.quoteNumber.toLowerCase().includes(filterQuoteNumber.toLowerCase());

    return matchesSearch && matchesStatus && matchesQuote;
  });

  const totalPages = Math.ceil(filteredDocuments.length / itemsPerPage);
  const startIndex = (currentPage - 1) * itemsPerPage;
  const endIndex = startIndex + itemsPerPage;
  const paginatedDocuments = filteredDocuments.slice(startIndex, endIndex);

  useEffect(() => {
    setCurrentPage(1);
  }, [searchTerm, filterStatus, filterQuoteNumber]);

  const getDocumentIcon = (type: string): ReactNode => {
    const typeLower = type.toLowerCase();
    const cls = 'h-6 w-6';
    const iconMap: Record<string, ReactNode> = {
      'application/pdf': <FileText className={`${cls} text-red-500`} />,
      'image/jpeg': <ImageIcon className={`${cls} text-green-500`} />,
      'image/png': <ImageIcon className={`${cls} text-green-500`} />,
      'image/jpg': <ImageIcon className={`${cls} text-green-500`} />,
      pdf: <FileText className={`${cls} text-red-500`} />,
      jpeg: <ImageIcon className={`${cls} text-green-500`} />,
      jpg: <ImageIcon className={`${cls} text-green-500`} />,
      png: <ImageIcon className={`${cls} text-green-500`} />,
      gif: <ImageIcon className={`${cls} text-green-500`} />,
      image: <ImageIcon className={`${cls} text-green-500`} />,
      word: <FileEdit className={`${cls} text-blue-500`} />,
      doc: <FileEdit className={`${cls} text-blue-500`} />,
      docx: <FileEdit className={`${cls} text-blue-500`} />,
      excel: <FileSpreadsheet className={`${cls} text-green-600`} />,
      xls: <FileSpreadsheet className={`${cls} text-green-600`} />,
      xlsx: <FileSpreadsheet className={`${cls} text-green-600`} />,
      csv: <FileSpreadsheet className={`${cls} text-green-600`} />,
      text: <FileText className={`${cls} text-gray-500`} />,
      txt: <FileText className={`${cls} text-gray-500`} />,
    };
    return iconMap[typeLower] || <Paperclip className={`${cls} text-gray-400`} />;
  };

  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 labels: Record<string, string> = {
      PENDING_PAYMENT: t('statuses.PENDING_PAYMENT' as any),
      PENDING_BANK_TRANSFER: t('statuses.PENDING_BANK_TRANSFER' as any),
      PENDING: t('statuses.PENDING' as any),
      ACCEPTED: t('statuses.ACCEPTED' as any),
      REJECTED: t('statuses.REJECTED' as any),
      CANCELLED: t('statuses.CANCELLED' as any),
    };
    return labels[status] || status;
  };

  const handleDownload = async (url: string, fileName: string) => {
    try {
      const link = document.createElement('a');
      link.href = url;
      link.download = fileName;
      link.target = '_blank';
      link.setAttribute('download', fileName);
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);

      setTimeout(async () => {
        try {
          const response = await fetch(url, { mode: 'cors', credentials: 'include' });
          if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
          const blob = await response.blob();
          const blobUrl = window.URL.createObjectURL(blob);
          const link2 = document.createElement('a');
          link2.href = blobUrl;
          link2.download = fileName;
          document.body.appendChild(link2);
          link2.click();
          document.body.removeChild(link2);
          window.URL.revokeObjectURL(blobUrl);
        } catch (fetchError) {
          console.error('Fetch download failed:', fetchError);
        }
      }, 100);
    } catch (err) {
      console.error('Error downloading file:', err);
      alert(`${t('downloadError')}: ${err instanceof Error ? err.message : ''}`);
    }
  };

  const bookingsAvailableForDocuments = bookings.filter(
    b =>
      b.status === 'PENDING' ||
      b.status === 'ACCEPTED' ||
      b.status === 'PENDING_PAYMENT' ||
      b.status === 'PENDING_BANK_TRANSFER'
  );

  const handleAddDocumentClick = () => {
    setShowAddModal(true);
  };

  const handleCloseModal = () => {
    setShowAddModal(false);
    setSelectedBookingId(null);
    setAddFiles([]);
    if (fileInputRef.current) fileInputRef.current.value = '';
  };

  const handleFileUpload = async () => {
    if (!selectedBookingId || addFiles.length === 0) {
      alert(t('addDocument.noBookingError'));
      return;
    }

    setUploadingFiles(true);
    try {
      const formData = new FormData();
      addFiles.forEach(file => formData.append('documents', file));

      const response = await fetch(
        `${process.env.NEXT_PUBLIC_API_URL}/api/v1/csv-bookings/${selectedBookingId}/documents`,
        { method: 'POST', credentials: 'include', body: formData }
      );

      if (!response.ok) {
        const errorData = await response.json().catch(() => ({}));
        throw new Error(errorData.message || t('addDocument.errorMessage'));
      }

      alert(t('addDocument.successMessage'));
      handleCloseModal();
      fetchBookingsAndDocuments();
    } catch (err) {
      console.error('Error uploading documents:', err);
      alert(`${t('addDocument.errorMessage')}: ${err instanceof Error ? err.message : ''}`);
    } finally {
      setUploadingFiles(false);
    }
  };

  const toggleDropdown = (docId: string, e: React.MouseEvent) => {
    if (openDropdownId === docId) {
      setOpenDropdownId(null);
      return;
    }
    const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
    // Anchor the menu with fixed positioning so it is never clipped by the
    // horizontally scrollable table container.
    setDropdownPos({ top: rect.bottom + 6, right: window.innerWidth - rect.right });
    setOpenDropdownId(docId);
  };

  useEffect(() => {
    const handleClickOutside = () => setOpenDropdownId(null);
    if (openDropdownId) {
      document.addEventListener('click', handleClickOutside);
      window.addEventListener('scroll', handleClickOutside, true);
      window.addEventListener('resize', handleClickOutside);
      return () => {
        document.removeEventListener('click', handleClickOutside);
        window.removeEventListener('scroll', handleClickOutside, true);
        window.removeEventListener('resize', handleClickOutside);
      };
    }
  }, [openDropdownId]);

  const handleReplaceClick = (doc: DocumentWithBooking) => {
    setOpenDropdownId(null);
    setDocumentToReplace(doc);
    setShowReplaceModal(true);
  };

  const handleCloseReplaceModal = () => {
    setShowReplaceModal(false);
    setDocumentToReplace(null);
    setReplaceFile(null);
    if (replaceFileInputRef.current) replaceFileInputRef.current.value = '';
  };

  const handleReplaceDocument = async () => {
    if (!documentToReplace || !replaceFile) {
      alert(t('replaceDocument.noFileError'));
      return;
    }

    setReplacingFile(true);
    try {
      const formData = new FormData();
      formData.append('document', replaceFile);

      const response = await fetch(
        `${process.env.NEXT_PUBLIC_API_URL}/api/v1/csv-bookings/${documentToReplace.bookingId}/documents/${documentToReplace.id}`,
        { method: 'PATCH', credentials: 'include', body: formData }
      );

      if (!response.ok) {
        const errorData = await response.json().catch(() => ({}));
        throw new Error(errorData.message || t('replaceDocument.errorMessage'));
      }

      alert(t('replaceDocument.successMessage'));
      handleCloseReplaceModal();
      fetchBookingsAndDocuments();
    } catch (err) {
      console.error('Error replacing document:', err);
      alert(`${t('replaceDocument.errorMessage')}: ${err instanceof Error ? err.message : ''}`);
    } finally {
      setReplacingFile(false);
    }
  };

  const handleDeleteClick = (doc: DocumentWithBooking) => {
    setOpenDropdownId(null);
    setDocumentToDelete(doc);
    setShowDeleteModal(true);
  };

  const handleCloseDeleteModal = () => {
    setShowDeleteModal(false);
    setDocumentToDelete(null);
  };

  const handleDeleteDocument = async () => {
    if (!documentToDelete) return;

    setDeletingFile(true);
    try {
      const response = await fetch(
        `${process.env.NEXT_PUBLIC_API_URL}/api/v1/csv-bookings/${documentToDelete.bookingId}/documents/${documentToDelete.id}`,
        { method: 'DELETE', credentials: 'include' }
      );

      if (!response.ok) {
        const errorData = await response.json().catch(() => ({}));
        throw new Error(errorData.message || t('deleteDocument.errorMessage'));
      }

      alert(t('deleteDocument.successMessage'));
      handleCloseDeleteModal();
      fetchBookingsAndDocuments();
    } catch (err) {
      console.error('Error deleting document:', err);
      alert(`${t('deleteDocument.errorMessage')}: ${err instanceof Error ? err.message : ''}`);
    } finally {
      setDeletingFile(false);
    }
  };

  if (loading) {
    return (
      <div className="flex items-center justify-center h-96">
        <div className="text-center">
          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto"></div>
          <p className="mt-4 text-gray-600">{t('loading')}</p>
        </div>
      </div>
    );
  }

  return (
    <div className="space-y-6">
      <PageHeader
        title={t('title')}
        description={t('description')}
        actions={
          <>
            <ExportButton
              data={filteredDocuments}
              filename="documents"
              columns={[
                { key: 'fileName', label: t('export.fileName') },
                { key: 'fileType', label: t('export.type') },
                { key: 'quoteNumber', label: t('export.quoteNumber') },
                { key: 'route', label: t('export.route') },
                { key: 'carrierName', label: t('export.carrier') },
                { key: 'status', label: t('export.status'), format: v => getStatusLabel(v) },
                {
                  key: 'uploadedAt',
                  label: t('export.uploadedAt'),
                  format: v => (v ? new Date(v).toLocaleDateString(locale) : ''),
                },
              ]}
            />
            <button
              onClick={handleAddDocumentClick}
              disabled={bookingsAvailableForDocuments.length === 0}
              className="inline-flex items-center px-3 sm:px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded-lg hover:bg-blue-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
            >
              <svg
                className="w-4 h-4 sm:mr-2"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth={2}
                  d="M12 4v16m8-8H4"
                />
              </svg>
              <span className="hidden sm:inline">{t('addDocument.buttonLabel')}</span>
            </button>
          </>
        }
      />

      {/* Stats */}
      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
        <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-4">
          <div className="text-sm text-gray-500">{t('stats.total')}</div>
          <div className="text-2xl font-bold text-gray-900">{documents.length}</div>
        </div>
        <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-4">
          <div className="text-sm text-gray-500">{t('stats.withDocuments')}</div>
          <div className="text-2xl font-bold text-blue-600">
            {bookings.filter(b => b.documents && b.documents.length > 0).length}
          </div>
        </div>
        <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-4">
          <div className="text-sm text-gray-500">{t('stats.filtered')}</div>
          <div className="text-2xl font-bold text-green-600">{filteredDocuments.length}</div>
        </div>
      </div>

      {/* Filters */}
      <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-4">
        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-2">
              {t('filters.search')}
            </label>
            <input
              type="text"
              placeholder={t('filters.searchPlaceholder')}
              value={searchTerm}
              onChange={e => setSearchTerm(e.target.value)}
              className="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500 focus:outline-none"
            />
          </div>
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-2">
              {t('filters.quoteNumber')}
            </label>
            <input
              type="text"
              placeholder="Ex: #F2CAD5E1"
              value={filterQuoteNumber}
              onChange={e => setFilterQuoteNumber(e.target.value)}
              className="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500 focus:outline-none"
            />
          </div>
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-2">
              {t('filters.status')}
            </label>
            <select
              value={filterStatus}
              onChange={e => setFilterStatus(e.target.value)}
              className="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500 focus:outline-none"
            >
              <option value="all">{t('filters.allStatuses')}</option>
              <option value="PENDING">{t('statuses.PENDING')}</option>
              <option value="ACCEPTED">{t('statuses.ACCEPTED')}</option>
              <option value="REJECTED">{t('statuses.REJECTED')}</option>
            </select>
          </div>
        </div>
      </div>

      {/* Error Message */}
      {error && (
        <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg">
          {error}
        </div>
      )}

      {/* Documents Table */}
      <div className="bg-white rounded-lg shadow 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('table.documentName')}
              </th>
              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                {t('table.type')}
              </th>
              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                {t('table.quoteNumber')}
              </th>
              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                {t('table.route')}
              </th>
              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                {t('table.carrier')}
              </th>
              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                {t('table.status')}
              </th>
              <th className="px-6 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">
                {t('table.actions')}
              </th>
            </tr>
          </thead>
          <tbody className="bg-white divide-y divide-gray-200">
            {paginatedDocuments.length === 0 ? (
              <tr>
                <td colSpan={7} className="px-6 py-12 text-center text-gray-500">
                  {documents.length === 0 ? t('empty.noDocuments') : t('empty.noMatch')}
                </td>
              </tr>
            ) : (
              paginatedDocuments.map((doc, index) => (
                <tr key={`${doc.bookingId}-${doc.id}-${index}`} className="hover:bg-gray-50">
                  <td className="px-6 py-4">
                    <div className="text-sm font-medium text-gray-900">{doc.fileName}</div>
                  </td>
                  <td className="px-6 py-4 whitespace-nowrap">
                    <div className="flex items-center">
                      <span className="mr-2">{getDocumentIcon(doc.fileType || doc.type)}</span>
                      <div className="text-xs text-gray-500">{doc.fileType || doc.type}</div>
                    </div>
                  </td>
                  <td className="px-6 py-4 whitespace-nowrap">
                    <div className="text-sm font-medium text-gray-900">{doc.quoteNumber}</div>
                  </td>
                  <td className="px-6 py-4 whitespace-nowrap">
                    <div className="text-sm text-gray-900">{doc.route}</div>
                  </td>
                  <td className="px-6 py-4 whitespace-nowrap">
                    <div className="text-sm text-gray-900">{doc.carrierName}</div>
                  </td>
                  <td className="px-6 py-4 whitespace-nowrap">
                    <span
                      className={`px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${getStatusColor(doc.status)}`}
                    >
                      {getStatusLabel(doc.status)}
                    </span>
                  </td>
                  <td className="px-6 py-4 whitespace-nowrap text-center">
                    <div className="relative inline-block text-left">
                      <button
                        onClick={e => {
                          e.stopPropagation();
                          toggleDropdown(`${doc.bookingId}-${doc.id}`, e);
                        }}
                        className="inline-flex items-center justify-center w-8 h-8 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-full transition-colors"
                        title={t('table.actions')}
                      >
                        <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                          <circle cx="12" cy="5" r="2" />
                          <circle cx="12" cy="12" r="2" />
                          <circle cx="12" cy="19" r="2" />
                        </svg>
                      </button>

                      {openDropdownId === `${doc.bookingId}-${doc.id}` && dropdownPos && (
                        <div
                          className="fixed w-48 bg-white rounded-lg shadow-lg border border-gray-200 z-50"
                          style={{ top: dropdownPos.top, right: dropdownPos.right }}
                          onClick={e => e.stopPropagation()}
                        >
                          <div className="py-1">
                            <button
                              onClick={() => {
                                setOpenDropdownId(null);
                                handleDownload(doc.filePath || doc.url || '', doc.fileName);
                              }}
                              className="flex items-center w-full px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
                            >
                              <svg
                                className="w-4 h-4 mr-3 text-green-600"
                                fill="none"
                                stroke="currentColor"
                                viewBox="0 0 24 24"
                              >
                                <path
                                  strokeLinecap="round"
                                  strokeLinejoin="round"
                                  strokeWidth={2}
                                  d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
                                />
                              </svg>
                              {t('actions.download')}
                            </button>
                            <button
                              onClick={() => handleReplaceClick(doc)}
                              className="flex items-center w-full px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
                            >
                              <svg
                                className="w-4 h-4 mr-3 text-blue-600"
                                fill="none"
                                stroke="currentColor"
                                viewBox="0 0 24 24"
                              >
                                <path
                                  strokeLinecap="round"
                                  strokeLinejoin="round"
                                  strokeWidth={2}
                                  d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
                                />
                              </svg>
                              {t('actions.replace')}
                            </button>
                            <button
                              onClick={() => handleDeleteClick(doc)}
                              className="flex items-center w-full px-4 py-2 text-sm text-red-600 hover:bg-red-50"
                            >
                              <Trash2 className="w-4 h-4 mr-3" />
                              {t('actions.delete')}
                            </button>
                          </div>
                        </div>
                      )}
                    </div>
                  </td>
                </tr>
              ))
            )}
          </tbody>
        </table>

        {/* Pagination Controls */}
        {filteredDocuments.length > 0 && (
          <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={() => setCurrentPage(Math.max(1, currentPage - 1))}
                disabled={currentPage === 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:opacity-50 disabled:cursor-not-allowed"
              >
                {t('pagination.previous')}
              </button>
              <button
                onClick={() => setCurrentPage(Math.min(totalPages, currentPage + 1))}
                disabled={currentPage === 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:opacity-50 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('pagination.showing', {
                    from: startIndex + 1,
                    to: Math.min(endIndex, filteredDocuments.length),
                    total: filteredDocuments.length,
                  })}
                </p>
              </div>
              <div className="flex items-center gap-4">
                <div className="flex items-center gap-2">
                  <label className="text-sm text-gray-700">{t('pagination.perPage')}</label>
                  <select
                    value={itemsPerPage}
                    onChange={e => {
                      setItemsPerPage(Number(e.target.value));
                      setCurrentPage(1);
                    }}
                    className="border border-gray-300 rounded-md px-2 py-1 text-sm"
                  >
                    <option value={5}>5</option>
                    <option value={10}>10</option>
                    <option value={25}>25</option>
                    <option value={50}>50</option>
                    <option value={100}>100</option>
                  </select>
                </div>
                <nav
                  className="relative z-0 inline-flex rounded-md shadow-sm -space-x-px"
                  aria-label="Pagination"
                >
                  <button
                    onClick={() => setCurrentPage(Math.max(1, currentPage - 1))}
                    disabled={currentPage === 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:opacity-50 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.from({ length: Math.min(5, totalPages) }, (_, i) => {
                    let pageNum;
                    if (totalPages <= 5) {
                      pageNum = i + 1;
                    } else if (currentPage <= 3) {
                      pageNum = i + 1;
                    } else if (currentPage >= totalPages - 2) {
                      pageNum = totalPages - 4 + i;
                    } else {
                      pageNum = currentPage - 2 + i;
                    }

                    return (
                      <button
                        key={pageNum}
                        onClick={() => setCurrentPage(pageNum)}
                        className={`relative inline-flex items-center px-4 py-2 border text-sm font-medium ${
                          currentPage === 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={() => setCurrentPage(Math.min(totalPages, currentPage + 1))}
                    disabled={currentPage === 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:opacity-50 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>

      {/* Add Document Modal */}
      {showAddModal && (
        <div className="fixed inset-0 z-50 overflow-y-auto">
          <div className="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
            <div
              className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"
              onClick={handleCloseModal}
            />
            <div className="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
              <div className="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                <div className="sm:flex sm:items-start">
                  <div className="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10">
                    <svg
                      className="h-6 w-6 text-blue-600"
                      fill="none"
                      stroke="currentColor"
                      viewBox="0 0 24 24"
                    >
                      <path
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        strokeWidth={2}
                        d="M12 4v16m8-8H4"
                      />
                    </svg>
                  </div>
                  <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left flex-1">
                    <h3 className="text-lg leading-6 font-medium text-gray-900">
                      {t('addDocument.modalTitle')}
                    </h3>
                    <div className="mt-4 space-y-4">
                      <div>
                        <label className="block text-sm font-medium text-gray-700 mb-2">
                          {t('addDocument.selectBooking')}
                        </label>
                        <select
                          value={selectedBookingId || ''}
                          onChange={e => setSelectedBookingId(e.target.value)}
                          className="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500 focus:outline-none"
                        >
                          <option value="">{t('addDocument.selectBookingPlaceholder')}</option>
                          {bookingsAvailableForDocuments.map(booking => (
                            <option key={booking.id} value={booking.id}>
                              {getQuoteNumber(booking)} - {booking.origin} → {booking.destination} ({getStatusLabel(booking.status)})
                            </option>
                          ))}
                        </select>
                      </div>
                      <div>
                        <label className="block text-sm font-medium text-gray-700 mb-2">
                          {t('addDocument.filesToAdd')}
                        </label>
                        <div
                          className={`relative border-2 border-dashed rounded-lg p-6 text-center cursor-pointer transition-colors ${
                            isDraggingAdd
                              ? 'border-blue-500 bg-blue-50'
                              : 'border-gray-300 hover:border-blue-400 hover:bg-gray-50'
                          }`}
                          onDragOver={e => {
                            e.preventDefault();
                            setIsDraggingAdd(true);
                          }}
                          onDragLeave={() => setIsDraggingAdd(false)}
                          onDrop={e => {
                            e.preventDefault();
                            setIsDraggingAdd(false);
                            const dropped = Array.from(e.dataTransfer.files);
                            if (dropped.length > 0) setAddFiles(dropped);
                          }}
                          onClick={() => fileInputRef.current?.click()}
                        >
                          <svg
                            className="mx-auto h-10 w-10 text-gray-400 mb-2"
                            fill="none"
                            stroke="currentColor"
                            viewBox="0 0 24 24"
                          >
                            <path
                              strokeLinecap="round"
                              strokeLinejoin="round"
                              strokeWidth={1.5}
                              d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"
                            />
                          </svg>
                          {addFiles.length > 0 ? (
                            <p className="text-sm font-medium text-blue-700">
                              {addFiles.length === 1
                                ? addFiles[0].name
                                : `${addFiles.length} fichiers sélectionnés`}
                            </p>
                          ) : (
                            <p className="text-sm text-gray-600">
                              {isDraggingAdd
                                ? t('addDocument.dropHere')
                                : t('addDocument.dragOrClick')}
                            </p>
                          )}
                          <p className="text-xs text-gray-400 mt-1">{t('addDocument.acceptedFormats')}</p>
                          <input
                            ref={fileInputRef}
                            type="file"
                            multiple
                            accept=".pdf,.doc,.docx,.xls,.xlsx,.jpg,.jpeg,.png,.gif"
                            className="hidden"
                            onChange={e => {
                              const selected = Array.from(e.target.files || []);
                              if (selected.length > 0) setAddFiles(selected);
                            }}
                          />
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div className="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
                <button
                  type="button"
                  onClick={handleFileUpload}
                  disabled={uploadingFiles || !selectedBookingId || addFiles.length === 0}
                  className="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm disabled:opacity-50 disabled:cursor-not-allowed"
                >
                  {uploadingFiles ? (
                    <>
                      <svg
                        className="animate-spin -ml-1 mr-2 h-4 w-4 text-white"
                        fill="none"
                        viewBox="0 0 24 24"
                      >
                        <circle
                          className="opacity-25"
                          cx="12"
                          cy="12"
                          r="10"
                          stroke="currentColor"
                          strokeWidth="4"
                        />
                        <path
                          className="opacity-75"
                          fill="currentColor"
                          d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
                        />
                      </svg>
                      {t('addDocument.uploading')}
                    </>
                  ) : (
                    t('addDocument.add')
                  )}
                </button>
                <button
                  type="button"
                  onClick={handleCloseModal}
                  className="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
                >
                  {t('addDocument.cancel')}
                </button>
              </div>
            </div>
          </div>
        </div>
      )}

      {/* Replace Document Modal */}
      {showReplaceModal && documentToReplace && (
        <div className="fixed inset-0 z-50 overflow-y-auto">
          <div className="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
            <div
              className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"
              onClick={handleCloseReplaceModal}
            />
            <div className="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
              <div className="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                <div className="sm:flex sm:items-start">
                  <div className="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10">
                    <svg
                      className="h-6 w-6 text-blue-600"
                      fill="none"
                      stroke="currentColor"
                      viewBox="0 0 24 24"
                    >
                      <path
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        strokeWidth={2}
                        d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
                      />
                    </svg>
                  </div>
                  <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left flex-1">
                    <h3 className="text-lg leading-6 font-medium text-gray-900">
                      {t('replaceDocument.modalTitle')}
                    </h3>
                    <div className="mt-4 space-y-4">
                      <div className="bg-gray-50 rounded-lg p-3">
                        <p className="text-sm text-gray-500">
                          {t('replaceDocument.currentDocument')}
                        </p>
                        <p className="text-sm font-medium text-gray-900 mt-1">
                          {documentToReplace.fileName}
                        </p>
                        <p className="text-xs text-gray-500 mt-1">
                          {t('replaceDocument.booking')}: {documentToReplace.quoteNumber} -{' '}
                          {documentToReplace.route}
                        </p>
                      </div>
                      <div>
                        <label className="block text-sm font-medium text-gray-700 mb-2">
                          {t('replaceDocument.newFile')}
                        </label>
                        <div
                          className={`relative border-2 border-dashed rounded-lg p-6 text-center cursor-pointer transition-colors ${
                            isDraggingReplace
                              ? 'border-blue-500 bg-blue-50'
                              : 'border-gray-300 hover:border-blue-400 hover:bg-gray-50'
                          }`}
                          onDragOver={e => {
                            e.preventDefault();
                            setIsDraggingReplace(true);
                          }}
                          onDragLeave={() => setIsDraggingReplace(false)}
                          onDrop={e => {
                            e.preventDefault();
                            setIsDraggingReplace(false);
                            const dropped = e.dataTransfer.files[0];
                            if (dropped) setReplaceFile(dropped);
                          }}
                          onClick={() => replaceFileInputRef.current?.click()}
                        >
                          <svg
                            className="mx-auto h-10 w-10 text-gray-400 mb-2"
                            fill="none"
                            stroke="currentColor"
                            viewBox="0 0 24 24"
                          >
                            <path
                              strokeLinecap="round"
                              strokeLinejoin="round"
                              strokeWidth={1.5}
                              d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"
                            />
                          </svg>
                          {replaceFile ? (
                            <p className="text-sm font-medium text-blue-700">{replaceFile.name}</p>
                          ) : (
                            <p className="text-sm text-gray-600">
                              {isDraggingReplace
                                ? t('replaceDocument.dropHere')
                                : t('replaceDocument.dragOrClick')}
                            </p>
                          )}
                          <p className="text-xs text-gray-400 mt-1">{t('replaceDocument.acceptedFormats')}</p>
                          <input
                            ref={replaceFileInputRef}
                            type="file"
                            accept=".pdf,.doc,.docx,.xls,.xlsx,.jpg,.jpeg,.png,.gif"
                            className="hidden"
                            onChange={e => {
                              const file = e.target.files?.[0];
                              if (file) setReplaceFile(file);
                            }}
                          />
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div className="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
                <button
                  type="button"
                  onClick={handleReplaceDocument}
                  disabled={replacingFile}
                  className="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm disabled:opacity-50 disabled:cursor-not-allowed"
                >
                  {replacingFile ? (
                    <>
                      <svg
                        className="animate-spin -ml-1 mr-2 h-4 w-4 text-white"
                        fill="none"
                        viewBox="0 0 24 24"
                      >
                        <circle
                          className="opacity-25"
                          cx="12"
                          cy="12"
                          r="10"
                          stroke="currentColor"
                          strokeWidth="4"
                        />
                        <path
                          className="opacity-75"
                          fill="currentColor"
                          d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
                        />
                      </svg>
                      {t('replaceDocument.replacing')}
                    </>
                  ) : (
                    t('replaceDocument.replace')
                  )}
                </button>
                <button
                  type="button"
                  onClick={handleCloseReplaceModal}
                  className="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
                >
                  {t('replaceDocument.cancel')}
                </button>
              </div>
            </div>
          </div>
        </div>
      )}

      {/* Delete Document Modal */}
      {showDeleteModal && documentToDelete && (
        <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={handleCloseDeleteModal}
            />
            <div className="relative bg-white rounded-xl shadow-xl w-full max-w-md p-6">
              <div className="flex items-start gap-4">
                <div className="flex-shrink-0 w-10 h-10 bg-red-100 rounded-full flex items-center justify-center">
                  <Trash2 className="w-5 h-5 text-red-600" />
                </div>
                <div className="flex-1">
                  <h3 className="text-lg font-semibold text-gray-900">
                    {t('deleteDocument.title')}
                  </h3>
                  <p className="mt-2 text-sm text-gray-600">
                    {t('deleteDocument.message', { fileName: documentToDelete.fileName })}
                  </p>
                </div>
              </div>
              <div className="mt-6 flex justify-end gap-3">
                <button
                  type="button"
                  onClick={handleCloseDeleteModal}
                  className="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50"
                >
                  {t('deleteDocument.cancel')}
                </button>
                <button
                  type="button"
                  onClick={handleDeleteDocument}
                  disabled={deletingFile}
                  className="px-6 py-2 text-sm font-medium text-white bg-red-600 rounded-lg hover:bg-red-700 disabled:opacity-50 disabled:cursor-not-allowed"
                >
                  {deletingFile ? t('deleteDocument.deleting') : t('deleteDocument.confirm')}
                </button>
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}
