// import React, { useEffect, useState } from 'react';
// import { Fragment } from 'react';
// import { useNavigate, useParams } from 'react-router-dom';
// import {
//   FaUserMd,
//   FaHeartbeat,
//   FaNotesMedical,
//   FaDownload,
//   FaCalendarCheck,
//   FaFileDownload,
//   FaMoneyBillWave,
//   FaFileInvoiceDollar,
//   FaTimes,
//   FaUser
// } from 'react-icons/fa';
// import { format } from 'date-fns';
// import { CustomerHistoryDetails, generateOrder, viewAPIKEY } from '../../API';
// import { useSelector } from 'react-redux';
// import { IRootState } from '../../store';
// import { showMessage } from '../../general';
// import { Dialog, Transition } from '@headlessui/react';
// import JSZip from 'jszip';
// import { saveAs } from 'file-saver';

// interface CustomerDetails {
//   _id: number;
//   firstName: string;
//   lastName: string;
//   // ... other fields
//   booking_details?: {
//     _id: number;
//     booking_id: number;
//     date: string;
//     time: string;
//     rs: number;
//     status: string;
//     payment_status: string;
//     payment_method: string;
//     doctor_id: number;
//     process_status: string;
//     report?: {
//       order_id: number;
//       order_status: boolean;
//       order_report_name: string;
//       created_at: string;
//       files?: {
//         file_name: string;
//         file_path: string;
//       }[];
//     }[];
//   }[];
// }

// interface ApiResponse {
//   status: boolean;
//   data: CustomerDetails;
// }

// interface ApiKey {
//   _id: number;
//   name: string;
//   apikey: string;
//   epoch_time: number;
//   delete_status: string;
//   updated_at: string;
//   created_at: string;
// }

// const KEY_OPTIONS = [
//   { id: 'brain_key', name: 'Brain Key' },
//   { id: 'ext_right', name: 'Ext Right' },
//   { id: 'heart_key', name: 'Heart Key' },
//   { id: 'liver_key', name: 'Liver Key' },
//   { id: 'lung_key', name: 'Lung Key' },
// ];

// const CustomerHistory = () => {
//   const { customerId } = useParams();
//   const navigate = useNavigate();
//   const isDark = useSelector((state: IRootState) => state.themeConfig.theme === 'dark' || state.themeConfig.isDarkMode);

//   const [customerData, setCustomerData] = useState<ApiResponse | null>(null);
//   const [loading, setLoading] = useState(true);
//   const [error, setError] = useState<string | null>(null);
//   const [activeTab, setActiveTab] = useState('profile');
//   const [isGenerating, setIsGenerating] = useState(false);
//   const [showOrderModal, setShowOrderModal] = useState(false);
//   const [selectedKeys, setSelectedKeys] = useState<string[]>([]);
//   const [generatedOrderIds, setGeneratedOrderIds] = useState<number[]>([]);
//   const [generatedOrderKeys, setGeneratedOrderKeys] = useState<string[]>([]);
//   const [apiKeys, setApiKeys] = useState<ApiKey[]>([]);

//   useEffect(() => {
//     const fetchCustomerData = async () => {
//       try {
//         const loggedIn = localStorage.getItem('isLoggedIn') === 'true';
//         if (!loggedIn) {
//           navigate('/login');
//           return;
//         }

//         if (!customerId) {
//           setError('No customer ID provided');
//           setLoading(false);
//           return;
//         }

//         const data = await CustomerHistoryDetails(customerId);
//         if (data?.status && data.data) {
//           setCustomerData(data);
//           if (data.data.order_id) {
//             setGeneratedOrderIds(
//               Array.isArray(data.data.order_id) ? data.data.order_id : [data.data.order_id]
//             );
//           }
//         } else {
//           setError('Invalid customer data received');
//         }
//       } catch (err) {
//         setError('Failed to fetch customer data');
//         console.error('Error fetching customer data:', err);
//       } finally {
//         setLoading(false);
//       }
//     };

//     fetchCustomerData();
//   }, [navigate, customerId]);


//   useEffect(() => {
//     if (showOrderModal) {
//       const fetchKeys = async () => {
//         try {
//           const res = await viewAPIKEY();
//           if (res.status === "success" && Array.isArray(res.data)) {
//             setApiKeys(res.data);
//           } else {
//             console.error("Invalid API Key response", res);
//           }
//         } catch (error) {
//           console.error("Error fetching API Keys", error);
//         }
//       };
//       fetchKeys();
//     }
//   }, [showOrderModal]);

//   const handleGenerateOrderClick = () => {
//     setSelectedKeys([]);
//     setShowOrderModal(true);
//   };

 

//   const handleGenerateOrder = async () => {
//     if (!customerId || selectedKeys.length === 0) {
//       showMessage('Please select at least one key', 'error');
//       return;
//     }

//     setIsGenerating(true);

//     try {
//       const custId = parseInt(customerId);
//       const data = await generateOrder(custId, selectedKeys);

//       if (data.status === true) {
//         showMessage(data.message, 'success');
//         setGeneratedOrderKeys(prev => [...prev, ...selectedKeys])
//         const updatedData = await CustomerHistoryDetails(customerId);
//         if (updatedData?.status && updatedData.data) {
//           setCustomerData(updatedData);
//           if (updatedData.data.order_id) {
//             const newOrderIds = Array.isArray(updatedData.data.order_id)
//               ? updatedData.data.order_id
//               : [updatedData.data.order_id];
//             setGeneratedOrderIds(newOrderIds);
//           }
//         }
//         setShowOrderModal(false);
//       } else {
//         showMessage(data.message, 'error');
//       }
//     } catch (error) {
//       showMessage('An error occurred while generating the order', 'error');
//       console.error('Error generating order:', error);
//     } finally {
//       setIsGenerating(false);
//     }
//   };

//   const formatPhoneNumber = (phoneNumber: string) => {
//     const cleaned = phoneNumber.replace(/\D/g, '');
//     if (cleaned.length === 12) {
//       return `+${cleaned.slice(0, 2)} (${cleaned.slice(2, 5)}) ${cleaned.slice(5, 8)}-${cleaned.slice(8)}`;
//     }
//     return phoneNumber;
//   };

//   const handleDownloadAll = async () => {
//     if (!customerData?.data.booking_details) return;

//     // Collect all files correctly from nested structure
//     const allFiles = customerData.data.booking_details.flatMap(
//       (booking: any) => 
//         (booking.report || []).flatMap(
//           (report: any) => 
//             (report.files || []).map(file => ({
//               ...file,
//               // Assume file_path is relative; prepend your server base URL if needed
//               // e.g., file_url: `https://your-server.com/${file.file_path}`
//               file_url: file.file_path // Update this if full URL is required
//             }))
//         )
//     );

//     if (allFiles.length === 0) {
//       showMessage("No files available for download", "error");
//       return;
//     }

//     // Single file → direct download
//     if (allFiles.length === 1) {
//       const file = allFiles[0];
//       handleDownloadFile(file.file_url, file.file_name);
//       showMessage(`${file.file_name} downloaded successfully`, "success");
//       return;
//     }

//     // Multiple files → ZIP download
//     const zip = new JSZip();
//     for (const file of allFiles) {
//       try {
//         const response = await fetch(file.file_url);
//         if (!response.ok) {
//           throw new Error(`Failed to fetch ${file.file_name}`);
//         }
//         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");
//       }
//     }

//     try {
//       const content = await zip.generateAsync({ type: "blob" });
//       saveAs(content, "all_bookings_reports.zip");
//       showMessage("All reports downloaded successfully (ZIP)", "success");
//     } catch (err) {
//       console.error("Error generating ZIP:", err);
//       showMessage("Failed to generate ZIP file", "error");
//     }
//   };

//   const handleDownloadFile = (url: string, filename: string) => {
//     const link = document.createElement('a');
//     link.href = url;
//     link.download = filename;
//     document.body.appendChild(link);
//     link.click();
//     document.body.removeChild(link);
//   };

//   const formatDate = (dateString: string) => {
//     try {
      
//       if (dateString.includes('/')) {
//         const [day, month, year] = dateString.split('/');
//         return format(new Date(`${year}-${month}-${day}`), 'd MMM yyyy');
//       }
//       return format(new Date(dateString), 'd MMM yyyy');
//     } catch {
//       return dateString;
//     }
//   };

//   if (loading) {
//     return (
//       <div className="flex justify-center items-center h-64">
//         <div className="w-12 h-12 border-t-4 border-primary-DEFAULT border-solid rounded-full animate-spin"></div>
//       </div>
//     );
//   }

//   if (error) {
//     return (
//       <div className="rounded-lg bg-red-100 dark:bg-red-900/50 text-red-600 dark:text-red-300 px-4 py-3 text-center">
//         {error}
//       </div>
//     );
//   }

//   if (!customerData?.data) {
//     return (
//       <div className="text-center p-4 text-gray-600 dark:text-gray-300">
//         No customer data found
//       </div>
//     );
//   }

//   const { data } = customerData;
//   const bookingDetails = data.booking_details || [];
// const allReports = bookingDetails.flatMap(booking =>
//   (booking.report || []).flatMap(report => 
//     (report.files || []).map(file => ({
//       ...file,
//       bookingId: booking.booking_id,
//       date: booking.date,
//       reportName: report.order_report_name,
//       created: report.created_at
//     }))
//   )
// );

//   const isButtonDisabled = data.process_status !== "processing";

//   return (
//     <main className={`container mx-auto p-4 md:p-6 ${isDark ? 'bg-gray-900' : 'bg-gray-50'}`}>
//       <div className="mb-6 flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
//         <h1 className="text-3xl font-bold text-secondary dark:text-white mb-6">
//           Customer History
//         </h1>
//         <button
//           onClick={() => navigate("/customer")}
//           className="btn btn-primary rounded-lg px-4 py-2 text-white bg-primary-DEFAULT hover:bg-primary-light border-primary-DEFAULT hover:border-primary-light transition-all duration-200 shadow-primary hover:shadow-primary-lg"
//         >
//           Back 
//         </button>
//       </div>

//       <div className="flex border-b border-gray-300 dark:border-gray-600 mb-6 overflow-x-auto">
//         {[
//           { id: 'profile', label: 'Profile', icon: <FaUser className="mr-2" /> },
//           { id: 'bookings', label: 'Bookings', icon: <FaCalendarCheck className="mr-2" /> },
//           { id: 'reports', label: 'Reports', icon: <FaNotesMedical className="mr-2" /> },
//           { id: 'payments', label: 'Payments', icon: <FaMoneyBillWave className="mr-2" /> }
//         ].map(tab => (
//           <button
//             key={tab.id}
//             className={`flex items-center px-4 py-3 border-b-2 transition-all duration-200 ${activeTab === tab.id
//               ? 'border-primary-DEFAULT dark:border-primary-light text-primary-DEFAULT dark:text-primary-light font-semibold'
//               : 'border-transparent text-gray-600 dark:text-gray-300 hover:text-primary-DEFAULT dark:hover:text-primary-light'
//               }`}
//             onClick={() => setActiveTab(tab.id)}
//           >
//             {tab.icon} {tab.label}
//           </button>
//         ))}
//       </div>

//       {activeTab === 'profile' && (
//         <section className={`shadow-lg rounded-xl p-6 ${isDark ? 'bg-gray-800' : 'bg-white'} border-t-4 border-primary-DEFAULT dark:border-primary-light`}>
//           <div className="flex flex-col md:flex-row gap-6">
//             <div className="flex-shrink-0">
//               <div className="w-40 h-40 rounded-full border-4 border-primary/20 dark:border-primary-dark-light flex items-center justify-center bg-primary/10 dark:bg-primary-dark-light">
//                 <span className="text-5xl font-bold text-primary-DEFAULT dark:text-primary-light">
//                   {data.firstName.charAt(0)}
//                 </span>
//               </div>
//             </div>

//             <div className="flex-1">
//               <h1 className="text-3xl font-bold text-primary-DEFAULT dark:text-primary-light">
//                 {data.firstName} {data.lastName}
//               </h1>
//               <p className={`text-sm mb-4 ${isDark ? 'text-gray-400' : 'text-gray-500'}`}>
//                 Customer ID: #{data.cust_id || 'N/A'}
//               </p>

//               <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
//                 <div>
//                   <p className="font-semibold text-primary-DEFAULT dark:text-primary-light">Email</p>
//                   <p className={isDark ? 'text-gray-300' : 'text-gray-700'}>{data.email}</p>
//                 </div>
//                 <div>
//                   <p className="font-semibold text-primary-DEFAULT dark:text-primary-light">Phone</p>
//                   <p className={isDark ? 'text-gray-300' : 'text-gray-700'}>{formatPhoneNumber(data.phone)}</p>
//                 </div>
//                 <div>
//                   <p className="font-semibold text-primary-DEFAULT dark:text-primary-light">Date of Birth</p>
//                   <p className={isDark ? 'text-gray-300' : 'text-gray-700'}>{formatDate(data.birthdate)}</p>
//                 </div>
//                 <div>
//                   <p className="font-semibold text-primary-DEFAULT dark:text-primary-light">Gender</p>
//                   <p className={isDark ? 'text-gray-300' : 'text-gray-700'}>{data.gender}</p>
//                 </div>
//                 <div>
//                   <p className="font-semibold text-primary-DEFAULT dark:text-primary-light">Address</p>
//                   <p className={isDark ? 'text-gray-300' : 'text-gray-700'}>{data.address}</p>
//                 </div>
//                 <div>
//                   <p className="font-semibold text-primary-DEFAULT dark:text-primary-light">Location</p>
//                   <p className={isDark ? 'text-gray-300' : 'text-gray-700'}>{data.city}, {data.state} {data.zip}</p>
//                 </div>
//               </div>

//           {generatedOrderIds.length > 0 && (
//   <div className="mt-6">
//     <h3 className="font-semibold text-primary-DEFAULT dark:text-primary-light mb-2">
//       Generated Reports:
//     </h3>
//     <div className="space-y-2">
//       {customerData.data.booking_details?.flatMap(booking => 
//         booking.report?.map((report, index) => (
//           <div key={index} className="flex items-center gap-2">
//             <span className="px-3 py-1 bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-100 rounded-full text-sm font-medium">
//               #{report.order_id}
//             </span>
//             <span className={isDark ? 'text-gray-300' : 'text-gray-700'}>
//               {report.order_report_name}
//             </span>
//           </div>
//         ))
//       )}
//     </div>
//   </div>
// )}
//               <div className="flex flex-wrap gap-4 mt-6">
//                 {allReports.length > 0 && (
//                   <button
//                     onClick={handleDownloadAll}
//                     className="btn btn-primary rounded-lg px-4 py-2 flex items-center gap-2"
//                   >
//                     <FaDownload /> Download All Reports
//                   </button>
//                 )}

//                 <button
//                   onClick={handleGenerateOrderClick}
//         disabled={isButtonDisabled}
//   className={`px-4 py-2 rounded-lg flex items-center gap-2 transition-all duration-200
//     ${isButtonDisabled 
//       ? "bg-gray-400 cursor-not-allowed"   // disabled style
//       : "bg-primary hover:bg-primary-light text-white shadow-primary hover:shadow-primary-lg"
//     }
//   `}
//                 >
//                   <FaFileInvoiceDollar /> Generate Order
//                 </button>
//               </div>
//             </div>
//           </div>
//         </section>
//       )}

//       {activeTab === 'bookings' && (
//         <section className={`shadow-lg rounded-xl p-6 ${isDark ? 'bg-gray-800' : 'bg-white'} border-t-4 border-secondary-DEFAULT dark:border-secondary-light`}>
//           <h2 className="text-2xl font-semibold text-secondary-DEFAULT dark:text-secondary-light flex items-center gap-2 mb-6">
//             <FaCalendarCheck /> Booking History
//           </h2>

//           {bookingDetails.length > 0 ? (
//             <div className="space-y-4">
//               {bookingDetails.map((booking) => (
//                 <div
//                   key={booking.booking_id}
//                   className={`p-5 rounded-lg ${isDark ? 'bg-gray-700' : 'bg-gray-50'} flex flex-col md:flex-row justify-between items-start md:items-center gap-4 transition-all duration-200 hover:shadow-md`}
//                 >
//                   <div className="flex-1">
//                     <div className="flex items-center gap-3 mb-2">
//                       <h3 className="font-bold text-lg text-primary-DEFAULT dark:text-primary-light">
//                         Booking #{booking.booking_id}
//                       </h3>
//                       <span className={`px-3 py-1 rounded-full text-xs font-semibold ${booking.status === 'approved'
//                         ? 'bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-100'
//                         : booking.status === 'pending'
//                           ? 'bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-100'
//                           : 'bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-100'
//                         }`}>
//                         {booking.status}
//                       </span>
//                     </div>

//                     <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
//                       <div>
//                         <p className={`text-sm ${isDark ? 'text-gray-400' : 'text-gray-500'}`}>Date & Time</p>
//                         <p className={isDark ? 'text-gray-300' : 'text-gray-700'}>{formatDate(booking.date)} at {booking.time}</p>
//                       </div>
//                       <div>
//                         <p className={`text-sm ${isDark ? 'text-gray-400' : 'text-gray-500'}`}>Amount</p>
//                         <p className="font-semibold text-secondary-DEFAULT dark:text-secondary-light">${booking.rs}</p>
//                       </div>
//                       <div>
//                         <p className={`text-sm ${isDark ? 'text-gray-400' : 'text-gray-500'}`}>Payment</p>
//                         <p className={isDark ? 'text-gray-300' : 'text-gray-700'}>
//                           {booking.payment_status} ({booking.payment_method})
//                         </p>
//                       </div>
//                     </div>
//                   </div>
//                 </div>
//               ))}
//             </div>
//           ) : (
//             <div className={`p-8 text-center rounded-lg ${isDark ? 'bg-gray-700' : 'bg-gray-100'}`}>
//               <p className={isDark ? 'text-gray-400' : 'text-gray-500'}>No booking history available</p>
//             </div>
//           )}
//         </section>
//       )}

// {activeTab === 'reports' && (
//   <section className={`shadow-lg rounded-xl p-6 ${isDark ? 'bg-gray-800' : 'bg-white'} border-t-4 border-primary-DEFAULT dark:border-primary-light`}>
//     <div className="flex justify-between items-center mb-6">
//       <h2 className="text-2xl font-semibold text-primary-DEFAULT dark:text-primary-light flex items-center gap-2">
//         <FaNotesMedical /> Medical Reports
//       </h2>
//       {allReports.length > 0 && (
//         <button
//           onClick={handleDownloadAll}
//           className="btn btn-primary rounded-lg px-4 py-2 flex items-center gap-2"
//         >
//           <FaDownload /> Download All
//         </button>
//       )}
//     </div>

//     {allReports.length > 0 ? (
//       <div className="space-y-6">
//         {bookingDetails.map((booking) => (
//           <div key={booking.booking_id} className="mb-8">
//             <h3 className="text-lg font-semibold text-primary-DEFAULT dark:text-primary-light mb-4">
//               Booking #{booking.booking_id} - {formatDate(booking.date)} at {booking.time}
//             </h3>
            
//             {booking.report && booking.report.length > 0 ? (
//               <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
//                 {booking.report.map((report, reportIndex) => (
//                   <div
//                     key={reportIndex}
//                     className={`p-4 rounded-lg border ${isDark ? 'border-gray-700 bg-gray-700' : 'border-gray-200 bg-gray-50'} transition-all duration-200 hover:shadow-md`}
//                   >
//                     <h4 className="font-bold text-primary-DEFAULT dark:text-primary-light mb-2">
//                       {report.order_report_name || `Report #${reportIndex + 1}`}
//                     </h4>
//                     <p className={`text-sm mb-3 ${isDark ? 'text-gray-400' : 'text-gray-500'}`}>
//                       Created: {format(new Date(report.created_at), 'MMM d, yyyy h:mm a')}
//                     </p>
                    
//                     {report.files && report.files.length > 0 ? (
//                       <div className="space-y-2">
//                         {report.files.map((file, fileIndex) => (
//                           <div key={fileIndex} className="flex justify-between items-center">
//                             <span className={`text-sm truncate ${isDark ? 'text-gray-300' : 'text-gray-700'}`}>
//                               {file.file_name}
//                             </span>
//                             <button
//                               onClick={() => handleDownloadFile(file.file_path, file.file_name)}
//                               className="btn btn-primary rounded-lg px-3 py-1 flex items-center gap-1 text-sm"
//                             >
//                               <FaFileDownload /> Download
//                             </button>
//                           </div>
//                         ))}
//                       </div>
//                     ) : (
//                       <p className={`text-sm ${isDark ? 'text-gray-400' : 'text-gray-500'}`}>
//                         No files available for this report
//                       </p>
//                     )}
//                   </div>
//                 ))}
//               </div>
//             ) : (
//               <div className={`p-4 rounded-lg ${isDark ? 'bg-gray-700' : 'bg-gray-100'}`}>
//                 <p className={isDark ? 'text-gray-400' : 'text-gray-500'}>No reports available for this booking</p>
//               </div>
//             )}
//           </div>
//         ))}
//       </div>
//     ) : (
//       <div className={`p-8 text-center rounded-lg ${isDark ? 'bg-gray-700' : 'bg-gray-100'}`}>
//         <p className={isDark ? 'text-gray-400' : 'text-gray-500'}>No reports available</p>
//       </div>
//     )}
//   </section>
// )}

//       {activeTab === 'payments' && (
//         <section className={`shadow-lg rounded-xl p-6 ${isDark ? 'bg-gray-800' : 'bg-white'} border-t-4 border-secondary-DEFAULT dark:border-secondary-light`}>
//           <h2 className="text-2xl font-semibold text-secondary-DEFAULT dark:text-secondary-light flex items-center gap-2 mb-6">
//             <FaMoneyBillWave /> Payment History
//           </h2>

//           {bookingDetails.length > 0 ? (
//             <div className="overflow-x-auto">
//               <table className="min-w-full">
//                 <thead>
//                   <tr className={`${isDark ? 'bg-gray-700' : 'bg-gray-100'} uppercase text-sm leading-normal`}>
//                     <th className="py-3 px-6 text-left text-primary-DEFAULT dark:text-primary-light">Booking ID</th>
//                     <th className="py-3 px-6 text-left text-primary-DEFAULT dark:text-primary-light">Date</th>
//                     <th className="py-3 px-6 text-left text-primary-DEFAULT dark:text-primary-light">Amount</th>
//                     <th className="py-3 px-6 text-left text-primary-DEFAULT dark:text-primary-light">Status</th>
//                     <th className="py-3 px-6 text-left text-primary-DEFAULT dark:text-primary-light">Method</th>
//                   </tr>
//                 </thead>
//                 <tbody className="text-sm">
//                   {bookingDetails.map((booking) => (
//                     <tr
//                       key={booking.booking_id}
//                       className={`border-b ${isDark ? 'border-gray-700 hover:bg-gray-700' : 'border-gray-200 hover:bg-gray-50'}`}
//                     >
//                       <td className="py-4 px-6">{booking.booking_id}</td>
//                       <td className="py-4 px-6">{formatDate(booking.date)}</td>
//                       <td className="py-4 px-6 font-semibold text-secondary-DEFAULT dark:text-secondary-light">${booking.rs}</td>
//                       <td className="py-4 px-6">
//                         <span className={`px-3 py-1 rounded-full text-xs font-semibold ${booking.payment_status === 'paid'
//                           ? 'bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-100'
//                           : 'bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-100'
//                           }`}>
//                           {booking.payment_status}
//                         </span>
//                       </td>
//                       <td className="py-4 px-6">{booking.payment_method}</td>
//                     </tr>
//                   ))}
//                 </tbody>
//               </table>
//             </div>
//           ) : (
//             <div className={`p-8 text-center rounded-lg ${isDark ? 'bg-gray-700' : 'bg-gray-100'}`}>
//               <p className={isDark ? 'text-gray-400' : 'text-gray-500'}>No payment history available</p>
//             </div>
//           )}
//         </section>
//       )}

//       {/* Generate Order Modal */}
//       {/* Generate Order Modal */}
//       {/* Generate Order Modal */}
//     {/* Generate Order Modal */}
// <Transition appear show={showOrderModal} as={Fragment}>
//   <Dialog as="div" open={showOrderModal} onClose={() => setShowOrderModal(false)}>
//     <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/60 z-[998]" />
//     </Transition.Child>

//     <div className="fixed inset-0 z-[999] overflow-y-auto">
//       <div className="flex min-h-screen items-center justify-center p-4">
//         <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={`panel w-full max-w-md overflow-hidden rounded-lg border-0 p-0 ${isDark ? 'bg-gray-800' : 'bg-white'} shadow-lg`}>
//             <div className={`flex items-center justify-between px-5 py-3 ${isDark ? 'bg-gray-700' : 'bg-gray-50'}`}>
//               <div className="text-lg font-bold text-primary-DEFAULT dark:text-primary-light">
//                 Generate New Order
//               </div>
//               <button
//                 type="button"
//                 className="text-gray-500 hover:text-gray-700 dark:hover:text-primary"
//                 onClick={() => setShowOrderModal(false)}
//               >
//                 <FaTimes />
//               </button>
//             </div>

//             <div className="p-5">
//               <div className="mb-6">
//                 <label htmlFor="key-select" className="block text-sm text-gray-600 dark:text-gray-400 mb-2">
//                   Select a key to include in this order:
//                 </label>

//                 <select
//                   id="key-select"
//                   value={selectedKeys[0] || ""}
//                   onChange={(e) => {
//                     const selectedKey = e.target.value;
//                     setSelectedKeys(selectedKey ? [selectedKey] : []);
//                   }}
//                   className={`form-select w-full rounded-lg border ${isDark
//                       ? 'bg-gray-700 border-gray-600 text-white'
//                       : 'bg-white border-gray-300 text-gray-800'
//                     } p-2 focus:border-primary-DEFAULT focus:ring-primary-DEFAULT`}
//                 >
//                   <option value="">Select a key</option>
//                   {apiKeys.map((key) => {
//                     // Check if this key has already been generated for this customer
//                     const alreadyGenerated = customerData?.data?.booking_details?.some(booking => 
//                       booking.report?.some(report => 
//                         report.order_report_name === key.name
//                       )
//                     );
                    
//                     return (
//                       <option
//                         key={key._id}
//                         value={key.apikey}
//                         disabled={alreadyGenerated}
//                         className={alreadyGenerated ? 'text-gray-400' : ''}
//                       >
//                         {key.name} {alreadyGenerated && '(Already generated)'}
//                       </option>
//                     );
//                   })}
//                 </select>

//                 {selectedKeys.length > 0 && (
//                   <p className="mt-2 text-sm text-primary-DEFAULT dark:text-primary-light">
//                     Selected: {apiKeys.find(k => k.apikey === selectedKeys[0])?.name}
//                   </p>
//                 )}
//               </div>

//               <div className="flex justify-end space-x-3 pt-4">
//                 <button
//                   type="button"
//                   onClick={() => setShowOrderModal(false)}
//                   className="btn btn-outline-secondary rounded-lg border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700 transition-all duration-200"
//                 >
//                   Cancel
//                 </button>
//                 <button
//                   type="button"
//                   onClick={handleGenerateOrder}
//                   disabled={selectedKeys.length === 0 || isGenerating}
//                   className={`btn rounded-lg px-4 py-2 flex items-center gap-2 transition-all duration-200
//                       ${selectedKeys.length === 0 || isGenerating
//                       ? 'bg-gray-300 text-gray-700 cursor-not-allowed'
//                       : 'btn-primary text-white bg-primary-DEFAULT hover:bg-primary-light border-primary-DEFAULT hover:border-primary-light shadow-primary hover:shadow-primary-lg'
//                     }`}
//                 >
//                   {isGenerating ? (
//                     <>
//                       <svg className="animate-spin -ml-1 mr-2 h-4 w-4 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
//                         <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
//                         <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"></path>
//                       </svg>
//                       Generating...
//                     </>
//                   ) : 'Generate Order'}
//                 </button>
//               </div>
//             </div>
//           </Dialog.Panel>
//         </Transition.Child>
//       </div>
//     </div>
//   </Dialog>
// </Transition>
//     </main>
//   );
// };

// export default CustomerHistory;



// import React, { useEffect, useState } from 'react';
// import { Fragment } from 'react';
// import { useNavigate, useParams } from 'react-router-dom';
// import {
//   FaUserMd,
//   FaHeartbeat,
//   FaNotesMedical,
//   FaDownload,
//   FaCalendarCheck,
//   FaFileDownload,
//   FaMoneyBillWave,
//   FaFileInvoiceDollar,
//   FaTimes,
//   FaUser,
//   FaPlusCircle
// } from 'react-icons/fa';
// import { format } from 'date-fns';
// import { CustomerHistoryDetails, generateOrder, viewAPIKEY } from '../../API';
// import { useSelector } from 'react-redux';
// import { IRootState } from '../../store';
// import { showMessage } from '../../general';
// import { Dialog, Transition } from '@headlessui/react';
// import JSZip from 'jszip';
// import { saveAs } from 'file-saver';

// interface Addon {
//   id: number;
//   name: string;
//   price: string;
// }

// interface BookingDetails {
//   _id: number;
//   booking_id: number;
//   date: string;
//   time: string;
//   rs: number;
//   status: string;
//   payment_status: string;
//   payment_method: string;
//   doctor_id: number;
//   process_status: string;
//   addon_id?: Addon[];
//   package?: {
//     id: number;
//     name: string;
//     price: string;
//   };
//   report?: {
//     order_id: number;
//     order_status: boolean;
//     order_report_name: string;
//     created_at: string;
//     files?: {
//       file_name: string;
//       file_path: string;
//     }[];
//   }[];
// }

// interface CustomerDetails {
//   _id: number;
//   firstName: string;
//   lastName: string;
//   // ... other fields
//   booking_details?: BookingDetails[];
// }

// interface ApiResponse {
//   status: boolean;
//   data: CustomerDetails;
// }

// interface ApiKey {
//   _id: number;
//   name: string;
//   apikey: string;
//   epoch_time: number;
//   delete_status: string;
//   updated_at: string;
//   created_at: string;
// }

// const KEY_OPTIONS = [
//   { id: 'brain_key', name: 'Brain Key' },
//   { id: 'ext_right', name: 'Ext Right' },
//   { id: 'heart_key', name: 'Heart Key' },
//   { id: 'liver_key', name: 'Liver Key' },
//   { id: 'lung_key', name: 'Lung Key' },
// ];

// const CustomerHistory = () => {
//   const { customerId } = useParams();
//   const navigate = useNavigate();
//   const isDark = useSelector((state: IRootState) => state.themeConfig.theme === 'dark' || state.themeConfig.isDarkMode);

//   const [customerData, setCustomerData] = useState<ApiResponse | null>(null);
//   const [loading, setLoading] = useState(true);
//   const [error, setError] = useState<string | null>(null);
//   const [activeTab, setActiveTab] = useState('profile');
//   const [isGenerating, setIsGenerating] = useState(false);
//   const [showOrderModal, setShowOrderModal] = useState(false);
//   const [selectedKeys, setSelectedKeys] = useState<string[]>([]);
//   const [generatedOrderIds, setGeneratedOrderIds] = useState<number[]>([]);
//   const [generatedOrderKeys, setGeneratedOrderKeys] = useState<string[]>([]);
//   const [apiKeys, setApiKeys] = useState<ApiKey[]>([]);

//   useEffect(() => {
//     const fetchCustomerData = async () => {
//       try {
//         const loggedIn = localStorage.getItem('isLoggedIn') === 'true';
//         if (!loggedIn) {
//           navigate('/login');
//           return;
//         }

//         if (!customerId) {
//           setError('No customer ID provided');
//           setLoading(false);
//           return;
//         }

//         const data = await CustomerHistoryDetails(customerId);
//         if (data?.status && data.data) {
//           setCustomerData(data);
//           if (data.data.order_id) {
//             setGeneratedOrderIds(
//               Array.isArray(data.data.order_id) ? data.data.order_id : [data.data.order_id]
//             );
//           }
//         } else {
//           setError('Invalid customer data received');
//         }
//       } catch (err) {
//         setError('Failed to fetch customer data');
//         console.error('Error fetching customer data:', err);
//       } finally {
//         setLoading(false);
//       }
//     };

//     fetchCustomerData();
//   }, [navigate, customerId]);


//   useEffect(() => {
//     if (showOrderModal) {
//       const fetchKeys = async () => {
//         try {
//           const res = await viewAPIKEY();
//           if (res.status === "success" && Array.isArray(res.data)) {
//             setApiKeys(res.data);
//           } else {
//             console.error("Invalid API Key response", res);
//           }
//         } catch (error) {
//           console.error("Error fetching API Keys", error);
//         }
//       };
//       fetchKeys();
//     }
//   }, [showOrderModal]);

//   const handleGenerateOrderClick = () => {
//     setSelectedKeys([]);
//     setShowOrderModal(true);
//   };

 

//   const handleGenerateOrder = async () => {
//     if (!customerId || selectedKeys.length === 0) {
//       showMessage('Please select at least one key', 'error');
//       return;
//     }

//     setIsGenerating(true);

//     try {
//       const custId = parseInt(customerId);
//       const data = await generateOrder(custId, selectedKeys);

//       if (data.status === true) {
//         showMessage(data.message, 'success');
//         setGeneratedOrderKeys(prev => [...prev, ...selectedKeys])
//         const updatedData = await CustomerHistoryDetails(customerId);
//         if (updatedData?.status && updatedData.data) {
//           setCustomerData(updatedData);
//           if (updatedData.data.order_id) {
//             const newOrderIds = Array.isArray(updatedData.data.order_id)
//               ? updatedData.data.order_id
//               : [updatedData.data.order_id];
//             setGeneratedOrderIds(newOrderIds);
//           }
//         }
//         setShowOrderModal(false);
//       } else {
//         showMessage(data.message, 'error');
//       }
//     } catch (error) {
//       showMessage('An error occurred while generating the order', 'error');
//       console.error('Error generating order:', error);
//     } finally {
//       setIsGenerating(false);
//     }
//   };

//   const formatPhoneNumber = (phoneNumber: string) => {
//     const cleaned = phoneNumber.replace(/\D/g, '');
//     if (cleaned.length === 12) {
//       return `+${cleaned.slice(0, 2)} (${cleaned.slice(2, 5)}) ${cleaned.slice(5, 8)}-${cleaned.slice(8)}`;
//     }
//     return phoneNumber;
//   };

//   const handleDownloadAll = async () => {
//     if (!customerData?.data.booking_details) return;

//     // Collect all files correctly from nested structure
//     const allFiles = customerData.data.booking_details.flatMap(
//       (booking: any) => 
//         (booking.report || []).flatMap(
//           (report: any) => 
//             (report.files || []).map(file => ({
//               ...file,
//               // Assume file_path is relative; prepend your server base URL if needed
//               // e.g., file_url: `https://your-server.com/${file.file_path}`
//               file_url: file.file_path // Update this if full URL is required
//             }))
//         )
//     );

//     if (allFiles.length === 0) {
//       showMessage("No files available for download", "error");
//       return;
//     }

//     // Single file → direct download
//     if (allFiles.length === 1) {
//       const file = allFiles[0];
//       handleDownloadFile(file.file_url, file.file_name);
//       showMessage(`${file.file_name} downloaded successfully`, "success");
//       return;
//     }

//     // Multiple files → ZIP download
//     const zip = new JSZip();
//     for (const file of allFiles) {
//       try {
//         const response = await fetch(file.file_url);
//         if (!response.ok) {
//           throw new Error(`Failed to fetch ${file.file_name}`);
//         }
//         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");
//       }
//     }

//     try {
//       const content = await zip.generateAsync({ type: "blob" });
//       saveAs(content, "all_bookings_reports.zip");
//       showMessage("All reports downloaded successfully (ZIP)", "success");
//     } catch (err) {
//       console.error("Error generating ZIP:", err);
//       showMessage("Failed to generate ZIP file", "error");
//     }
//   };

//   const handleDownloadFile = (url: string, filename: string) => {
//     const link = document.createElement('a');
//     link.href = url;
//     link.download = filename;
//     document.body.appendChild(link);
//     link.click();
//     document.body.removeChild(link);
//   };

//   const formatDate = (dateString: string) => {
//     try {
      
//       if (dateString.includes('/')) {
//         const [day, month, year] = dateString.split('/');
//         return format(new Date(`${year}-${month}-${day}`), 'd MMM yyyy');
//       }
//       return format(new Date(dateString), 'd MMM yyyy');
//     } catch {
//       return dateString;
//     }
//   };

//   const formatCurrency = (amount: string | number) => {
//     return new Intl.NumberFormat('en-US', {
//       style: 'currency',
//       currency: 'USD'
//     }).format(typeof amount === 'string' ? parseFloat(amount) : amount);
//   };

//   if (loading) {
//     return (
//       <div className="flex justify-center items-center h-64">
//         <div className="w-12 h-12 border-t-4 border-primary-DEFAULT border-solid rounded-full animate-spin"></div>
//       </div>
//     );
//   }

//   if (error) {
//     return (
//       <div className="rounded-lg bg-red-100 dark:bg-red-900/50 text-red-600 dark:text-red-300 px-4 py-3 text-center">
//         {error}
//       </div>
//     );
//   }

//   if (!customerData?.data) {
//     return (
//       <div className="text-center p-4 text-gray-600 dark:text-gray-300">
//         No customer data found
//       </div>
//     );
//   }

//   const { data } = customerData;
//   const bookingDetails = data.booking_details || [];
// const allReports = bookingDetails.flatMap(booking =>
//   (booking.report || []).flatMap(report => 
//     (report.files || []).map(file => ({
//       ...file,
//       bookingId: booking.booking_id,
//       date: booking.date,
//       reportName: report.order_report_name,
//       created: report.created_at
//     }))
//   )
// );

//   const isButtonDisabled = data.process_status !== "processing";

//   return (
//     <main className={`container mx-auto p-4 md:p-6 ${isDark ? 'bg-gray-900' : 'bg-gray-50'}`}>
//       <div className="mb-6 flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
//         <h1 className="text-3xl font-bold text-secondary dark:text-white mb-6">
//           Customer History
//         </h1>
//         <button
//           onClick={() => navigate("/customer")}
//           className="btn btn-primary rounded-lg px-4 py-2 text-white bg-primary-DEFAULT hover:bg-primary-light border-primary-DEFAULT hover:border-primary-light transition-all duration-200 shadow-primary hover:shadow-primary-lg"
//         >
//           Back 
//         </button>
//       </div>

//       <div className="flex border-b border-gray-300 dark:border-gray-600 mb-6 overflow-x-auto">
//         {[
//           { id: 'profile', label: 'Profile', icon: <FaUser className="mr-2" /> },
//           { id: 'bookings', label: 'Bookings', icon: <FaCalendarCheck className="mr-2" /> },
//           { id: 'reports', label: 'Reports', icon: <FaNotesMedical className="mr-2" /> },
//           { id: 'payments', label: 'Payments', icon: <FaMoneyBillWave className="mr-2" /> }
//         ].map(tab => (
//           <button
//             key={tab.id}
//             className={`flex items-center px-4 py-3 border-b-2 transition-all duration-200 ${activeTab === tab.id
//               ? 'border-primary-DEFAULT dark:border-primary-light text-primary-DEFAULT dark:text-primary-light font-semibold'
//               : 'border-transparent text-gray-600 dark:text-gray-300 hover:text-primary-DEFAULT dark:hover:text-primary-light'
//               }`}
//             onClick={() => setActiveTab(tab.id)}
//           >
//             {tab.icon} {tab.label}
//           </button>
//         ))}
//       </div>

//       {activeTab === 'profile' && (
//         <section className={`shadow-lg rounded-xl p-6 ${isDark ? 'bg-gray-800' : 'bg-white'} border-t-4 border-primary-DEFAULT dark:border-primary-light`}>
//           <div className="flex flex-col md:flex-row gap-6">
//             <div className="flex-shrink-0">
//               <div className="w-40 h-40 rounded-full border-4 border-primary/20 dark:border-primary-dark-light flex items-center justify-center bg-primary/10 dark:bg-primary-dark-light">
//                 <span className="text-5xl font-bold text-primary-DEFAULT dark:text-primary-light">
//                   {data.firstName.charAt(0)}
//                 </span>
//               </div>
//             </div>

//             <div className="flex-1">
//               <h1 className="text-3xl font-bold text-primary-DEFAULT dark:text-primary-light">
//                 {data.firstName} {data.lastName}
//               </h1>
//               <p className={`text-sm mb-4 ${isDark ? 'text-gray-400' : 'text-gray-500'}`}>
//                 Customer ID: #{data.cust_id || 'N/A'}
//               </p>

//               <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
//                 <div>
//                   <p className="font-semibold text-primary-DEFAULT dark:text-primary-light">Email</p>
//                   <p className={isDark ? 'text-gray-300' : 'text-gray-700'}>{data.email}</p>
//                 </div>
//                 <div>
//                   <p className="font-semibold text-primary-DEFAULT dark:text-primary-light">Phone</p>
//                   <p className={isDark ? 'text-gray-300' : 'text-gray-700'}>{formatPhoneNumber(data.phone)}</p>
//                 </div>
//                 <div>
//                   <p className="font-semibold text-primary-DEFAULT dark:text-primary-light">Date of Birth</p>
//                   <p className={isDark ? 'text-gray-300' : 'text-gray-700'}>{formatDate(data.birthdate)}</p>
//                 </div>
//                 <div>
//                   <p className="font-semibold text-primary-DEFAULT dark:text-primary-light">Gender</p>
//                   <p className={isDark ? 'text-gray-300' : 'text-gray-700'}>{data.gender}</p>
//                 </div>
//                 <div>
//                   <p className="font-semibold text-primary-DEFAULT dark:text-primary-light">Address</p>
//                   <p className={isDark ? 'text-gray-300' : 'text-gray-700'}>{data.address}</p>
//                 </div>
//                 <div>
//                   <p className="font-semibold text-primary-DEFAULT dark:text-primary-light">Location</p>
//                   <p className={isDark ? 'text-gray-300' : 'text-gray-700'}>{data.city}, {data.state} {data.zip}</p>
//                 </div>
//               </div>

//           {generatedOrderIds.length > 0 && (
//   <div className="mt-6">
//     <h3 className="font-semibold text-primary-DEFAULT dark:text-primary-light mb-2">
//       Generated Reports:
//     </h3>
//     <div className="space-y-2">
//       {customerData.data.booking_details?.flatMap(booking => 
//         booking.report?.map((report, index) => (
//           <div key={index} className="flex items-center gap-2">
//             <span className="px-3 py-1 bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-100 rounded-full text-sm font-medium">
//               #{report.order_id}
//             </span>
//             <span className={isDark ? 'text-gray-300' : 'text-gray-700'}>
//               {report.order_report_name}
//             </span>
//           </div>
//         ))
//       )}
//     </div>
//   </div>
// )}
//               <div className="flex flex-wrap gap-4 mt-6">
//                 {allReports.length > 0 && (
//                   <button
//                     onClick={handleDownloadAll}
//                     className="btn btn-primary rounded-lg px-4 py-2 flex items-center gap-2"
//                   >
//                     <FaDownload /> Download All Reports
//                   </button>
//                 )}

//                 <button
//                   onClick={handleGenerateOrderClick}
//         disabled={isButtonDisabled}
//   className={`px-4 py-2 rounded-lg flex items-center gap-2 transition-all duration-200
//     ${isButtonDisabled 
//       ? "bg-gray-400 cursor-not-allowed"   // disabled style
//       : "bg-primary hover:bg-primary-light text-white shadow-primary hover:shadow-primary-lg"
//     }
//   `}
//                 >
//                   <FaFileInvoiceDollar /> Generate Order
//                 </button>
//               </div>
//             </div>
//           </div>
//         </section>
//       )}

//       {activeTab === 'bookings' && (
//         <section className={`shadow-lg rounded-xl p-6 ${isDark ? 'bg-gray-800' : 'bg-white'} border-t-4 border-secondary-DEFAULT dark:border-secondary-light`}>
//           <h2 className="text-2xl font-semibold text-secondary-DEFAULT dark:text-secondary-light flex items-center gap-2 mb-6">
//             <FaCalendarCheck /> Booking History
//           </h2>

//           {bookingDetails.length > 0 ? (
//             <div className="space-y-4">
//               {bookingDetails.map((booking) => (
//                 <div
//                   key={booking.booking_id}
//                   className={`p-5 rounded-lg ${isDark ? 'bg-gray-700' : 'bg-gray-50'} flex flex-col md:flex-row justify-between items-start md:items-center gap-4 transition-all duration-200 hover:shadow-md`}
//                 >
//                   <div className="flex-1">
//                     <div className="flex items-center gap-3 mb-2">
//                       <h3 className="font-bold text-lg text-primary-DEFAULT dark:text-primary-light">
//                         Booking #{booking.booking_id}
//                       </h3>
//                       <span className={`px-3 py-1 rounded-full text-xs font-semibold ${booking.status === 'approved'
//                         ? 'bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-100'
//                         : booking.status === 'pending'
//                           ? 'bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-100'
//                           : 'bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-100'
//                         }`}>
//                         {booking.status}
//                       </span>
//                     </div>

//                     <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
//                       <div>
//                         <p className={`text-sm ${isDark ? 'text-gray-400' : 'text-gray-500'}`}>Date & Time</p>
//                         <p className={isDark ? 'text-gray-300' : 'text-gray-700'}>{formatDate(booking.date)} at {booking.time}</p>
//                       </div>
//                       <div>
//                         <p className={`text-sm ${isDark ? 'text-gray-400' : 'text-gray-500'}`}>Amount</p>
//                         <p className="font-semibold text-secondary-DEFAULT dark:text-secondary-light">{formatCurrency(booking.rs)}</p>
//                       </div>
//                       <div>
//                         <p className={`text-sm ${isDark ? 'text-gray-400' : 'text-gray-500'}`}>Payment</p>
//                         <p className={isDark ? 'text-gray-300' : 'text-gray-700'}>
//                           {booking.payment_status} ({booking.payment_method})
//                         </p>
//                       </div>
//                     </div>

//                     {/* Package Information */}
//                     {booking.package && (
//                       <div className="mt-4">
//                         <p className={`text-sm font-semibold ${isDark ? 'text-gray-400' : 'text-gray-500'}`}>Package</p>
//                         <p className={isDark ? 'text-gray-300' : 'text-gray-700'}>
//                           {booking.package.name} - {formatCurrency(booking.package.price)}
//                         </p>
//                       </div>
//                     )}

//                     {/* Addons Information */}
//                     {booking.addon_id && booking.addon_id.length > 0 && (
//                       <div className="mt-4">
//                         <p className={`text-sm font-semibold ${isDark ? 'text-gray-400' : 'text-gray-500'} flex items-center gap-1`}>
//                           <FaPlusCircle className="text-primary-DEFAULT" /> Addons
//                         </p>
//                         <ul className="mt-2 space-y-2">
//                           {booking.addon_id.map((addon) => (
//                             <li key={addon.id} className="flex justify-between items-center">
//                               <span className={isDark ? 'text-gray-300' : 'text-gray-700'}>{addon.name}</span>
//                               <span className="font-semibold text-secondary-DEFAULT dark:text-secondary-light">
//                                 {formatCurrency(addon.price)}
//                               </span>
//                             </li>
//                           ))}
//                         </ul>
//                       </div>
//                     )}
//                   </div>
//                 </div>
//               ))}
//             </div>
//           ) : (
//             <div className={`p-8 text-center rounded-lg ${isDark ? 'bg-gray-700' : 'bg-gray-100'}`}>
//               <p className={isDark ? 'text-gray-400' : 'text-gray-500'}>No booking history available</p>
//             </div>
//           )}
//         </section>
//       )}

// {activeTab === 'reports' && (
//   <section className={`shadow-lg rounded-xl p-6 ${isDark ? 'bg-gray-800' : 'bg-white'} border-t-4 border-primary-DEFAULT dark:border-primary-light`}>
//     <div className="flex justify-between items-center mb-6">
//       <h2 className="text-2xl font-semibold text-primary-DEFAULT dark:text-primary-light flex items-center gap-2">
//         <FaNotesMedical /> Medical Reports
//       </h2>
//       {allReports.length > 0 && (
//         <button
//           onClick={handleDownloadAll}
//           className="btn btn-primary rounded-lg px-4 py-2 flex items-center gap-2"
//         >
//           <FaDownload /> Download All
//         </button>
//       )}
//     </div>

//     {allReports.length > 0 ? (
//       <div className="space-y-6">
//         {bookingDetails.map((booking) => (
//           <div key={booking.booking_id} className="mb-8">
//             <h3 className="text-lg font-semibold text-primary-DEFAULT dark:text-primary-light mb-4">
//               Booking #{booking.booking_id} - {formatDate(booking.date)} at {booking.time}
//             </h3>
            
//             {booking.report && booking.report.length > 0 ? (
//               <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
//                 {booking.report.map((report, reportIndex) => (
//                   <div
//                     key={reportIndex}
//                     className={`p-4 rounded-lg border ${isDark ? 'border-gray-700 bg-gray-700' : 'border-gray-200 bg-gray-50'} transition-all duration-200 hover:shadow-md`}
//                   >
//                     <h4 className="font-bold text-primary-DEFAULT dark:text-primary-light mb-2">
//                       {report.order_report_name || `Report #${reportIndex + 1}`}
//                     </h4>
//                     <p className={`text-sm mb-3 ${isDark ? 'text-gray-400' : 'text-gray-500'}`}>
//                       Created: {format(new Date(report.created_at), 'MMM d, yyyy h:mm a')}
//                     </p>
                    
//                     {report.files && report.files.length > 0 ? (
//                       <div className="space-y-2">
//                         {report.files.map((file, fileIndex) => (
//                           <div key={fileIndex} className="flex justify-between items-center">
//                             <span className={`text-sm truncate ${isDark ? 'text-gray-300' : 'text-gray-700'}`}>
//                               {file.file_name}
//                             </span>
//                             <button
//                               onClick={() => handleDownloadFile(file.file_path, file.file_name)}
//                               className="btn btn-primary rounded-lg px-3 py-1 flex items-center gap-1 text-sm"
//                             >
//                               <FaFileDownload /> Download
//                             </button>
//                           </div>
//                         ))}
//                       </div>
//                     ) : (
//                       <p className={`text-sm ${isDark ? 'text-gray-400' : 'text-gray-500'}`}>
//                         No files available for this report
//                       </p>
//                     )}
//                   </div>
//                 ))}
//               </div>
//             ) : (
//               <div className={`p-4 rounded-lg ${isDark ? 'bg-gray-700' : 'bg-gray-100'}`}>
//                 <p className={isDark ? 'text-gray-400' : 'text-gray-500'}>No reports available for this booking</p>
//               </div>
//             )}
//           </div>
//         ))}
//       </div>
//     ) : (
//       <div className={`p-8 text-center rounded-lg ${isDark ? 'bg-gray-700' : 'bg-gray-100'}`}>
//         <p className={isDark ? 'text-gray-400' : 'text-gray-500'}>No reports available</p>
//       </div>
//     )}
//   </section>
// )}

//       {activeTab === 'payments' && (
//         <section className={`shadow-lg rounded-xl p-6 ${isDark ? 'bg-gray-800' : 'bg-white'} border-t-4 border-secondary-DEFAULT dark:border-secondary-light`}>
//           <h2 className="text-2xl font-semibold text-secondary-DEFAULT dark:text-secondary-light flex items-center gap-2 mb-6">
//             <FaMoneyBillWave /> Payment History
//           </h2>

//           {bookingDetails.length > 0 ? (
//             <div className="overflow-x-auto">
//               <table className="min-w-full">
//                 <thead>
//                   <tr className={`${isDark ? 'bg-gray-700' : 'bg-gray-100'} uppercase text-sm leading-normal`}>
//                     <th className="py-3 px-6 text-left text-primary-DEFAULT dark:text-primary-light">Booking ID</th>
//                     <th className="py-3 px-6 text-left text-primary-DEFAULT dark:text-primary-light">Date</th>
//                     <th className="py-3 px-6 text-left text-primary-DEFAULT dark:text-primary-light">Amount</th>
//                     <th className="py-3 px-6 text-left text-primary-DEFAULT dark:text-primary-light">Status</th>
//                     <th className="py-3 px-6 text-left text-primary-DEFAULT dark:text-primary-light">Method</th>
//                   </tr>
//                 </thead>
//                 <tbody className="text-sm">
//                   {bookingDetails.map((booking) => (
//                     <tr
//                       key={booking.booking_id}
//                       className={`border-b ${isDark ? 'border-gray-700 hover:bg-gray-700' : 'border-gray-200 hover:bg-gray-50'}`}
//                     >
//                       <td className="py-4 px-6">{booking.booking_id}</td>
//                       <td className="py-4 px-6">{formatDate(booking.date)}</td>
//                       <td className="py-4 px-6 font-semibold text-secondary-DEFAULT dark:text-secondary-light">{formatCurrency(booking.rs)}</td>
//                       <td className="py-4 px-6">
//                         <span className={`px-3 py-1 rounded-full text-xs font-semibold ${booking.payment_status === 'paid'
//                           ? 'bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-100'
//                           : 'bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-100'
//                           }`}>
//                           {booking.payment_status}
//                         </span>
//                       </td>
//                       <td className="py-4 px-6">{booking.payment_method}</td>
//                     </tr>
//                   ))}
//                 </tbody>
//               </table>
//             </div>
//           ) : (
//             <div className={`p-8 text-center rounded-lg ${isDark ? 'bg-gray-700' : 'bg-gray-100'}`}>
//               <p className={isDark ? 'text-gray-400' : 'text-gray-500'}>No payment history available</p>
//             </div>
//           )}
//         </section>
//       )}

//       {/* Generate Order Modal */}
//       <Transition appear show={showOrderModal} as={Fragment}>
//         <Dialog as="div" open={showOrderModal} onClose={() => setShowOrderModal(false)}>
//           <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/60 z-[998]" />
//           </Transition.Child>

//           <div className="fixed inset-0 z-[999] overflow-y-auto">
//             <div className="flex min-h-screen items-center justify-center p-4">
//               <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={`panel w-full max-w-md overflow-hidden rounded-lg border-0 p-0 ${isDark ? 'bg-gray-800' : 'bg-white'} shadow-lg`}>
//                   <div className={`flex items-center justify-between px-5 py-3 ${isDark ? 'bg-gray-700' : 'bg-gray-50'}`}>
//                     <div className="text-lg font-bold text-primary-DEFAULT dark:text-primary-light">
//                       Generate New Order
//                     </div>
//                     <button
//                       type="button"
//                       className="text-gray-500 hover:text-gray-700 dark:hover:text-primary"
//                       onClick={() => setShowOrderModal(false)}
//                     >
//                       <FaTimes />
//                     </button>
//                   </div>

//                   <div className="p-5">
//                     <div className="mb-6">
//                       <label htmlFor="key-select" className="block text-sm text-gray-600 dark:text-gray-400 mb-2">
//                         Select a key to include in this order:
//                       </label>

//                       <select
//                         id="key-select"
//                         value={selectedKeys[0] || ""}
//                         onChange={(e) => {
//                           const selectedKey = e.target.value;
//                           setSelectedKeys(selectedKey ? [selectedKey] : []);
//                         }}
//                         className={`form-select w-full rounded-lg border ${isDark
//                             ? 'bg-gray-700 border-gray-600 text-white'
//                             : 'bg-white border-gray-300 text-gray-800'
//                           } p-2 focus:border-primary-DEFAULT focus:ring-primary-DEFAULT`}
//                       >
//                         <option value="">Select a key</option>
//                         {apiKeys.map((key) => {
//                           // Check if this key has already been generated for this customer
//                           const alreadyGenerated = customerData?.data?.booking_details?.some(booking => 
//                             booking.report?.some(report => 
//                               report.order_report_name === key.name
//                             )
//                           );
                          
//                           return (
//                             <option
//                               key={key._id}
//                               value={key.apikey}
//                               disabled={alreadyGenerated}
//                               className={alreadyGenerated ? 'text-gray-400' : ''}
//                             >
//                               {key.name} {alreadyGenerated && '(Already generated)'}
//                             </option>
//                           );
//                         })}
//                       </select>

//                       {selectedKeys.length > 0 && (
//                         <p className="mt-2 text-sm text-primary-DEFAULT dark:text-primary-light">
//                           Selected: {apiKeys.find(k => k.apikey === selectedKeys[0])?.name}
//                         </p>
//                       )}
//                     </div>

//                     <div className="flex justify-end space-x-3 pt-4">
//                       <button
//                         type="button"
//                         onClick={() => setShowOrderModal(false)}
//                         className="btn btn-outline-secondary rounded-lg border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700 transition-all duration-200"
//                       >
//                         Cancel
//                       </button>
//                       <button
//                         type="button"
//                         onClick={handleGenerateOrder}
//                         disabled={selectedKeys.length === 0 || isGenerating}
//                         className={`btn rounded-lg px-4 py-2 flex items-center gap-2 transition-all duration-200
//                             ${selectedKeys.length === 0 || isGenerating
//                             ? 'bg-gray-300 text-gray-700 cursor-not-allowed'
//                             : 'btn-primary text-white bg-primary-DEFAULT hover:bg-primary-light border-primary-DEFAULT hover:border-primary-light shadow-primary hover:shadow-primary-lg'
//                           }`}
//                       >
//                         {isGenerating ? (
//                           <>
//                             <svg className="animate-spin -ml-1 mr-2 h-4 w-4 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
//                               <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
//                               <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"></path>
//                             </svg>
//                             Generating...
//                           </>
//                         ) : 'Generate Order'}
//                       </button>
//                     </div>
//                   </div>
//                 </Dialog.Panel>
//               </Transition.Child>
//             </div>
//           </div>
//         </Dialog>
//       </Transition>
//     </main>
//   );
// };

// export default CustomerHistory;




import React, { useEffect, useState } from 'react';
import { Fragment } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import {
  FaUserMd,
  FaHeartbeat,
  FaNotesMedical,
  FaDownload,
  FaCalendarCheck,
  FaFileDownload,
  FaMoneyBillWave,
  FaFileInvoiceDollar,
  FaTimes,
  FaUser,
  FaPlusCircle,
  FaBox
} from 'react-icons/fa';
import { format } from 'date-fns';
import { CustomerHistoryDetails, generateOrder, viewAPIKEY } from '../../API';
import { useSelector } from 'react-redux';
import { IRootState } from '../../store';
import { showMessage } from '../../general';
import { Dialog, Transition } from '@headlessui/react';
import JSZip from 'jszip';
import { saveAs } from 'file-saver';

interface PackageItem {
  id: number;
  name: string;
  price: string;
  type: string;
}

interface BookingDetails {
  _id: number;
  booking_id: number;
  date: string;
  time: string;
  rs: number;
  status: string;
  payment_status: string;
  payment_method: string;
  doctor_id: number;
  process_status: string;
  package?: PackageItem[];
  addon_id?: any[];
  report?: {
    order_id: number;
    order_status: boolean;
    order_report_name: string;
    created_at: string;
    files?: {
      file_name: string;
      file_path: string;
    }[];
  }[];
}

interface CustomerDetails {
  _id: number;
  firstName: string;
  lastName: string;
  email: string;
  phone: string;
  birthdate: string;
  gender: string;
  address: string;
  city: string;
  state: string;
  zip: string;
  cust_id: string;
  booking_details?: BookingDetails[];
  total_rs: number;
  process_status: string | null;
  order_id: number | number[] | null;
  order_status: boolean;
}

interface ApiResponse {
  status: boolean;
  data: CustomerDetails;
}

interface ApiKey {
  _id: number;
  name: string;
  apikey: string;
  epoch_time: number;
  delete_status: string;
  updated_at: string;
  created_at: string;
}

const CustomerHistory = () => {
  const { customerId } = useParams();
  const navigate = useNavigate();
  const isDark = useSelector((state: IRootState) => state.themeConfig.theme === 'dark' || state.themeConfig.isDarkMode);

  const [customerData, setCustomerData] = useState<ApiResponse | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [activeTab, setActiveTab] = useState('profile');
  const [isGenerating, setIsGenerating] = useState(false);
  const [showOrderModal, setShowOrderModal] = useState(false);
  const [selectedKeys, setSelectedKeys] = useState<string[]>([]);
  const [generatedOrderIds, setGeneratedOrderIds] = useState<number[]>([]);
  const [generatedOrderKeys, setGeneratedOrderKeys] = useState<string[]>([]);
  const [apiKeys, setApiKeys] = useState<ApiKey[]>([]);

  useEffect(() => {
    const fetchCustomerData = async () => {
      try {
        const loggedIn = localStorage.getItem('isLoggedIn') === 'true';
        if (!loggedIn) {
          navigate('/login');
          return;
        }

        if (!customerId) {
          setError('No customer ID provided');
          setLoading(false);
          return;
        }

        const data = await CustomerHistoryDetails(customerId);
        if (data?.status && data.data) {
          setCustomerData(data);
          if (data.data.order_id) {
            setGeneratedOrderIds(
              Array.isArray(data.data.order_id) ? data.data.order_id : [data.data.order_id]
            );
          }
        } else {
          setError('Invalid customer data received');
        }
      } catch (err) {
        setError('Failed to fetch customer data');
        console.error('Error fetching customer data:', err);
      } finally {
        setLoading(false);
      }
    };

    fetchCustomerData();
  }, [navigate, customerId]);

  useEffect(() => {
    if (showOrderModal) {
      const fetchKeys = async () => {
        try {
          const res = await viewAPIKEY();
          if (res.status === "success" && Array.isArray(res.data)) {
            setApiKeys(res.data);
          } else {
            console.error("Invalid API Key response", res);
          }
        } catch (error) {
          console.error("Error fetching API Keys", error);
        }
      };
      fetchKeys();
    }
  }, [showOrderModal]);

  const handleGenerateOrderClick = () => {
    setSelectedKeys([]);
    setShowOrderModal(true);
  };

  const handleGenerateOrder = async () => {
    if (!customerId || selectedKeys.length === 0) {
      showMessage('Please select at least one key', 'error');
      return;
    }

    setIsGenerating(true);

    try {
      const custId = parseInt(customerId);
      const data = await generateOrder(custId, selectedKeys);

      if (data.status === true) {
        showMessage(data.message, 'success');
        setGeneratedOrderKeys(prev => [...prev, ...selectedKeys])
        const updatedData = await CustomerHistoryDetails(customerId);
        if (updatedData?.status && updatedData.data) {
          setCustomerData(updatedData);
          if (updatedData.data.order_id) {
            const newOrderIds = Array.isArray(updatedData.data.order_id)
              ? updatedData.data.order_id
              : [updatedData.data.order_id];
            setGeneratedOrderIds(newOrderIds);
          }
        }
        setShowOrderModal(false);
      } else {
        showMessage(data.message, 'error');
      }
    } catch (error) {
      showMessage('An error occurred while generating the order', 'error');
      console.error('Error generating order:', error);
    } finally {
      setIsGenerating(false);
    }
  };

  const formatPhoneNumber = (phoneNumber: string) => {
    const cleaned = phoneNumber.replace(/\D/g, '');
    if (cleaned.length === 12) {
      return `+${cleaned.slice(0, 2)} (${cleaned.slice(2, 5)}) ${cleaned.slice(5, 8)}-${cleaned.slice(8)}`;
    }
    return phoneNumber;
  };

  const handleDownloadAll = async () => {
    if (!customerData?.data.booking_details) return;

    // Collect all files correctly from nested structure
    const allFiles = customerData.data.booking_details.flatMap(
      (booking: any) => 
        (booking.report || []).flatMap(
          (report: any) => 
            (report.files || []).map(file => ({
              ...file,
              file_url: file.file_path
            }))
        )
    );

    if (allFiles.length === 0) {
      showMessage("No files available for download", "error");
      return;
    }

    // Single file → direct download
    if (allFiles.length === 1) {
      const file = allFiles[0];
      handleDownloadFile(file.file_url, file.file_name);
      showMessage(`${file.file_name} downloaded successfully`, "success");
      return;
    }

    // Multiple files → ZIP download
    const zip = new JSZip();
    for (const file of allFiles) {
      try {
        const response = await fetch(file.file_url);
        if (!response.ok) {
          throw new Error(`Failed to fetch ${file.file_name}`);
        }
        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");
      }
    }

    try {
      const content = await zip.generateAsync({ type: "blob" });
      saveAs(content, "all_bookings_reports.zip");
      showMessage("All reports downloaded successfully (ZIP)", "success");
    } catch (err) {
      console.error("Error generating ZIP:", err);
      showMessage("Failed to generate ZIP file", "error");
    }
  };

  const handleDownloadFile = (url: string, filename: string) => {
    const link = document.createElement('a');
    link.href = url;
    link.download = filename;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  };

  const formatDate = (dateString: string) => {
    try {
      if (dateString.includes('/')) {
        const [day, month, year] = dateString.split('/');
        return format(new Date(`${year}-${month}-${day}`), 'd MMM yyyy');
      }
      return format(new Date(dateString), 'd MMM yyyy');
    } catch {
      return dateString;
    }
  };

  const formatCurrency = (amount: string | number) => {
    return new Intl.NumberFormat('en-US', {
      style: 'currency',
      currency: 'USD'
    }).format(typeof amount === 'string' ? parseFloat(amount) : amount);
  };

  // Helper function to get readable package type labels
  const getPackageTypeLabel = (type: string) => {
    switch(type) {
      case 'package': return 'Main Package';
      case 'stand-alone': return 'Stand Alone';
      case 'options-1': return 'Option 1';
      case 'options-2': return 'Option 2';
      case 'options-3': return 'Option 3';
      default: return 'Additional';
    }
  };

  if (loading) {
    return (
      <div className="flex justify-center items-center h-64">
        <div className="w-12 h-12 border-t-4 border-primary-DEFAULT border-solid rounded-full animate-spin"></div>
      </div>
    );
  }

  if (error) {
    return (
      <div className="rounded-lg bg-red-100 dark:bg-red-900/50 text-red-600 dark:text-red-300 px-4 py-3 text-center">
        {error}
      </div>
    );
  }

  if (!customerData?.data) {
    return (
      <div className="text-center p-4 text-gray-600 dark:text-gray-300">
        No customer data found
      </div>
    );
  }

  const { data } = customerData;
  const bookingDetails = data.booking_details || [];
  const allReports = bookingDetails.flatMap(booking =>
    (booking.report || []).flatMap(report => 
      (report.files || []).map(file => ({
        ...file,
        bookingId: booking.booking_id,
        date: booking.date,
        reportName: report.order_report_name,
        created: report.created_at
      }))
    )
  );

  const isButtonDisabled = data.process_status !== "processing";

  return (
    <main className={`container mx-auto p-4 md:p-6 ${isDark ? 'bg-gray-900' : 'bg-gray-50'}`}>
      <div className="mb-6 flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
        <h1 className="text-3xl font-bold text-secondary dark:text-white mb-6">
          Customer History
        </h1>
        <button
          onClick={() => navigate("/customer")}
          className="btn btn-primary rounded-lg px-4 py-2 text-white bg-primary-DEFAULT hover:bg-primary-light border-primary-DEFAULT hover:border-primary-light transition-all duration-200 shadow-primary hover:shadow-primary-lg"
        >
          Back 
        </button>
      </div>

      <div className="flex border-b border-gray-300 dark:border-gray-600 mb-6 overflow-x-auto">
        {[
          { id: 'profile', label: 'Profile', icon: <FaUser className="mr-2" /> },
          { id: 'bookings', label: 'Bookings', icon: <FaCalendarCheck className="mr-2" /> },
          { id: 'reports', label: 'Reports', icon: <FaNotesMedical className="mr-2" /> },
          { id: 'payments', label: 'Payments', icon: <FaMoneyBillWave className="mr-2" /> }
        ].map(tab => (
          <button
            key={tab.id}
            className={`flex items-center px-4 py-3 border-b-2 transition-all duration-200 ${activeTab === tab.id
              ? 'border-primary-DEFAULT dark:border-primary-light text-primary-DEFAULT dark:text-primary-light font-semibold'
              : 'border-transparent text-gray-600 dark:text-gray-300 hover:text-primary-DEFAULT dark:hover:text-primary-light'
              }`}
            onClick={() => setActiveTab(tab.id)}
          >
            {tab.icon} {tab.label}
          </button>
        ))}
      </div>

      {activeTab === 'profile' && (
        <section className={`shadow-lg rounded-xl p-6 ${isDark ? 'bg-gray-800' : 'bg-white'} border-t-4 border-primary-DEFAULT dark:border-primary-light`}>
          <div className="flex flex-col md:flex-row gap-6">
            <div className="flex-shrink-0">
              <div className="w-40 h-40 rounded-full border-4 border-primary/20 dark:border-primary-dark-light flex items-center justify-center bg-primary/10 dark:bg-primary-dark-light">
                <span className="text-5xl font-bold text-primary-DEFAULT dark:text-primary-light">
                  {data.firstName.charAt(0)}
                </span>
              </div>
            </div>

            <div className="flex-1">
              <h1 className="text-3xl font-bold text-primary-DEFAULT dark:text-primary-light">
                {data.firstName} {data.lastName}
              </h1>
              <p className={`text-sm mb-4 ${isDark ? 'text-gray-400' : 'text-gray-500'}`}>
                Customer ID: #{data.cust_id || 'N/A'}
              </p>

              <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
                <div>
                  <p className="font-semibold text-primary-DEFAULT dark:text-primary-light">Email</p>
                  <p className={isDark ? 'text-gray-300' : 'text-gray-700'}>{data.email}</p>
                </div>
                <div>
                  <p className="font-semibold text-primary-DEFAULT dark:text-primary-light">Phone</p>
                  <p className={isDark ? 'text-gray-300' : 'text-gray-700'}>{formatPhoneNumber(data.phone)}</p>
                </div>
                <div>
                  <p className="font-semibold text-primary-DEFAULT dark:text-primary-light">Date of Birth</p>
                  <p className={isDark ? 'text-gray-300' : 'text-gray-700'}>{formatDate(data.birthdate)}</p>
                </div>
                <div>
                  <p className="font-semibold text-primary-DEFAULT dark:text-primary-light">Gender</p>
                  <p className={isDark ? 'text-gray-300' : 'text-gray-700'}>{data.gender}</p>
                </div>
                <div>
                  <p className="font-semibold text-primary-DEFAULT dark:text-primary-light">Address</p>
                  <p className={isDark ? 'text-gray-300' : 'text-gray-700'}>{data.address}</p>
                </div>
                <div>
                  <p className="font-semibold text-primary-DEFAULT dark:text-primary-light">Location</p>
                  <p className={isDark ? 'text-gray-300' : 'text-gray-700'}>{data.city}, {data.state} {data.zip}</p>
                </div>
              </div>

              {generatedOrderIds.length > 0 && (
                <div className="mt-6">
                  <h3 className="font-semibold text-primary-DEFAULT dark:text-primary-light mb-2">
                    Generated Reports:
                  </h3>
                  <div className="space-y-2">
                    {customerData.data.booking_details?.flatMap(booking => 
                      booking.report?.map((report, index) => (
                        <div key={index} className="flex items-center gap-2">
                          <span className="px-3 py-1 bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-100 rounded-full text-sm font-medium">
                            #{report.order_id}
                          </span>
                          <span className={isDark ? 'text-gray-300' : 'text-gray-700'}>
                            {report.order_report_name}
                          </span>
                        </div>
                      ))
                    )}
                  </div>
                </div>
              )}
              <div className="flex flex-wrap gap-4 mt-6">
                {allReports.length > 0 && (
                  <button
                    onClick={handleDownloadAll}
                    className="btn btn-primary rounded-lg px-4 py-2 flex items-center gap-2"
                  >
                    <FaDownload /> Download All Reports
                  </button>
                )}

                {/* <button
                  onClick={handleGenerateOrderClick}
                  disabled={isButtonDisabled}
                  className={`px-4 py-2 rounded-lg flex items-center gap-2 transition-all duration-200
                    ${isButtonDisabled 
                      ? "bg-gray-400 cursor-not-allowed"
                      : "bg-primary hover:bg-primary-light text-white shadow-primary hover:shadow-primary-lg"
                    }
                  `}
                >
                  <FaFileInvoiceDollar /> Generate Order
                </button> */}
              </div>
            </div>
          </div>
        </section>
      )}

      {activeTab === 'bookings' && (
        <section className={`shadow-lg rounded-xl p-6 ${isDark ? 'bg-gray-800' : 'bg-white'} border-t-4 border-secondary-DEFAULT dark:border-secondary-light`}>
          <h2 className="text-2xl font-semibold text-secondary-DEFAULT dark:text-secondary-light flex items-center gap-2 mb-6">
            <FaCalendarCheck /> Booking History
          </h2>

          {bookingDetails.length > 0 ? (
            <div className="space-y-4">
              {bookingDetails.map((booking) => {
                // Separate main package from additional packages
                const packages = booking.package || [];
                const mainPackage = packages.find((p: PackageItem) => p.type === "package");
                const additionalPackages = packages.filter((p: PackageItem) => p.type !== "package");
                
                return (
                  <div
                    key={booking.booking_id}
                    className={`p-5 rounded-lg ${isDark ? 'bg-gray-700' : 'bg-gray-50'} flex flex-col md:flex-row justify-between items-start md:items-center gap-4 transition-all duration-200 hover:shadow-md`}
                  >
                    <div className="flex-1">
                      <div className="flex items-center gap-3 mb-2">
                        <h3 className="font-bold text-lg text-primary-DEFAULT dark:text-primary-light">
                          Booking #{booking.booking_id}
                        </h3>
                        <span className={`px-3 py-1 rounded-full text-xs font-semibold ${booking.status === 'approved'
                          ? 'bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-100'
                          : booking.status === 'pending'
                            ? 'bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-100'
                            : 'bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-100'
                          }`}>
                          {booking.status}
                        </span>
                      </div>

                      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                        <div>
                          <p className={`text-sm ${isDark ? 'text-gray-400' : 'text-gray-500'}`}>Date & Time</p>
                          <p className={isDark ? 'text-gray-300' : 'text-gray-700'}>{formatDate(booking.date)} at {booking.time}</p>
                        </div>
                        <div>
                          <p className={`text-sm ${isDark ? 'text-gray-400' : 'text-gray-500'}`}>Amount</p>
                          <p className="font-semibold text-secondary-DEFAULT dark:text-secondary-light">{formatCurrency(booking.rs)}</p>
                        </div>
                        <div>
                          <p className={`text-sm ${isDark ? 'text-gray-400' : 'text-gray-500'}`}>Payment</p>
                          <p className={isDark ? 'text-gray-300' : 'text-gray-700'}>
                            {booking.payment_status} ({booking.payment_method})
                          </p>
                        </div>
                      </div>

                      {/* Main Package Information */}
                      {mainPackage && (
                        <div className="mt-4">
                          <p className={`text-sm font-semibold ${isDark ? 'text-gray-400' : 'text-gray-500'} flex items-center gap-1`}>
                            <FaBox className="text-primary-DEFAULT" /> Main Package
                          </p>
                          <p className={isDark ? 'text-gray-300' : 'text-gray-700'}>
                            {mainPackage.name} - {formatCurrency(mainPackage.price)}
                          </p>
                        </div>
                      )}

                      {/* Additional Packages Information */}
                      {additionalPackages.length > 0 && (
                        <div className="mt-4">
                          <p className={`text-sm font-semibold ${isDark ? 'text-gray-400' : 'text-gray-500'} flex items-center gap-1`}>
                            <FaPlusCircle className="text-primary-DEFAULT" /> Additional Packages
                          </p>
                          <ul className="mt-2 space-y-2">
                            {additionalPackages.map((pkg) => (
                              <li key={pkg.id} className="flex justify-between items-center">
                                <span className={isDark ? 'text-gray-300' : 'text-gray-700'}>
                                  {pkg.name} <span className="text-xs text-gray-500">({getPackageTypeLabel(pkg.type)})</span>
                                </span>
                                <span className="font-semibold text-secondary-DEFAULT dark:text-secondary-light">
                                  {formatCurrency(pkg.price)}
                                </span>
                              </li>
                            ))}
                          </ul>
                        </div>
                      )}
                    </div>
                  </div>
                );
              })}
            </div>
          ) : (
            <div className={`p-8 text-center rounded-lg ${isDark ? 'bg-gray-700' : 'bg-gray-100'}`}>
              <p className={isDark ? 'text-gray-400' : 'text-gray-500'}>No booking history available</p>
            </div>
          )}
        </section>
      )}

      {activeTab === 'reports' && (
        <section className={`shadow-lg rounded-xl p-6 ${isDark ? 'bg-gray-800' : 'bg-white'} border-t-4 border-primary-DEFAULT dark:border-primary-light`}>
          <div className="flex justify-between items-center mb-6">
            <h2 className="text-2xl font-semibold text-primary-DEFAULT dark:text-primary-light flex items-center gap-2">
              <FaNotesMedical /> Medical Reports
            </h2>
            {allReports.length > 0 && (
              <button
                onClick={handleDownloadAll}
                className="btn btn-primary rounded-lg px-4 py-2 flex items-center gap-2"
              >
                <FaDownload /> Download All
              </button>
            )}
          </div>

          {allReports.length > 0 ? (
            <div className="space-y-6">
              {bookingDetails.map((booking) => (
                <div key={booking.booking_id} className="mb-8">
                  <h3 className="text-lg font-semibold text-primary-DEFAULT dark:text-primary-light mb-4">
                    Booking #{booking.booking_id} - {formatDate(booking.date)} at {booking.time}
                  </h3>
                  
                  {booking.report && booking.report.length > 0 ? (
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                      {booking.report.map((report, reportIndex) => (
                        <div
                          key={reportIndex}
                          className={`p-4 rounded-lg border ${isDark ? 'border-gray-700 bg-gray-700' : 'border-gray-200 bg-gray-50'} transition-all duration-200 hover:shadow-md`}
                        >
                          <h4 className="font-bold text-primary-DEFAULT dark:text-primary-light mb-2">
                            {report.order_report_name || `Report #${reportIndex + 1}`}
                          </h4>
                          <p className={`text-sm mb-3 ${isDark ? 'text-gray-400' : 'text-gray-500'}`}>
                            Created: {format(new Date(report.created_at), 'MMM d, yyyy h:mm a')}
                          </p>
                          
                          {report.files && report.files.length > 0 ? (
                            <div className="space-y-2">
                              {report.files.map((file, fileIndex) => (
                                <div key={fileIndex} className="flex justify-between items-center">
                                  <span className={`text-sm truncate ${isDark ? 'text-gray-300' : 'text-gray-700'}`}>
                                    {file.file_name}
                                  </span>
                                  <button
                                    onClick={() => handleDownloadFile(file.file_path, file.file_name)}
                                    className="btn btn-primary rounded-lg px-3 py-1 flex items-center gap-1 text-sm"
                                  >
                                    <FaFileDownload /> Download
                                  </button>
                                </div>
                              ))}
                            </div>
                          ) : (
                            <p className={`text-sm ${isDark ? 'text-gray-400' : 'text-gray-500'}`}>
                              No files available for this report
                            </p>
                          )}
                        </div>
                      ))}
                    </div>
                  ) : (
                    <div className={`p-4 rounded-lg ${isDark ? 'bg-gray-700' : 'bg-gray-100'}`}>
                      <p className={isDark ? 'text-gray-400' : 'text-gray-500'}>No reports available for this booking</p>
                    </div>
                  )}
                </div>
              ))}
            </div>
          ) : (
            <div className={`p-8 text-center rounded-lg ${isDark ? 'bg-gray-700' : 'bg-gray-100'}`}>
              <p className={isDark ? 'text-gray-400' : 'text-gray-500'}>No reports available</p>
            </div>
          )}
        </section>
      )}

      {activeTab === 'payments' && (
        <section className={`shadow-lg rounded-xl p-6 ${isDark ? 'bg-gray-800' : 'bg-white'} border-t-4 border-secondary-DEFAULT dark:border-secondary-light`}>
          <h2 className="text-2xl font-semibold text-secondary-DEFAULT dark:text-secondary-light flex items-center gap-2 mb-6">
            <FaMoneyBillWave /> Payment History
          </h2>

          {bookingDetails.length > 0 ? (
            <div className="overflow-x-auto">
              <table className="min-w-full">
                <thead>
                  <tr className={`${isDark ? 'bg-gray-700' : 'bg-gray-100'} uppercase text-sm leading-normal`}>
                    <th className="py-3 px-6 text-left text-primary-DEFAULT dark:text-primary-light">Booking ID</th>
                    <th className="py-3 px-6 text-left text-primary-DEFAULT dark:text-primary-light">Date</th>
                    <th className="py-3 px-6 text-left text-primary-DEFAULT dark:text-primary-light">Amount</th>
                    <th className="py-3 px-6 text-left text-primary-DEFAULT dark:text-primary-light">Status</th>
                    <th className="py-3 px-6 text-left text-primary-DEFAULT dark:text-primary-light">Method</th>
                  </tr>
                </thead>
                <tbody className="text-sm">
                  {bookingDetails.map((booking) => (
                    <tr
                      key={booking.booking_id}
                      className={`border-b ${isDark ? 'border-gray-700 hover:bg-gray-700' : 'border-gray-200 hover:bg-gray-50'}`}
                    >
                      <td className="py-4 px-6">{booking.booking_id}</td>
                      <td className="py-4 px-6">{formatDate(booking.date)}</td>
                      <td className="py-4 px-6 font-semibold text-secondary-DEFAULT dark:text-secondary-light">{formatCurrency(booking.rs)}</td>
                      <td className="py-4 px-6">
                        <span className={`px-3 py-1 rounded-full text-xs font-semibold ${booking.payment_status === 'paid'
                          ? 'bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-100'
                          : 'bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-100'
                          }`}>
                          {booking.payment_status}
                        </span>
                      </td>
                      <td className="py-4 px-6">{booking.payment_method}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          ) : (
            <div className={`p-8 text-center rounded-lg ${isDark ? 'bg-gray-700' : 'bg-gray-100'}`}>
              <p className={isDark ? 'text-gray-400' : 'text-gray-500'}>No payment history available</p>
            </div>
          )}
        </section>
      )}

      {/* Generate Order Modal */}
      <Transition appear show={showOrderModal} as={Fragment}>
        <Dialog as="div" open={showOrderModal} onClose={() => setShowOrderModal(false)}>
          <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/60 z-[998]" />
          </Transition.Child>

          <div className="fixed inset-0 z-[999] overflow-y-auto">
            <div className="flex min-h-screen items-center justify-center p-4">
              <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={`panel w-full max-w-md overflow-hidden rounded-lg border-0 p-0 ${isDark ? 'bg-gray-800' : 'bg-white'} shadow-lg`}>
                  <div className={`flex items-center justify-between px-5 py-3 ${isDark ? 'bg-gray-700' : 'bg-gray-50'}`}>
                    <div className="text-lg font-bold text-primary-DEFAULT dark:text-primary-light">
                      Generate New Order
                    </div>
                    <button
                      type="button"
                      className="text-gray-500 hover:text-gray-700 dark:hover:text-primary"
                      onClick={() => setShowOrderModal(false)}
                    >
                      <FaTimes />
                    </button>
                  </div>

                  <div className="p-5">
                    <div className="mb-6">
                      <label htmlFor="key-select" className="block text-sm text-gray-600 dark:text-gray-400 mb-2">
                        Select a key to include in this order:
                      </label>

                      <select
                        id="key-select"
                        value={selectedKeys[0] || ""}
                        onChange={(e) => {
                          const selectedKey = e.target.value;
                          setSelectedKeys(selectedKey ? [selectedKey] : []);
                        }}
                        className={`form-select w-full rounded-lg border ${isDark
                            ? 'bg-gray-700 border-gray-600 text-white'
                            : 'bg-white border-gray-300 text-gray-800'
                          } p-2 focus:border-primary-DEFAULT focus:ring-primary-DEFAULT`}
                      >
                        <option value="">Select a key</option>
                        {apiKeys.map((key) => {
                          // Check if this key has already been generated for this customer
                          const alreadyGenerated = customerData?.data?.booking_details?.some(booking => 
                            booking.report?.some(report => 
                              report.order_report_name === key.name
                            )
                          );
                          
                          return (
                            <option
                              key={key._id}
                              value={key.apikey}
                              disabled={alreadyGenerated}
                              className={alreadyGenerated ? 'text-gray-400' : ''}
                            >
                              {key.name} {alreadyGenerated && '(Already generated)'}
                            </option>
                          );
                        })}
                      </select>

                      {selectedKeys.length > 0 && (
                        <p className="mt-2 text-sm text-primary-DEFAULT dark:text-primary-light">
                          Selected: {apiKeys.find(k => k.apikey === selectedKeys[0])?.name}
                        </p>
                      )}
                    </div>

                    <div className="flex justify-end space-x-3 pt-4">
                      <button
                        type="button"
                        onClick={() => setShowOrderModal(false)}
                        className="btn btn-outline-secondary rounded-lg border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700 transition-all duration-200"
                      >
                        Cancel
                      </button>
                      <button
                        type="button"
                        onClick={handleGenerateOrder}
                        disabled={selectedKeys.length === 0 || isGenerating}
                        className={`btn rounded-lg px-4 py-2 flex items-center gap-2 transition-all duration-200
                            ${selectedKeys.length === 0 || isGenerating
                            ? 'bg-gray-300 text-gray-700 cursor-not-allowed'
                            : 'btn-primary text-white bg-primary-DEFAULT hover:bg-primary-light border-primary-DEFAULT hover:border-primary-light shadow-primary hover:shadow-primary-lg'
                          }`}
                      >
                        {isGenerating ? (
                          <>
                            <svg className="animate-spin -ml-1 mr-2 h-4 w-4 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                              <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
                              <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"></path>
                            </svg>
                            Generating...
                          </>
                        ) : 'Generate Order'}
                      </button>
                    </div>
                  </div>
                </Dialog.Panel>
              </Transition.Child>
            </div>
          </div>
        </Dialog>
      </Transition>
    </main>
  );
};

export default CustomerHistory;