// import { useState, useEffect } from 'react';
// import { DataTable, DataTableSortStatus } from 'mantine-datatable';
// import Tippy from '@tippyjs/react';
// import 'tippy.js/dist/tippy.css';
// import sortBy from 'lodash/sortBy';
// import { showMessage } from '../../general';
// import { 
//   FaEye, 
//   FaFileInvoiceDollar, 
//   FaSearch, 
//   FaMoneyBillWave, 
//   FaUser, 
//   FaCalendarAlt, 
//   FaBox,
//   FaFilter,
//   FaDownload,
//   FaTimes,
//   FaFilePdf,
//   FaFileExcel,
//   FaFileArchive
// } from 'react-icons/fa';
// import { Dialog, Transition } from '@headlessui/react';
// import { Fragment } from 'react';
// import { useDispatch } from 'react-redux';
// import { setPageTitle } from '../../store/themeConfigSlice';
// import { getReports } from '../../API';
// import JSZip from "jszip";
// import { saveAs } from "file-saver";

// const Reports = () => {
//   const PAGE_SIZES = [10, 20, 30, 50, 100];
//   const [page, setPage] = useState(1);
//   const [pageSize, setPageSize] = useState(PAGE_SIZES[4]);
//   const [initialRecords, setInitialRecords] = useState<any[]>([]);
//   const [recordsData, setRecordsData] = useState<any[]>([]);
//   const [totalRecords, setTotalRecords] = useState(0);
//   const [search, setSearch] = useState('');
//   const [sortStatus, setSortStatus] = useState<DataTableSortStatus>({ 
//     columnAccessor: 'created_at', 
//     direction: 'desc' 
//   });
//   const [loading, setLoading] = useState(false);
  
//   // Date filter states
//   const [dateFilter, setDateFilter] = useState<string>('current_month');
//   const [isFilterModalOpen, setIsFilterModalOpen] = useState(false);
//   const [customStartDate, setCustomStartDate] = useState<string>('');
//   const [customEndDate, setCustomEndDate] = useState<string>('');

//   const dispatch = useDispatch();

//   // Function to map UI filter values to API payload
//   const getFilterPayload = () => {
//     switch (dateFilter) {
//       case 'today':
//         return { filter: "today" };
//       case 'yesterday':
//         return { filter: "yesterday" };
//       case 'lastWeek':
//         return { filter: "current_week" };
//       case 'lastMonth':
//         return { filter: "current_month" };
//       case 'last6Months':
//         return { filter: "past_6_month" };
//       case 'custom':
//         if (customStartDate && customEndDate) {
//           return {
//             filter: "custom_range",
//             start_date: customStartDate,
//             end_date: customEndDate
//           };
//         }
//         return { filter: "current_month" };
//       default:
//         return { filter: "current_month" };
//     }
//   };

//   // Fetch reports from API
//   const fetchReports = async () => {
//     setLoading(true);
//     try {
//       const payload = getFilterPayload();
//       const response = await getReports(payload);
      
//       if (response && response.status) {
//         const reportsData = response.data || [];
//         setInitialRecords(reportsData);
//         setTotalRecords(reportsData.length);
//       } else {
//         console.error("Failed to fetch reports:", response?.message);
//         setInitialRecords([]);
//         setTotalRecords(0);
//       }
//     } catch (error) {
//       console.error("Error fetching reports:", error);
//       setInitialRecords([]);
//       setTotalRecords(0);
//     } finally {
//       setLoading(false);
//     }
//   };

//   useEffect(() => {
//     dispatch(setPageTitle('Reports Management'));
//     fetchReports();
//   }, []);

//   // Refetch data when filter changes
//   useEffect(() => {
//     if (dateFilter !== 'custom' || (dateFilter === 'custom' && customStartDate && customEndDate)) {
//       fetchReports();
//     }
//   }, [dateFilter, customStartDate, customEndDate]);

//   useEffect(() => {
//     setPage(1);
//   }, [pageSize, dateFilter]);

//   useEffect(() => {
//     // Apply sorting
//     let sorted = sortBy(initialRecords, sortStatus.columnAccessor);
//     sorted = sortStatus.direction === 'desc' ? sorted.reverse() : sorted;
    
//     // Apply pagination
//     const from = (page - 1) * pageSize;
//     const to = from + pageSize;
//     setRecordsData(sorted.slice(from, to));
//     setTotalRecords(sorted.length);
//   }, [page, pageSize, sortStatus, initialRecords]);

//   const handleDateFilterChange = (filter: string) => {
//     setDateFilter(filter);
//     if (filter !== 'custom') {
//       setIsFilterModalOpen(false);
//     } else {
//       setIsFilterModalOpen(true);
//     }
//   };

//   const applyCustomDateFilter = () => {
//     if (customStartDate && customEndDate) {
//       setIsFilterModalOpen(false);
//       fetchReports();
//     }
//   };

//   const formatDate = (dateString: string) => {
//     const date = new Date(dateString);
//     return date.toLocaleDateString('en-US', {
//       year: 'numeric',
//       month: 'short',
//       day: 'numeric'
//     });
//   };

//   const formatDateTime = (dateString: string) => {
//     const date = new Date(dateString);
//     return date.toLocaleString('en-US', {
//       year: 'numeric',
//       month: 'short',
//       day: 'numeric',
//       hour: '2-digit',
//       minute: '2-digit'
//     });
//   };

 

// const downloadAllFiles = async (
//   report: any,
//   format: "pdf" | "excel" | "all",  
// ) => {

//   console.log("download report", report)
//   if (!report.reports || report.reports.length === 0) {
//     showMessage("No files to download for this booking", "error");
//     return;
//   }

//   let matchedFiles: any[] = [];

//   // Collect all matching files
//   for (const reportGroup of report.reports) {
//     if (reportGroup.files && reportGroup.files.length > 0) {
//       for (const file of reportGroup.files) {
//         const fileExtension = file.file_name.split(".").pop()?.toLowerCase();

//         if (
//           format === "all" ||
//           (format === "pdf" && fileExtension === "pdf") ||
//           (format === "excel" && (fileExtension === "xlsx" || fileExtension === "xls"))
//         ) {
//           matchedFiles.push(file);
//         }
//       }
//     }
//   }

//   if (matchedFiles.length === 0) {
//     showMessage("No matching files found to download", "error");
//     return;
//   }

//   // ✅ Single file → download directly
//   if (matchedFiles.length === 1) {
//     const file = matchedFiles[0];
//     try {
//       const link = document.createElement("a");
//       link.href = file.file_path;
//       link.download = file.file_name;
//       link.click();
//       showMessage(`${file.file_name} downloaded successfully`, "success");
//     } catch (err) {
//       console.error("Error downloading file:", file.file_name, err);
//       showMessage(`Failed to download ${file.file_name}`, "error");
//     }
//     return;
//   }

//   // ✅ Multiple files → create ZIP
//   const zip = new JSZip();
//   for (const file of matchedFiles) {
//     try {
//       const response = await fetch(file.file_path);
//       const blob = await response.blob();
//       zip.file(file.file_name, blob);
//     } catch (err) {
//       console.error("Error fetching file:", file.file_name, err);
//       showMessage(`Failed to fetch ${file.file_name}`, "error");
//     }
//   }

//   const content = await zip.generateAsync({ type: "blob" });
//   saveAs(content, `booking_${report.booking_id}_reports.zip`);
//   showMessage("Reports downloaded successfully (ZIP)", "success");
// };

 
//   // Get total number of files across all reports
//   const getTotalFilesCount = (report: any) => {
//     if (!report.reports) return 0;
    
//     return report.reports.reduce((acc: number, reportGroup: any) => {
//       return acc + (reportGroup.files ? reportGroup.files.length : 0);
//     }, 0);
//   };

//   // Get number of PDF files
//   const getPdfFilesCount = (report: any) => {
//     if (!report.reports) return 0;
    
//     return report.reports.reduce((acc: number, reportGroup: any) => {
//       if (!reportGroup.files) return acc;
      
//       return acc + reportGroup.files.filter((file: any) => 
//         file.file_name.toLowerCase().endsWith('.pdf')
//       ).length;
//     }, 0);
//   };

//   // Get number of Excel files
//   const getExcelFilesCount = (report: any) => {
//     if (!report.reports) return 0;
    
//     return report.reports.reduce((acc: number, reportGroup: any) => {
//       if (!reportGroup.files) return acc;
      
//       return acc + reportGroup.files.filter((file: any) => 
//         file.file_name.toLowerCase().endsWith('.xlsx') || 
//         file.file_name.toLowerCase().endsWith('.xls')
//       ).length;
//     }, 0);
//   };

//   return (
//     <div className="relative">
//       <div className="panel">
//         <div className="flex md:items-center md:flex-row flex-col mb-5 gap-5">
//           <div>
//             <h5 className="font-semibold text-lg dark:text-white-light">Reports Management</h5>
//           </div>
//           <div className="ltr:ml-auto rtl:mr-auto flex items-center gap-4">
//             <div className="relative">
//               <div className="flex gap-2">
//                 <select
//                   className="form-select py-2 rounded-lg border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 focus:ring-2 focus:ring-primary-500 focus:border-primary-500 dark:focus:ring-primary-400 dark:focus:border-primary-400 transition-all duration-200"
//                   value={dateFilter}
//                   onChange={(e) => handleDateFilterChange(e.target.value)}
//                 >
//                   <option value="today">Today</option>
//                   <option value="yesterday">Yesterday</option>
                   
//                   <option value="current_month">Current Month</option>
//                   <option value="last6Months">Last 6 Months</option>
//                   <option value="custom">Custom Range</option>
//                 </select>
//               </div>
//             </div>
//           </div>
//         </div>

//                     {loading && (
//         <div className="fixed inset-0 flex justify-center items-center bg-black bg-opacity-50 z-[9999]">
//           <div className="w-16 h-16 border-t-4 border-primary-DEFAULT border-solid rounded-full animate-spin"></div>
//         </div>
//       )}
        
//           <div className="datatables">
//             <DataTable
//               highlightOnHover
//               className="whitespace-nowrap table-hover rounded-lg overflow-hidden"
//               records={recordsData}
//               columns={[
//                 {
//                   accessor: 'booking_id',
//                   title: 'Booking ID',
//                   sortable: true,
//                   render: ({ booking_id }) => (
//                     <div className="flex items-center">
//                       <span className="font-semibold text-primary-DEFAULT dark:text-primary-light">
//                         #{booking_id}
//                       </span>
//                     </div>
//                   )
//                 },
//                 {
//                   accessor: 'customer',
//                   title: 'Customer',
//                   sortable: true,
//                   render: ({ customer_details }) => (
//                     <div>
//                       <div className="font-medium text-gray-800 dark:text-gray-200">
//                         {customer_details?.firstName} {customer_details?.lastName}
//                       </div>
//                       <div className="text-xs text-gray-500 dark:text-gray-400">
//                         ID: {customer_details?._id || 'N/A'}
//                       </div>
//                     </div>
//                   )
//                 },
//                 {
//                   accessor: 'reports_count',
//                   title: 'Reports',
//                   sortable: true,
//                   render: (report) => (
//                     <div className="text-center">
//                       <div className="font-semibold">{getTotalFilesCount(report)} Files</div>
//                       {/* <div className="text-xs text-gray-500">
//                         {getPdfFilesCount(report)} PDF, {getExcelFilesCount(report)} Excel
//                       </div> */}
//                     </div>
//                   )
//                 },
//                 {
//                   accessor: 'created_at',
//                   title: 'Created At',
//                   sortable: true,
//                   render: ({ created_at }) => (
//                     <div className="flex items-center">
//                       <div className="w-8 h-8 rounded-full bg-info/10 dark:bg-info-dark-light flex items-center justify-center mr-2">
//                         <FaCalendarAlt className="h-3 w-3 text-info-DEFAULT dark:text-info-light" />
//                       </div>
//                       <div>
//                         <div className="font-medium text-gray-600 dark:text-gray-300">
//                           {formatDate(created_at)}
//                         </div>
//                         <div className="text-xs text-gray-400">
//                           {formatDateTime(created_at)}
//                         </div>
//                       </div>
//                     </div>
//                   )
//                 },
//                 // {
//                 //   accessor: 'epochtime',
//                 //   title: 'Epoch Time',
//                 //   sortable: true,
//                 //   render: ({ epochtime }) => (
//                 //     <div className="text-center">
//                 //       {epochtime}
//                 //     </div>
//                 //   )
//                 // }, 
//                 {
//                   accessor: 'actions',
//                   title: 'Actions',
//                   titleClassName: '!text-center',
//                   render: (report) => (
//                     <div className="flex items-center w-max mx-auto gap-2">
                   
//                       <Tippy content="Download All PDFs">
//                         <button
//                           className="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200"
//                           onClick={() => downloadAllFiles(report, 'pdf')}
//                         >
//                           <FaFilePdf className="w-4 h-4 text-red-500 hover:text-red-600" />
//                         </button>
//                       </Tippy>
                      
                     
//                     </div>
//                   ),
//                 },
//               ]}
//               totalRecords={totalRecords}
//               recordsPerPage={pageSize}
//               page={page}
//               onPageChange={setPage}
//               recordsPerPageOptions={PAGE_SIZES}
//               onRecordsPerPageChange={setPageSize}
//               sortStatus={sortStatus}
//               onSortStatusChange={setSortStatus}
//               minHeight={200}
//               paginationText={({ from, to, totalRecords }) => (
//                 <span className="dark:text-white-light">
//                   Showing {from} to {to} of {totalRecords} entries
//                 </span>
//               )}
//               // Enable DataTable's built-in search
//               onSearchChange={setSearch}
//               searchable
//               searchValue={search}
//               searchPlaceholder="Search bookings..."
//             />
//           </div>
        
//       </div>

//       {/* Custom Date Range Modal */}
//       <Transition appear show={isFilterModalOpen} as={Fragment}>
//         <Dialog as="div" open={isFilterModalOpen} onClose={() => setIsFilterModalOpen(false)} className="relative z-50">
//           <Transition.Child
//             as={Fragment}
//             enter="ease-out duration-300"
//             enterFrom="opacity-0"
//             enterTo="opacity-100"
//             leave="ease-in duration-200"
//             leaveFrom="opacity-100"
//             leaveTo="opacity-0"
//           >
//             <div className="fixed inset-0 bg-black bg-opacity-25" />
//           </Transition.Child>

//           <div className="fixed inset-0 overflow-y-auto">
//             <div className="flex min-h-full items-center justify-center p-4 text-center">
//               <Transition.Child
//                 as={Fragment}
//                 enter="ease-out duration-300"
//                 enterFrom="opacity-0 scale-95"
//                 enterTo="opacity-100 scale-100"
//                 leave="ease-in duration-200"
//                 leaveFrom="opacity-100 scale-100"
//                 leaveTo="opacity-0 scale-95"
//               >
//                 <Dialog.Panel className="w-full max-w-md transform overflow-hidden rounded-2xl bg-white dark:bg-gray-800 p-6 text-left align-middle shadow-xl transition-all">
//                   <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-gray-900 dark:text-white">
//                     Select Custom Date Range
//                   </Dialog.Title>
//                   <div className="mt-4 space-y-4">
//                     <div>
//                       <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
//                         Start Date
//                       </label>
//                       <input
//                         type="date"
//                         className="form-input w-full rounded-lg border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 focus:ring-2 focus:ring-primary-500 focus:border-primary-500 dark:focus:ring-primary-400 dark:focus:border-primary-400 transition-all duration-200"
//                         value={customStartDate}
//                         onChange={(e) => setCustomStartDate(e.target.value)}
//                       />
//                     </div>
//                     <div>
//                       <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
//                         End Date
//                       </label>
//                       <input
//                         type="date"
//                         className="form-input w-full rounded-lg border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 focus:ring-2 focus:ring-primary-500 focus:border-primary-500 dark:focus:ring-primary-400 dark:focus:border-primary-400 transition-all duration-200"
//                         value={customEndDate}
//                         onChange={(e) => setCustomEndDate(e.target.value)}
//                       />
//                     </div>
//                   </div>

//                   <div className="mt-6 flex justify-end space-x-3">
//                     <button
//                       type="button"
//                       className="btn btn-outline-primary"
//                       onClick={() => setIsFilterModalOpen(false)}
//                     >
//                       Cancel
//                     </button>
//                     <button
//                       type="button"
//                       className="btn btn-primary"
//                       onClick={applyCustomDateFilter}
//                       disabled={!customStartDate || !customEndDate}
//                     >
//                       Apply Filter
//                     </button>
//                   </div>
//                 </Dialog.Panel>
//               </Transition.Child>
//             </div>
//           </div>
//         </Dialog>
//       </Transition>
//     </div>
//   );
// };

// export default Reports;




import { useState, useEffect, useRef } from 'react';
import { DataTable, DataTableSortStatus } from 'mantine-datatable';
import Tippy from '@tippyjs/react';
import 'tippy.js/dist/tippy.css';
import sortBy from 'lodash/sortBy';
import { showMessage } from '../../general';
import { 
  FaEye, 
  FaFileInvoiceDollar, 
  FaSearch, 
  FaMoneyBillWave, 
  FaUser, 
  FaCalendarAlt, 
  FaBox,
  FaFilter,
  FaDownload,
  FaTimes,
  FaFilePdf,
  FaFileExcel,
  FaFileArchive
} from 'react-icons/fa';
import { Dialog, Transition } from '@headlessui/react';
import { Fragment } from 'react';
import { useDispatch } from 'react-redux';
import { setPageTitle } from '../../store/themeConfigSlice';
import { getReports } from '../../API';
import JSZip from "jszip";
import { saveAs } from "file-saver";
import Flatpickr from 'react-flatpickr';
import 'flatpickr/dist/flatpickr.css';
import { useLoader } from '../../store/LoaderProvider';

const Reports = () => {
  const PAGE_SIZES = [10, 20, 30, 50, 100];
  const [page, setPage] = useState(1);
  const [pageSize, setPageSize] = useState(PAGE_SIZES[4]);
  const [initialRecords, setInitialRecords] = useState<any[]>([]);
  const [recordsData, setRecordsData] = useState<any[]>([]);
  const [totalRecords, setTotalRecords] = useState(0);
  const [search, setSearch] = useState('');
  const [sortStatus, setSortStatus] = useState<DataTableSortStatus>({ 
    columnAccessor: 'created_at', 
    direction: 'desc' 
  });
  const [loading, setLoading] = useState(false);
  
  // Date filter states
  const [dateFilter, setDateFilter] = useState<string>('current_month');
  const [isFilterModalOpen, setIsFilterModalOpen] = useState(false);
  const [customStartDate, setCustomStartDate] = useState<string>('');
  const [customEndDate, setCustomEndDate] = useState<string>('');
  
  // Flatpickr states
  const [startDate, setStartDate] = useState<Date | null>(null);
  const [endDate, setEndDate] = useState<Date | null>(null);

  const startDateRef = useRef<any>(null);
  const endDateRef = useRef<any>(null);

  const dispatch = useDispatch();
     const { showLoader, hideLoader } = useLoader();

  // Function to map UI filter values to API payload
  const getFilterPayload = () => {
    switch (dateFilter) {
      case 'today':
        return { filter: "today" };
      case 'yesterday':
        return { filter: "yesterday" };
      case 'lastWeek':
        return { filter: "current_week" };
      case 'lastMonth':
        return { filter: "current_month" };
      case 'last6Months':
        return { filter: "past_6_month" };
      case 'custom':
        if (customStartDate && customEndDate) {
          return {
            filter: "custom_range",
            start_date: customStartDate, // YYYY-MM-DD format
            end_date: customEndDate      // YYYY-MM-DD format
          };
        }
        return { filter: "current_month" };
      default:
        return { filter: "current_month" };
    }
  };

  // Format date to YYYY-MM-DD for API
  const formatDateForAPI = (date: Date): string => {
    return date.toISOString().split('T')[0];
  };

  // Format date to MM-DD-YY for display
  const formatDateForDisplay = (date: Date): string => {
    const month = (date.getMonth() + 1).toString().padStart(2, '0');
    const day = date.getDate().toString().padStart(2, '0');
    const year = date.getFullYear().toString().slice(-2);
    return `${month}-${day}-${year}`;
  };

  // Handle start date change
  const handleStartDateChange = (dates: Date[]) => {
    if (dates.length > 0) {
      const date = dates[0];
      setStartDate(date);
      setCustomStartDate(formatDateForAPI(date));
      
      // If end date is before start date, reset end date
      if (endDate && date > endDate) {
        setEndDate(null);
        setCustomEndDate('');
      }
    } else {
      setStartDate(null);
      setCustomStartDate('');
    }
  };

  // Handle end date change
  const handleEndDateChange = (dates: Date[]) => {
    if (dates.length > 0) {
      const date = dates[0];
      setEndDate(date);
      setCustomEndDate(formatDateForAPI(date));
    } else {
      setEndDate(null);
      setCustomEndDate('');
    }
  };

  // Clear dates
  const clearDates = () => {
    setStartDate(null);
    setEndDate(null);
    setCustomStartDate('');
    setCustomEndDate('');
    
    if (startDateRef.current) {
      startDateRef.current.flatpickr.clear();
    }
    if (endDateRef.current) {
      endDateRef.current.flatpickr.clear();
    }
  };

  // Fetch reports from API
  const fetchReports = async () => {
    showLoader();
    try {
      const payload = getFilterPayload();
      const response = await getReports(payload);
      
      if (response && response.status) {
        const reportsData = response.data || [];
        setInitialRecords(reportsData);
        setTotalRecords(reportsData.length);
      } else {
        console.error("Failed to fetch reports:", response?.message);
        setInitialRecords([]);
        setTotalRecords(0);
      }
    } catch (error) {
      console.error("Error fetching reports:", error);
      setInitialRecords([]);
      setTotalRecords(0);
    } finally {
      hideLoader();
    }
  };

  useEffect(() => {
    dispatch(setPageTitle('Reports Management'));
    fetchReports();
  }, []);

  // Refetch data when filter changes
  useEffect(() => {
    if (dateFilter !== 'custom' || (dateFilter === 'custom' && customStartDate && customEndDate)) {
      fetchReports();
    }
  }, [dateFilter, customStartDate, customEndDate]);

  useEffect(() => {
    setPage(1);
  }, [pageSize, dateFilter]);

  useEffect(() => {
    // Apply sorting
    let sorted = sortBy(initialRecords, sortStatus.columnAccessor);
    sorted = sortStatus.direction === 'desc' ? sorted.reverse() : sorted;
    
    // Apply pagination
    const from = (page - 1) * pageSize;
    const to = from + pageSize;
    setRecordsData(sorted.slice(from, to));
    setTotalRecords(sorted.length);
  }, [page, pageSize, sortStatus, initialRecords]);

  const handleDateFilterChange = (filter: string) => {
    setDateFilter(filter);
    if (filter !== 'custom') {
      setIsFilterModalOpen(false);
    } else {
      setIsFilterModalOpen(true);
    }
  };

  const applyCustomDateFilter = () => {
    if (customStartDate && customEndDate) {
      setIsFilterModalOpen(false);
      fetchReports();
    } else {
      showMessage("Please select both start and end dates", "error");
    }
  };

  const formatDate = (timestamp: any) => {
    // Handle integer timestamp (unix timestamp in seconds)
    if (typeof timestamp === 'number') {
      const date = new Date(timestamp * 1000);
      return date.toLocaleDateString('en-US', {
        year: 'numeric',
        month: 'short',
        day: 'numeric'
      });
    }
    // Handle string date
    if (typeof timestamp === 'string') {
      const date = new Date(timestamp);
      return date.toLocaleDateString('en-US', {
        year: 'numeric',
        month: 'short',
        day: 'numeric'
      });
    }
    return 'N/A';
  };

  const formatDateTime = (timestamp: any) => {
    // Handle integer timestamp (unix timestamp in seconds)
    if (typeof timestamp === 'number') {
      const date = new Date(timestamp * 1000);
      return date.toLocaleString('en-US', {
        year: 'numeric',
        month: 'short',
        day: 'numeric',
        hour: '2-digit',
        minute: '2-digit'
      });
    }
    // Handle string date
    if (typeof timestamp === 'string') {
      const date = new Date(timestamp);
      return date.toLocaleString('en-US', {
        year: 'numeric',
        month: 'short',
        day: 'numeric',
        hour: '2-digit',
        minute: '2-digit'
      });
    }
    return 'N/A';
  };

  const downloadAllFiles = async (
    report: any,
    format: "pdf" | "excel" | "all",  
  ) => {
    console.log("download report", report)
    if (!report.reports || report.reports.length === 0) {
      showMessage("No files to download for this booking", "error");
      return;
    }

    let matchedFiles: any[] = [];

    // Collect all matching files
    for (const reportGroup of report.reports) {
      if (reportGroup.files && reportGroup.files.length > 0) {
        for (const file of reportGroup.files) {
          const fileExtension = file.file_name.split(".").pop()?.toLowerCase();

          if (
            format === "all" ||
            (format === "pdf" && fileExtension === "pdf") ||
            (format === "excel" && (fileExtension === "xlsx" || fileExtension === "xls"))
          ) {
            matchedFiles.push(file);
          }
        }
      }
    }

    if (matchedFiles.length === 0) {
      showMessage("No matching files found to download", "error");
      return;
    }

    // ✅ Single file → download directly
    if (matchedFiles.length === 1) {
      const file = matchedFiles[0];
      try {
        const link = document.createElement("a");
        link.href = file.file_path;
        link.download = file.file_name;
        link.click();
        showMessage(`${file.file_name} downloaded successfully`, "success");
      } catch (err) {
        console.error("Error downloading file:", file.file_name, err);
        showMessage(`Failed to download ${file.file_name}`, "error");
      }
      return;
    }

    // ✅ Multiple files → create ZIP
    const zip = new JSZip();
    for (const file of matchedFiles) {
      try {
        const response = await fetch(file.file_path);
        const blob = await response.blob();
        zip.file(file.file_name, blob);
      } catch (err) {
        console.error("Error fetching file:", file.file_name, err);
        showMessage(`Failed to fetch ${file.file_name}`, "error");
      }
    }

    const content = await zip.generateAsync({ type: "blob" });
    saveAs(content, `booking_${report.booking_id}_reports.zip`);
    showMessage("Reports downloaded successfully (ZIP)", "success");
  };

  // Get total number of files across all reports
  const getTotalFilesCount = (report: any) => {
    if (!report.reports) return 0;
    
    return report.reports.reduce((acc: number, reportGroup: any) => {
      return acc + (reportGroup.files ? reportGroup.files.length : 0);
    }, 0);
  };

  // Get number of PDF files
  const getPdfFilesCount = (report: any) => {
    if (!report.reports) return 0;
    
    return report.reports.reduce((acc: number, reportGroup: any) => {
      if (!reportGroup.files) return acc;
      
      return acc + reportGroup.files.filter((file: any) => 
        file.file_name.toLowerCase().endsWith('.pdf')
      ).length;
    }, 0);
  };

  // Get number of Excel files
  const getExcelFilesCount = (report: any) => {
    if (!report.reports) return 0;
    
    return report.reports.reduce((acc: number, reportGroup: any) => {
      if (!reportGroup.files) return acc;
      
      return acc + reportGroup.files.filter((file: any) => 
        file.file_name.toLowerCase().endsWith('.xlsx') || 
        file.file_name.toLowerCase().endsWith('.xls')
      ).length;
    }, 0);
  };

  return (
    <div className="relative">
      <div className="panel">
        <div className="flex md:items-center md:flex-row flex-col mb-5 gap-5">
          <div>
            <h5 className="font-semibold text-lg dark:text-white-light">Reports Management</h5>
          </div>
          <div className="ltr:ml-auto rtl:mr-auto flex items-center gap-4">
            <div className="relative">
              <div className="flex gap-2">
                <select
                  className="form-select py-2 rounded-lg border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 focus:ring-2 focus:ring-primary-500 focus:border-primary-500 dark:focus:ring-primary-400 dark:focus:border-primary-400 transition-all duration-200"
                  value={dateFilter}
                  onChange={(e) => handleDateFilterChange(e.target.value)}
                >
                  <option value="today">Today</option>
                  <option value="yesterday">Yesterday</option>
                  <option value="current_month">Current Month</option>
                  <option value="last6Months">Last 6 Months</option>
                  <option value="custom">Custom Range</option>
                </select>
              </div>
            </div>
          </div>
        </div>

        {loading && (
          <div className="fixed inset-0 flex justify-center items-center bg-black bg-opacity-50 z-[9999]">
            <div className="w-16 h-16 border-t-4 border-primary-DEFAULT border-solid rounded-full animate-spin"></div>
          </div>
        )}
        
        <div className="datatables">
          <DataTable
            highlightOnHover
            className="whitespace-nowrap table-hover rounded-lg overflow-hidden"
            records={recordsData}
            columns={[
              {
                accessor: 'booking_id',
                title: 'Booking ID',
                sortable: true,
                render: ({ booking_id }) => (
                  <div className="flex items-center">
                    <span className="font-semibold text-primary-DEFAULT dark:text-primary-light">
                      #{booking_id}
                    </span>
                  </div>
                )
              },
              {
                accessor: 'customer',
                title: 'Customer',
                sortable: true,
                render: ({ customer_details }) => (
                  <div>
                    <div className="font-medium text-gray-800 dark:text-gray-200">

                      {capitalize(customer_details?.firstName)} {capitalize(customer_details?.lastName)}
                    </div>
                    <div className="text-xs text-gray-500 dark:text-gray-400">
                      ID: {customer_details?._id || 'N/A'}
                    </div>
                  </div>
                )
              },
              {
                accessor: 'reports_count',
                title: 'Reports',
                sortable: true,
                render: (report) => (
                  <div className="text-center">
                    <div className="font-semibold">{getTotalFilesCount(report)} Files</div>
                  </div>
                )
              },
              {
                accessor: 'created_at',
                title: 'Created At',
                sortable: true,
                render: ({ created_at }) => (
                  <div className="flex items-center">
                    <div className="w-8 h-8 rounded-full bg-info/10 dark:bg-info-dark-light flex items-center justify-center mr-2">
                      <FaCalendarAlt className="h-3 w-3 text-info-DEFAULT dark:text-info-light" />
                    </div>
                    <div>
                      <div className="font-medium text-gray-600 dark:text-gray-300">
                        {formatDate(created_at)}
                      </div>
                      <div className="text-xs text-gray-400">
                        {formatDateTime(created_at)}
                      </div>
                    </div>
                  </div>
                )
              },
              {
                accessor: 'actions',
                title: 'Actions',
                titleClassName: '!text-center',
                render: (report) => (
                  <div className="flex items-center w-max mx-auto gap-2">
                    <Tippy content="Download All PDFs">
                      <button
                        className="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200"
                        onClick={() => downloadAllFiles(report, 'pdf')}
                      >
                        <FaFilePdf className="w-4 h-4 text-red-500 hover:text-red-600" />
                      </button>
                    </Tippy>
                  </div>
                ),
              },
            ]}
            totalRecords={totalRecords}
            recordsPerPage={pageSize}
            page={page}
            onPageChange={setPage}
            recordsPerPageOptions={PAGE_SIZES}
            onRecordsPerPageChange={setPageSize}
            sortStatus={sortStatus}
            onSortStatusChange={setSortStatus}
            minHeight={200}
            paginationText={({ from, to, totalRecords }) => (
              <span className="dark:text-white-light">
                Showing {from} to {to} of {totalRecords} entries
              </span>
            )}
            onSearchChange={setSearch}
            searchable
            searchValue={search}
            searchPlaceholder="Search bookings..."
          />
        </div>
      </div>

      {/* Custom Date Range Modal */}
      <Transition appear show={isFilterModalOpen} as={Fragment}>
        <Dialog as="div" open={isFilterModalOpen} onClose={() => setIsFilterModalOpen(false)} className="relative z-50">
          <Transition.Child
            as={Fragment}
            enter="ease-out duration-300"
            enterFrom="opacity-0"
            enterTo="opacity-100"
            leave="ease-in duration-200"
            leaveFrom="opacity-100"
            leaveTo="opacity-0"
          >
            <div className="fixed inset-0 bg-black bg-opacity-25" />
          </Transition.Child>

          <div className="fixed inset-0 overflow-y-auto">
            <div className="flex min-h-full items-center justify-center p-4 text-center">
              <Transition.Child
                as={Fragment}
                enter="ease-out duration-300"
                enterFrom="opacity-0 scale-95"
                enterTo="opacity-100 scale-100"
                leave="ease-in duration-200"
                leaveFrom="opacity-100 scale-100"
                leaveTo="opacity-0 scale-95"
              >
                <Dialog.Panel className="w-full max-w-md transform overflow-hidden rounded-2xl bg-white dark:bg-gray-800 p-6 text-left align-middle shadow-xl transition-all">
                  <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-gray-900 dark:text-white">
                    Select Custom Date Range
                  </Dialog.Title>
                  
                  <div className="mt-4 space-y-4">
                    <div>
                      <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        Start Date
                      </label>
                      <Flatpickr
                        ref={startDateRef}
                        value={startDate}
                        onChange={handleStartDateChange}
                        options={{
                          dateFormat: 'm-d-Y',
                          maxDate: endDate || undefined,
                          allowInput: true,
                          clickOpens: true,
                          placeholder: 'Select start date'
                        }}
                        className="form-input w-full rounded-lg border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 focus:ring-2 focus:ring-primary-500 focus:border-primary-500 dark:focus:ring-primary-400 dark:focus:border-primary-400 transition-all duration-200"
                      />
                      {startDate && (
                        <div className="text-xs text-gray-500 mt-1">
                          Selected: {formatDateForDisplay(startDate)}
                        </div>
                      )}
                    </div>
                    
                    <div>
                      <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        End Date
                      </label>
                      <Flatpickr
                        ref={endDateRef}
                        value={endDate}
                        onChange={handleEndDateChange}
                        options={{
                         dateFormat: 'm-d-Y',
                          minDate: startDate || undefined,
                          allowInput: true,
                          clickOpens: true,
                          placeholder: 'Select end date'
                        }}
                        className="form-input w-full rounded-lg border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 focus:ring-2 focus:ring-primary-500 focus:border-primary-500 dark:focus:ring-primary-400 dark:focus:border-primary-400 transition-all duration-200"
                      />
                      {endDate && (
                        <div className="text-xs text-gray-500 mt-1">
                          Selected: {formatDateForDisplay(endDate)}
                        </div>
                      )}
                    </div>

                    {(startDate || endDate) && (
                      <div className="flex justify-end">
                        <button
                          type="button"
                          className="text-sm text-primary-DEFAULT hover:text-primary-dark dark:hover:text-primary-light transition-colors duration-200"
                          onClick={clearDates}
                        >
                          Clear dates
                        </button>
                      </div>
                    )}
                  </div>

                  <div className="mt-6 flex justify-end space-x-3">
                    <button
                      type="button"
                      className="btn btn-outline-primary"
                      onClick={() => setIsFilterModalOpen(false)}
                    >
                      Cancel
                    </button>
                    <button
                      type="button"
                      className="btn btn-primary"
                      onClick={applyCustomDateFilter}
                      disabled={!customStartDate || !customEndDate}
                    >
                      Apply Filter
                    </button>
                  </div>
                </Dialog.Panel>
              </Transition.Child>
            </div>
          </div>
        </Dialog>
      </Transition>
    </div>
  );
};

export default Reports;

function capitalize(text: string): string {
  if (!text) return '';

  return text
    .split(' ') // Split by spaces
    .map(word => 
      word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()
    )
    .join(' '); // Join back into a single string
}