import { Link, useNavigate } from 'react-router-dom';
import { DataTable, DataTableSortStatus } from 'mantine-datatable';
import { useCallback, useEffect, useState, Fragment, useRef } from 'react';
import Flatpickr from 'react-flatpickr';
import 'flatpickr/dist/flatpickr.css';
import Tippy from '@tippyjs/react';
import 'tippy.js/dist/tippy.css';
import { useDispatch, useSelector } from 'react-redux';
import AutoCallerModal from '../../components/AutoCallerModal';
import { IRootState } from '../../store';
import { setPageTitle } from '../../store/themeConfigSlice';
import { Dialog, Transition } from '@headlessui/react';
import { showMessage } from '../../general';
import { assignDoctor, base_url, getDoctorsList, updateAppointmentStatus, EditBooking, generateOrder, viewAPIKEY, CustomerHistoryDetails, CustomReport } from '../../API';
import {
  FaTimes,
  FaEye,
  FaKey,
  FaEdit,
  FaDownload,
  FaFilter,
  FaUpload,
  FaChevronRight,
  FaChevronDown,
  FaFile,
  FaUserPlus
} from 'react-icons/fa';
import { ImSpinner2 } from "react-icons/im";
import { Group, Menu, ActionIcon, Select, TextInput, Text, Card, Grid, Badge, Button, Collapse } from '@mantine/core';
import { hasAccess } from '../../../../../utils/hasAccess';
import { DateTime } from "luxon";
import { debounce } from 'lodash';
import { useLoader } from '../../store/LoaderProvider';

interface ApiKey {
  _id: string;
  apikey: string;
  name: string;
}

interface OrderInfo {
  id: number;
  keyName: string;
  keyValue: string;
  date: string;
}

interface Report {
  order_id: number;
  order_status: boolean;
  order_report_name: string;
  created_at: string;
  files: any[];
}

const OrderSorting = () => {
  const dispatch = useDispatch();
  const navigate = useNavigate();
  const userRole = localStorage.getItem('role');
  const isDark = useSelector((state: IRootState) => state.themeConfig.theme === 'dark' || state.themeConfig.isDarkMode);
  const isRtl = useSelector((state: IRootState) => state.themeConfig.rtlClass) === 'rtl';

  useEffect(() => {
    const loggedIn = localStorage.getItem('isLoggedIn') === 'true';
    if (loggedIn) {
      navigate('/booking');
    } else {
      navigate('/login');
    }
    dispatch(setPageTitle('Customer Details'));
  }, [dispatch, navigate]);
  const { showLoader, hideLoader } = useLoader();
  // State variables
  const PAGE_SIZES = [10, 20, 30, 50, 100];
  const [page, setPage] = useState(1);
  const [pageSize, setPageSize] = useState(PAGE_SIZES[4]);
  const [records, setRecords] = useState<any[]>([]);
  const [totalRecords, setTotalRecords] = useState(0);
  const [sortStatus, setSortStatus] = useState<DataTableSortStatus>({ columnAccessor: 'booking_id', direction: 'desc' });
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [doctors, setDoctors] = useState<any[]>([]);
  const [columnFilters, setColumnFilters] = useState<Record<string, any>>({});
  const [appliedFilters, setAppliedFilters] = useState<Record<string, any>>({});
  const [activeTab, setActiveTab] = useState<'booking' | 'completed'>('booking');
  const [showCallerModal, setShowCallerModal] = useState(false);
  const [selectedBookingForCall, setSelectedBookingForCall] = useState<any>(null);

  // Edit modal states
  const [showEditModal, setShowEditModal] = useState(false);
  const [editBookingData, setEditBookingData] = useState<any>(null);
  const [availableEditTimeSlots, setAvailableEditTimeSlots] = useState<string[]>([]);
  const [editDate, setEditDate] = useState('');
  const [editTime, setEditTime] = useState('');
  const [isFetchingSlots, setIsFetchingSlots] = useState(false);
  const [isModalLoading, setIsModalLoading] = useState(false);

  // Transection ID Modal
  const [showPaymentModal, setShowPaymentModal] = useState(false);
  const [selectedBooking, setSelectedBooking] = useState<any>(null);
  const [transactionId, setTransactionId] = useState("");
  const [paymentMode, setPaymentMode] = useState("Cash");
  const [isPaymentUpdating, setIsPaymentUpdating] = useState(false);

  // Order generation states
  const [isGenerating, setIsGenerating] = useState(false);
  const [showOrderModal, setShowOrderModal] = useState(false);
  const [showOrderViewModal, setShowOrderViewModal] = useState(false);
  const [showReportModal, setShowReportModal] = useState(false);
  const [showUserReportModal, setShowUserReportModal] = useState(false);
  const [selectedKeys, setSelectedKeys] = useState<string>('');
  const [generatedOrderIds, setGeneratedOrderIds] = useState<number[]>([]);
  const [apiKeys, setApiKeys] = useState<ApiKey[]>([]);
  const [customerId, setCustomerId] = useState<string>('');
  const [orderInfo, setOrderInfo] = useState<OrderInfo[]>([]);
  const [reports, setReports] = useState<Report[]>([]);
  const [selectedOrderRow, setSelectedOrderRow] = useState<any>(null);
  const [alreadyUsedKeys, setAlreadyUsedKeys] = useState<string[]>([]);
  const [localUsedKeys, setLocalUsedKeys] = useState<string[]>([]);
  const [downloadingId, setDownloadingId] = useState<string | null>(null);
  const [downloadProgress, setDownloadProgress] = useState<{ [key: string]: number }>({});
  const filterDebouncers = useRef<Record<string, ReturnType<typeof debounce>>>({});
  const loaderRef = useRef({ showLoader, hideLoader });
  const previousProcessFilter = useRef<string | undefined>();

  // Manual row expansion state

  const [showUploadModal, setShowUploadModal] = useState(false);
  const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
  const [uploading, setUploading] = useState(false);
  const [uploadBookingId, setUploadBookingId] = useState<number | null>(null);


  useEffect(() => {
    loaderRef.current = { showLoader, hideLoader };
  }, [showLoader, hideLoader]);



  const permissions = JSON.parse(localStorage.getItem("permissions") || "[]");
  const role = localStorage.getItem("role")

  // Toggle row expansion
  const [expandedRows, setExpandedRows] = useState<Set<number | string>>(new Set());

  const toggleRow = (bookingId: number | string) => {
    setExpandedRows((prev) => {
      const newSet = new Set(prev);
      if (newSet.has(bookingId)) {
        newSet.delete(bookingId);
      } else {
        newSet.clear(); // allow only one open at a time
        newSet.add(bookingId);
      }
      return newSet;
    });
  };


  // Fetch customer data
  const fetchCustomerData = useCallback(async () => {
    setLoading(true);
    setError(null);
    loaderRef.current.showLoader();

    try {
      const userEmail = localStorage.getItem('email') || '';
      const filtersPayload: Record<string, any> = { ...appliedFilters };

      const endpoint = activeTab === 'completed' ? 'get_booking_completed' : 'get_booking_customers';
      const requestBody: Record<string, any> = {
        email: userEmail,
        page,
        per_page: pageSize,
        sort_by: sortStatus.columnAccessor,
        sort_dir: sortStatus.direction,
      };

      if (activeTab === 'completed') {
        requestBody.process_status = 'completed';

        if (filtersPayload.payment_status) {
          requestBody.payment_status = filtersPayload.payment_status;
        }

        if (filtersPayload.status) {
          requestBody.status = filtersPayload.status;
        }

        if (filtersPayload.firstName) {
          requestBody.name = filtersPayload.firstName;
        }

        if (filtersPayload.booking_id) {
          requestBody.booking_id = filtersPayload.booking_id;
        }

        if (filtersPayload.doctor_id) {
          requestBody.doctor_id = filtersPayload.doctor_id;
        }

        if (filtersPayload.payment_method) {
          requestBody.payment_method = filtersPayload.payment_method;
        }
      } else {
        requestBody.filters = filtersPayload;
      }

      const response = await fetch(`${base_url}${endpoint}`, {
        method: 'POST',
        body: JSON.stringify(requestBody),
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json',
        },
      });

      const data = await response.json();

      if (data.status === 'success' && Array.isArray(data.data)) {
        const formattedData = data.data.map((item: any, index: number) => {
          const packages = Array.isArray(item.package)
            ? item.package
            : item.package
              ? [item.package]
              : [];

          return {
            id: item.booking_id ?? item._id ?? index + 1,
            firstName: capitalize(`${item.firstName ?? ''} ${item.lastName ?? ''}`.trim()),
            email: item.email,
            phone: formatPhoneNumber(item.phone),
            booking_id: item.booking_id,
            insurance_name: item.insurance_name,
            status: capitalize(item.status),
            process_status: (item.process_status || 'pending').toLowerCase(),
            payment_status: capitalize(item.payment_status),
            date: item.date ?? '',
            created_at: item.created_at_formatted || item.created_at || '',
            time: item.time,
            rs: item.rs,
            transaction_id: item.transaction_id,
            payment_method: capitalize(item.payment_method),
            doctor_id: item.doctor_id || null,
            customer_id: item.customer_id ?? item.cust_id ?? null,
            order_ids: Array.isArray(item.report) ? item.report.map((r: any) => r.order_id) : [],
            order_info: Array.isArray(item.report)
              ? item.report.map((report: any) => ({
                id: report.order_id,
                order_id: report.order_id,
                keyName: report.order_report_name,
                keyValue: '',
                date: report.created_at,
                files: report.files || [],
              }))
              : [],
            packagesByType: packages.reduce((acc: any, pkg: any) => {
              if (!acc[pkg.type]) acc[pkg.type] = [];
              acc[pkg.type].push(pkg);
              return acc;
            }, {}),
          };
        });

        const sortedByBookingId = [...formattedData].sort((a, b) => {
          const aId = Number(a.booking_id) || 0;
          const bId = Number(b.booking_id) || 0;
          return bId - aId;
        });

        setRecords(sortedByBookingId);
        const rowsCount = data.meta?.total
          ?? data.total_bookings
          ?? data.total_customers
          ?? sortedByBookingId.length;

        setTotalRecords(rowsCount);
      } else {
        setRecords([]);
        setTotalRecords(0);
        setError(data.message || 'Failed to load booking data.');
      }
    } catch (err) {
      console.error(err);
      setError('Failed to load booking data. Please try again later.');
      setRecords([]);
      setTotalRecords(0);
    } finally {
      loaderRef.current.hideLoader();
      setLoading(false);
    }
  }, [page, pageSize, sortStatus.columnAccessor, sortStatus.direction, appliedFilters, activeTab]);

  // Fetch doctors list
  const fetchDoctors = async () => {
    try {
      // Get current date and time in America/Chicago timezone
      const chicagoNow = DateTime.now().setZone('America/Chicago');

      const payload = {
        date: chicagoNow.toFormat('yyyy-MM-dd'),  // e.g., "22-09-2025"
        time: chicagoNow.toFormat('HH:mm')        // e.g., "01:10"
      };

      const response = await getDoctorsList(payload);

      if (response.status === true) {
        setDoctors(response.data);
      }
    } catch (error) {
      console.error('Error fetching doctorsss:', error);
    }
  };

  // Initial data loading
  useEffect(() => {
    fetchDoctors();
  }, []);

  useEffect(() => {
    const handler = setTimeout(() => {
      fetchCustomerData();
    }, 250);

    return () => clearTimeout(handler);
  }, [fetchCustomerData]);

  // Reset page when pageSize changes
  useEffect(() => {
    setPage(1);
  }, [pageSize]);

  // Filter configurations for each column
  const filterConfigs: any = {
    booking_id: { type: 'text' },
    firstName: { type: 'text' },
    payment_status: {
      type: 'select',
      options: [
        { value: 'Unpaid', label: 'Unpaid' },
        { value: 'Paid', label: 'Fully Paid' },
        // { value: 'Partially_paid', label: 'Partially Paid' }
      ]
    },
    status: {
      type: 'select',
      options: ['Pending', 'Approved', 'Rejected']
    },
    process_status: {
      type: 'select',
      options: [
        { value: 'pending', label: 'Pending' },
        { value: 'processing', label: 'Processing' },
        // { value: 'completed', label: 'Completed' }
      ]
    },
    doctor_id: {
      type: 'select',
      options: doctors.map((d: any) => ({ value: d.id.toString(), label: d.name }))
    },
    payment_method: {
      type: 'select',
      options: ['Cash', 'Online']
    },
  };


  const handlePaymentStatusChange = (row: any, newStatus: string) => {
    if (row.payment_status === "Unpaid" && newStatus === "Paid") {
      setSelectedBooking(row);
      setShowPaymentModal(true);
    } else {
      updatePaymentStatus(row, newStatus);
    }
  };



  const updatePaymentStatus = async (row: any, newStatus: string, txnId?: string, payMethod?: string) => {
    setIsPaymentUpdating(true);
     showLoader( );
    try {
      const response = await fetch(`${base_url}updateBooking`, {
        method: 'POST',
        body: JSON.stringify({
          booking_id: row.booking_id,
          payment_status: newStatus,
          transaction_id: txnId || null,
          payment_method: payMethod || null,
        }),
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json',
        },
      });

      const data = await response.json();
      if (data.status === 'success') {
        fetchCurrentData();
        showMessage(data.message, data.status);

      } else {
        showMessage(data.message, data.status);
        fetchCurrentData();
      }
    } catch (error) {
      console.error('Error updating payment status:', error);
      showMessage('An error occurred while updating the payment status.', 'error');
       hideLoader( );
    } finally {
      setIsPaymentUpdating(false);
      setShowPaymentModal(false);
      setTransactionId("");
      setPaymentMode("Cash");
      setSelectedBooking(null);
       hideLoader( );
    }
  };


  // Handle status change (approve/reject)
  const handleStatusClick = async (row: any, newStatus: string) => {
    console.log('Row data:', row);
    showLoader( );
    try {
      const endpoint = newStatus === 'Approved' ? 'approve_mri' : 'reject_mri';

      // Payload (always include date & time)
      let payload: any = {
        booking_id: row.booking_id,
        status: newStatus.toLowerCase(),
        date: row.date,
        time: row.time,
      };

      const response = await fetch(`${base_url}${endpoint}`, {
        method: 'POST',
        body: JSON.stringify(payload),
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json',
        },
      });

      const data = await response.json();
      if (data.status === 'success') {
        hideLoader( );
        fetchCurrentData();
        showMessage(data.message, data.status);
      } else {
        hideLoader( );
        showMessage(data.message, data.status);
      }
    } catch (error) {
      hideLoader( );
      console.error('Error updating booking status:', error);
      showMessage('Failed to update booking status', 'error');
      // alert('An error occurred while updating the booking status.');
    }
  };



  const handleAppointmentStatusChange = async (row: any, newStatus: string) => {
    // 🚨 Block status change with warning modal if rules fail
    if ((newStatus === "processing" || newStatus === "completed") && !row.doctor_id) {
      showMessage("Doctor not assigned for this appointment!", "warning");
      return;
    }

    if (newStatus === "completed" && row.payment_status === "Unpaid") {
      showMessage("Payment is pending. Cannot mark as completed.", "warning");
      return;
    }

    showLoader( );
    try {
      const payload: any = {
        bookingid: row.booking_id,
        process_status: newStatus,
      };

      if (newStatus === "completed") {
        payload.email = row.email;
      }

      const response = await updateAppointmentStatus(payload);

      if (response.status === true) {
        fetchCurrentData();
        showMessage(response.message, "success");
      } else {
        showMessage(response.message, "error");
      }
    } catch (error) {
      console.error("Error updating appointment status:", error);
      showMessage("Failed to update appointment status", "error");
    } finally {
      hideLoader( );
    }
  };


  // Handle doctor assignment
  const handleDoctorChange = async (row: any, doctor_id: string) => {
    try {
      const parsedDoctorId = parseInt(doctor_id, 10);
      const normalizedDoctorId = Number.isNaN(parsedDoctorId) ? null : parsedDoctorId;
      const payload = {
        booking_id: row.booking_id,
        doctor_id: normalizedDoctorId,
      };

      const response = await assignDoctor(payload);

      if (response.status === true) {
        showMessage(response.message, response.status);
        setRecords((prevRecords) =>
          prevRecords.map((record) =>
            record.booking_id === row.booking_id
              ? { ...record, doctor_id: normalizedDoctorId }
              : record
          )
        );
      }
    } catch (error) {
      console.log("error while assigning doctor", error);
      showMessage('Failed to update appointment status', 'error');
    }
  };

  // Format phone number
  const formatPhoneNumber = (phoneNumber: string) => {
    if (typeof phoneNumber !== 'string' || !phoneNumber) return '';
    const cleaned = phoneNumber.replace(/\D/g, '');
    let cleanedWithoutCountryCode = cleaned;

    if (cleaned.length > 10) {
      const countryCodeLength = cleaned.length - 10;
      cleanedWithoutCountryCode = cleaned.slice(countryCodeLength);
    }

    if (cleanedWithoutCountryCode.length === 10) {
      return `+${cleaned.slice(0, cleaned.length - 10)} (${cleanedWithoutCountryCode.slice(0, 3)}) ${cleanedWithoutCountryCode.slice(3, 6)}-${cleanedWithoutCountryCode.slice(6)}`;
    }

    return phoneNumber;
  };


  const fetchEditTimeSlots = async (date: string, currentTime: string) => {
    setIsFetchingSlots(true);
    try {
      const response = await fetch(`${base_url}get_time_slots_date`, {
        method: 'POST',
        body: JSON.stringify({
          company_id: localStorage.getItem('companyId'),
          date: date, // already in MM-DD-YYYY
        }),
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json'
        },
      });

      const data = await response.json();
      if (data.status === 'success') {
        let slots = data.available_slots || [];

        // ✅ Remove duplicates
        slots = [...new Set(slots)];

        // ✅ Ensure currentTime exists only once
        if (currentTime && !slots.includes(currentTime)) {
          slots.push(currentTime);
        }

        // ✅ Sort properly (not lexicographically but by time order)
        slots.sort((a, b) => {
          const [ah, am] = a.split(":").map(Number);
          const [bh, bm] = b.split(":").map(Number);
          return ah * 60 + am - (bh * 60 + bm);
        });

        setAvailableEditTimeSlots(slots);
      } else {
        setAvailableEditTimeSlots([]);
      }
    } catch (err) {
      console.error('Error fetching time slots:', err);
      setAvailableEditTimeSlots([]);
    } finally {
      setIsFetchingSlots(false);
    }
  };


  // Utility to handle multiple date formats safely
  const parseBookingDate = (dateStr: string) => {
    if (!dateStr) return { display: "", api: "" };

    let dt = DateTime.fromISO(dateStr, { zone: "America/Chicago" });

    // fallback for invalid date
    if (!dt.isValid) {
      if (dateStr.includes("/")) {
        dt = DateTime.fromFormat(dateStr, "MM/dd/yyyy", { zone: "America/Chicago" });
      } else if (dateStr.includes("-")) {
        dt = DateTime.fromFormat(dateStr, "yyyy-MM-dd", { zone: "America/Chicago" });
      }
    }

    if (!dt.isValid) return { display: "", api: "" };

    return {
      display: dt.toFormat("MM-dd-yyyy"), // UI
      api: dt.toFormat("yyyy-MM-dd"),     // API
    };
  };



  // Handle edit click
  const handleEditClick = async (row: any) => {
    setShowEditModal(true);
    setIsModalLoading(true);
    try {
      const apiResponse = await EditBooking(row.booking_id);
      if (apiResponse.status === 'success') {
        const booking = apiResponse.data;

        // Use Luxon with zone
        const { display, api } = parseBookingDate(booking.date);

        setEditBookingData(booking);
        console.log("display date", display)
        setEditDate(display);
        setEditTime(booking.time);

        await fetchEditTimeSlots(api, booking.time);
      } else {
        showMessage(apiResponse.message || 'Failed to fetch booking data', 'error');
      }
    } catch (error) {
      console.error('Error fetching booking data:', error);
      showMessage('An error occurred while fetching the booking data', 'error');
    } finally {
      setIsModalLoading(false);
    }
  };



  // Handle upload click (placeholder)
  const handleUploadClick = (row: any) => {
    setUploadBookingId(row.booking_id); // 👈 je booking ni files upload karvi che
    setSelectedFiles([]);               // 👈 purana select files clear
    setShowUploadModal(true);           // 👈 modal open
  };

  const handleFileUpload = async () => {
    if (!uploadBookingId || selectedFiles.length === 0) return;

    setUploading(true);
    showLoader()
    try {
      const res = await CustomReport(uploadBookingId, selectedFiles);
      showMessage(res.message || "Files uploaded successfully!", "success");
      fetchCurrentData();
      setShowUploadModal(false);
    } catch (err: any) {
      showMessage(err.message || "Upload failed!", "error");
    } finally {
      setUploading(false);
       hideLoader( );
    }
  };


  // Handle edit date change
  const handleEditDateChange = (dates: Date[]) => {
    const date = dates[0];
    console.log(date)
    if (!date) return;

    // Format date as dd-mm-yyyy for display and API
    const day = String(date.getDate()).padStart(2, '0');
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const year = date.getFullYear();
    const formattedDisplay = `${month}-${day}-${year}`;

    setEditDate(formattedDisplay);
    fetchEditTimeSlots(formattedDisplay, editTime);
    setEditTime('');
  };

  // Handle update booking
  const handleUpdateBooking = async () => {
    if (!editDate || !editTime) {
      showMessage('Please select both date and time', 'error');
      return;
    }

    // Format the date as MM/DD/YYYY for the API (to match the original format)
    console.log("edit date", editDate)
    const [month, day, year] = editDate.split('-');
    const formattedDate = `${year}-${month}-${day}`;

    showLoader( );
    try {
      const response = await fetch(`${base_url}update_booking`, {
        method: 'POST',
        body: JSON.stringify({
          booking_id: editBookingData.booking_id,
          date: formattedDate,
          time: editTime
        }),
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json'
        },
      });

      const data = await response.json();
      if (data.status === 'success') {
        showMessage(data.message, 'success');
        fetchCurrentData();
        setShowEditModal(false);
      } else {
        throw new Error(data.message || 'Failed to update booking');
      }
    } catch (err) {
      console.error('Error:', err);
      showMessage(err.message || 'An error occurred while updating the booking', 'error');
    } finally {
      hideLoader( );
    }
  };

  // Order generation functions
  const handleGenerateOrderClick = (row: any) => {
    const customerId = row.booking_id || '';
    setCustomerId(customerId);

    // Get already used keys from existing orders using keyName
    const alreadyUsedKeys = row.order_info?.map((order: any) => order.keyName) || [];
    setAlreadyUsedKeys(alreadyUsedKeys);
    setLocalUsedKeys(alreadyUsedKeys);

    setShowOrderModal(true);
    setSelectedOrderRow(row);
  };

  const handleViewOrdersClick = async (row: any) => {
    setSelectedOrderRow(row);
    setOrderInfo(row.order_info || []);

    // Fetch full details including reports
    try {
      const updatedData = await CustomerHistoryDetails(row.booking_id);
      if (updatedData?.status && updatedData.data) {
        setReports(updatedData.data.report || []);
      }
    } catch (error) {
      console.error('Error fetching customer history details:', error);
    }

    setShowOrderViewModal(true);
  };

  const handleGenerateOrder = async () => {
    console.log('Generating order with:', { customerId, selectedKeys });

    if (!customerId || !selectedKeys) {
      showMessage('Please select a key', 'error');
      return;
    }

    setIsGenerating(true);

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

      if (data.status === true) {
        showMessage(data.message, 'success');

        const updatedData = await CustomerHistoryDetails(customerId);
        if (updatedData?.status && updatedData.data) {
          if (updatedData.data.order_id) {
            const newOrderIds = Array.isArray(updatedData.data.order_id)
              ? updatedData.data.order_id
              : [updatedData.data.order_id];
            setGeneratedOrderIds(prev => [...prev, ...newOrderIds]);

            // Update the order info in the selected row
            const selectedKeyInfo = apiKeys.find(key => key.name === selectedKeys);
            if (selectedKeyInfo) {
              const newOrderInfo = {
                id: newOrderIds[0],
                keyName: selectedKeyInfo.name,
                keyValue: selectedKeyInfo.apikey,
                date: new Date().toLocaleDateString()
              };

              setOrderInfo(prev => [...prev, newOrderInfo]);

              // Update the records data to reflect the new order
              setRecords((prevRecords) =>
                prevRecords.map((record) =>
                  record.booking_id === selectedOrderRow.booking_id
                    ? {
                      ...record,
                      order_ids: [...(record.order_ids || []), newOrderIds[0]],
                      order_info: [...(record.order_info || []), newOrderInfo],
                    }
                    : record
                )
              );

              // Update local used keys to disable immediately using name
              setLocalUsedKeys(prev => [...prev, selectedKeyInfo.name]);
            }
          }
        }
        // Clear selection after successful generation
        setSelectedKeys('');
      } 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);
    }
  };

  // Fetch API keys when order modal opens
  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 activeDownloads: { [key: string]: boolean } = {};

  const handleDownload = (file) => {
    showLoader( );

    // Simulate slight delay to ensure loader visibility
    setTimeout(() => {
      const link = document.createElement("a");
      link.href = file.file_path;
      link.download = file.file_name || "report.pdf";
      document.body.appendChild(link);
      link.click();
      link.remove();

      // Hide loader after short delay
      setTimeout(() => hideLoader( ), 800);
    }, 300);
  };



  const normalizeFilterValue = useCallback((accessor: string, value: any) => {
    if (value === null || value === undefined) {
      return '';
    }

    if (accessor === 'booking_id' || accessor === 'doctor_id') {
      const trimmed = String(value).trim();
      if (trimmed === '') {
        return '';
      }
      const numeric = parseInt(trimmed, 10);
      return Number.isNaN(numeric) ? '' : numeric;
    }

    if (['status', 'payment_status', 'process_status', 'payment_method'].includes(accessor)) {
      return String(value).toLowerCase();
    }

    if (accessor === 'firstName') {
      return String(value).trim();
    }

    return value;
  }, []);

  const applyFilter = useCallback((accessor: string, value: any) => {
    setAppliedFilters((prev) => {
      const next = { ...prev };
      if (value === '' || value === null || value === undefined) {
        delete next[accessor];
      } else {
        next[accessor] = value;
      }
      return next;
    });
    setPage(1);
  }, []);

  const customHeader = (titleText: string, accessor: string) => {
    const config = filterConfigs[accessor];

    const handleTextChange = (value: string) => {
      setColumnFilters((prev) => ({ ...prev, [accessor]: value }));

      if (!filterDebouncers.current[accessor]) {
        filterDebouncers.current[accessor] = debounce((incoming: string) => {
          applyFilter(accessor, normalizeFilterValue(accessor, incoming));
        }, 400);
      }

      if (value === '') {
        filterDebouncers.current[accessor]?.cancel?.();
        applyFilter(accessor, '');
      } else {
        filterDebouncers.current[accessor](value);
      }
    };

    const handleSelectChange = (value: string | null) => {
      setColumnFilters((prev) => {
        const next = { ...prev };
        if (!value) {
          delete next[accessor];
        } else {
          next[accessor] = value;
        }
        return next;
      });

      const normalized = normalizeFilterValue(accessor, value ?? '');
      applyFilter(accessor, normalized);
    };

    const handleDateChange = (dateValue: Date | undefined) => {
      setColumnFilters((prev) => {
        const next = { ...prev };
        if (!dateValue) {
          delete next[accessor];
        } else {
          next[accessor] = dateValue;
        }
        return next;
      });

      const formatted = dateValue
        ? DateTime.fromJSDate(dateValue).toFormat('MM/dd/yyyy')
        : '';
      applyFilter(accessor, formatted);
    };

    return (
      <div className="flex items-center justify-between gap-2">
        <span className="font-semibold text-sm truncate">{titleText}</span>
        {config && (
          <Menu shadow="md" width={200} position="bottom-end" withinPortal>
            <Menu.Target>
              <ActionIcon
                variant="light"
                size="sm"
                radius="md"
                className="hover:bg-primary-50 dark:hover:bg-gray-700 transition-colors bg-none"
              >
                <FaFilter size={14} className="text-gray-500 hover:text-primary-500" />
              </ActionIcon>
            </Menu.Target>

            <Menu.Dropdown p="sm" className="space-y-2">
              {config.type === 'text' && (
                <TextInput
                  size="xs"
                  placeholder={`Filter by ${titleText}`}
                  value={columnFilters[accessor] ?? ''}
                  onChange={(e) => handleTextChange(e.target.value)}
                  clearable
                />
              )}

              {config.type === 'select' && (
                <Select
                  size="xs"
                  placeholder={`Filter by ${titleText}`}
                  data={config.options}
                  value={columnFilters[accessor] ?? null}
                  onChange={(v) => handleSelectChange(v)}
                  clearable
                />
              )}

              {config.type === 'date' && (
                <Flatpickr
                  value={columnFilters[accessor] ?? null}
                  options={{
                    dateFormat: 'm/d/Y',
                    position: isRtl ? 'auto right' : 'auto left',
                  }}
                  placeholder={`Filter by ${titleText}`}
                  className="form-input w-full text-sm px-2 py-1 rounded-md border dark:bg-gray-800"
                  onChange={(date) => handleDateChange(date[0])}
                />
              )}
            </Menu.Dropdown>
          </Menu>
        )}
      </div>
    );
  };


  function truncateText(text: string, maxLength: number = 15): string {
    if (!text) return '';
    return text.length > maxLength ? text.substring(0, maxLength) + '...' : text;
  }





  const baseColumns = [
    {
      accessor: 'booking_id',
      title: "ID",
      sortable: true,
      width: 80,

      render: (row: any) => (
        <span className="font-semibold text-primary-DEFAULT dark:text-primary-light" onClick={(e) => e.stopPropagation()}>
          #{row.booking_id}
        </span>
      )
    },
    // {
    //   accessor: 'firstName',
    //   title: customHeader('Name', 'firstName'),
    //   sortable: false,
    //   width: 200,
    //   render: (record: any) => {
    //     const isExpanded = expandedRows.has(record.booking_id);

    //     return (
    //       <Group gap="xs">
    //         <ActionIcon
    //           variant="transparent"
    //           onClick={() => toggleRow(record.booking_id)}
    //           className="cursor-pointer arrow bg-transparent hover:bg-transparent active:bg-transparent"
    //           style={{
    //             backgroundColor: "none"
    //           }}
    //         >
    //            {expandedRows.has(record.booking_id) ? (
    //   <FaChevronDown size={12} className="text-gray-500 dark:text-gray-300" />
    // ) : (
    //   <FaChevronRight size={12} className="text-gray-500 dark:text-gray-300" />
    // )}

    //         </ActionIcon>



    //         <Menu shadow="md" width={200} position="bottom-start" withinPortal>
    //           <Menu.Target>
    //             <div className="flex items-center cursor-pointer" onClick={(e) => e.stopPropagation()}>
    //               <Tippy content={record.firstName} placement="top" arrow={false}>
    //                 <span className="inline-block font-medium">
    //                   {truncateText(record.firstName, 15)}
    //                 </span>
    //               </Tippy>
    //             </div>
    //           </Menu.Target>
    //           {record.status !== "Rejected" && (
    //             <Menu.Dropdown>
    //               {record.process_status !== "completed" && (
    //                 <Menu.Item
    //                   icon={<FaEdit size={14} />}
    //                   onClick={(e) => {
    //                     e.stopPropagation();
    //                     handleEditClick(record);
    //                   }}
    //                 >
    //                   Edit
    //                 </Menu.Item>
    //               )}
    //               {(record.process_status === "processing" || record.process_status === "completed") && (
    //                 <Menu.Item
    //                   icon={<FaUpload size={14} />}
    //                   onClick={(e) => {
    //                     e.stopPropagation();
    //                     handleUploadClick(record);
    //                   }}
    //                 >
    //                   Upload
    //                 </Menu.Item>
    //               )}
    //             </Menu.Dropdown>
    //           )}
    //         </Menu>
    //       </Group>
    //     );
    //   }
    // }
      {
      accessor: "firstName",
      title: "Name",
      width: 220,
      sortable: false,
      render: (record: any) => {
        const isExpanded = expandedRows.has(record.booking_id);
        return (
          <Group gap="xs" align="center">
            {/* Expand Arrow Button */}
            <ActionIcon
              variant="transparent"
              onClick={(e) => {
                e.stopPropagation();
                toggleRow(record.booking_id);
              }}
              className="cursor-pointer bg-transparent hover:bg-transparent"
            >
              <div
                className={`transform transition-transform duration-200 ${
                  isExpanded ? "rotate-90" : ""
                }`}
              >
                <FaChevronRight size={12} className="text-gray-500 dark:text-gray-300" />
              </div>
            </ActionIcon>

            {/* Name & Actions Menu */}
            <Menu shadow="md" width={200} position="bottom-start" withinPortal>
              <Menu.Target>
                <div
                  className="flex items-center cursor-pointer"
                  onClick={(e) => e.stopPropagation()}
                >
                  <Tippy content={record.firstName} placement="top" arrow={false}>
                    <span className="inline-block font-medium">
                      {truncateText(record.firstName, 15)}
                    </span>
                  </Tippy>
                </div>
              </Menu.Target>
              {record.status !== "Rejected" && (
                <Menu.Dropdown>
                  <Menu.Item
                    icon={<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
                    </svg>}
                    onClick={(e) => {
                      e.stopPropagation();
                      setSelectedBookingForCall(record);
                      setShowCallerModal(true);
                    }}
                  >
                    AI Call
                  </Menu.Item>
                  {record.process_status !== "completed" && (
                    <Menu.Item
                      icon={<FaEdit size={14} />}
                      onClick={(e) => {
                        e.stopPropagation();
                        handleEditClick(record);
                      }}
                    >
                      Edit
                    </Menu.Item>
                  )}
                  {(record.process_status === "processing" ||
                    record.process_status === "completed") && (
                    <Menu.Item
                      icon={<FaUpload size={14} />}
                      onClick={(e) => {
                        e.stopPropagation();
                        handleUploadClick(record);
                      }}
                    >
                      Upload
                    </Menu.Item>
                  )}
                </Menu.Dropdown>
              )}
            </Menu>
          </Group>
        );
      },
    },
    {
      accessor: 'date',
      title: 'Appointment Date',
      width: 150,
      sortable: false,
      render: (row: any) => (
        <span className="font-medium" onClick={(e) => e.stopPropagation()}>
          {row.date || '---'}
        </span>
      ),
    },
  ];

  const appointmentStatusColumn = {
    accessor: 'process_status',
    title: customHeader('Scan Status', 'process_status'),
    sortable: false,
    width: 180,
    render: (row: any) => {
      const capitalizeDisplay = (text: string) => text.charAt(0).toUpperCase() + text.slice(1);
      console.log("paymant status row", row.payment_status)
      return (


        <select
          value={row.process_status || 'pending'}
          onChange={(e) => handleAppointmentStatusChange(row, e.target.value)}
          onClick={(e) => e.stopPropagation()}
          className={`form-select w-[120px] font-semibold rounded-lg transition-all duration-200
    ${row.process_status === 'pending'
              ? 'bg-orange-100 dark:bg-orange-900 text-orange-800 dark:text-orange-100 border-orange-200 dark:border-orange-700'
              : row.process_status === 'processing'
                ? 'bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-100 border-blue-200 dark:border-blue-700'
                : row.process_status === 'completed'
                  ? 'bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-100 border-green-200 dark:border-green-700'
                  : 'bg-orange-100 dark:bg-orange-900 text-orange-800 dark:text-orange-100 border-orange-200 dark:border-orange-700'}
    focus:ring-2 focus:ring-primary-500 focus:border-primary-500 dark:focus:ring-primary-400 dark:focus:border-primary-400
    border`}
          disabled={row.process_status === 'completed' || row.status === 'Rejected' || row.status === 'Pending'}
        >
          <option value="pending">{capitalizeDisplay('pending')}</option>
          <option value="processing">{capitalizeDisplay('processing')}</option>
          <option value="completed">{capitalizeDisplay('completed')}</option>
        </select>

      )
    }
  };

  const adminColumns = [
     {
      accessor: 'created_at',
      title: 'Booked On',
      width: 130,
      sortable: false,
      render: (row: any) => (
        <span className="font-semibold text-primary-DEFAULT dark:text-primary-light" onClick={(e) => e.stopPropagation()}>
          {row.created_at}
        </span>
      )
    },
    {
      accessor: 'payment_status',
      title: customHeader('Payment Status', 'payment_status'),
      sortable: false,
      width: 180,
      render: (row: any) => (
        <select
          value={row.payment_status}
          onChange={(e) => handlePaymentStatusChange(row, e.target.value)}
          onClick={(e) => e.stopPropagation()}
          className="form-select  w-[100px] font-semibold rounded-lg transition-all duration-200
        bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200
        focus:ring-2 focus:ring-primary-500 focus:border-primary-500 dark:focus:ring-primary-400 dark:focus:border-primary-400
        border border-gray-300 dark:border-gray-600"
          disabled={row.payment_status === 'Paid' || row.status === 'Rejected'}
        >
          {row.payment_status !== 'Partially_paid' && (
            <option value="Unpaid">Unpaid</option>
          )}
          <option value="Paid">Fully Paid</option>
          {/* <option value="Partially_paid">Partially Paid</option> */}
        </select>
      )
    },
    {
      accessor: 'status',
      width: 160,
      title: customHeader('Booking Status', 'status'),
      sortable: false,
      render: (row: any) => (
        <select
          value={row.status}
          onChange={(e) => handleStatusClick(row, e.target.value)}

          onClick={(e) => e.stopPropagation()}
          className={`form-select w-[120px] font-semibold rounded-lg transition-all duration-200
        ${row.status === 'Pending' ?
              'bg-orange-100 dark:bg-orange-900 text-orange-800 dark:text-orange-100 border-orange-200 dark:border-orange-700' :
              row.status === 'Approved' ?
                'bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-100 border-green-200 dark:border-green-700' :
                'bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-100 border-red-200 dark:border-red-700'}
        focus:ring-2 focus:ring-primary-500 focus:border-primary-500 dark:focus:ring-primary-400 dark:focus:border-primary-400
        border`}
          disabled={row.status !== 'Pending'}
        >
          <option value="Pending">Pending</option>
          <option value="Approved">Approved</option>
          <option value="Rejected">Rejected</option>
        </select>
      ),
    },
    appointmentStatusColumn,
    // Only show Assign Doctor column for non-doctor roles
    ...(userRole !== 'doctor' ? [{
      accessor: 'doctor_id',
      title: "Assign Doctor",
      sortable: true,
      width: 180,
      render: (row: any) => (
        <select
          value={row.doctor_id || ''}
          onChange={(e) => handleDoctorChange(row, e.target.value)}
          onClick={(e) => e.stopPropagation()}
          className="form-select  w-[120px] font-semibold rounded-lg transition-all duration-200
        bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200
        focus:ring-2 focus:ring-primary-500 focus:border-primary-500 dark:focus:ring-primary-400 dark:focus:border-primary-400
        border border-gray-300 dark:border-gray-600"
          disabled={row.status === 'Pending' || row.process_status === 'completed' || row.status === 'Rejected'}
        >
          <option value="">Select Doctor</option>
          {doctors.map((doctor) => (
            <option
              key={doctor.id}
              value={doctor.id}
              disabled={!doctor.available} // disable if not available
              style={{
                color: doctor.available ? "#000" : "#999", // gray out if unavailable
                fontStyle: doctor.available ? "normal" : "italic",
              }}
            >
              {doctor.name} {doctor.available ? "" : "(Not Available)"}
            </option>
          ))}
        </select>
      ),
    }] : []),
    {
      accessor: 'payment_method',
      title: 'Payment Method',
      width: 130,
      sortable: true,
      render: (row: any) => (
        <span className={`px-2 py-1 rounded-md text-sm font-medium
        ${row.payment_method === 'Cash' ?
            'bg-secondary/10 dark:bg-secondary-dark-light text-secondary-DEFAULT dark:text-secondary-light' :
            'bg-primary/10 dark:bg-primary-dark-light text-primary-DEFAULT dark:text-primary-light'}`}
          onClick={(e) => e.stopPropagation()}
        >
          {row.payment_method}
        </span>
      )
    },
    {
      accessor: 'reports',
      title: 'Reports',
      sortable: false,
      width: 150,
      render: (row: any) => (
        <div className="flex items-center justify-center gap-2">
          {row.order_info && row.order_info.length > 0 ? (
            <Tippy content="View Reports">
              <button
                className="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200 flex items-center"
                onClick={(e) => {
                  e.stopPropagation();
                  setSelectedOrderRow(row);
                  setReports(row.order_info);
                  setShowUserReportModal(true);
                }}
              >
                <FaFile className="w-4 h-4 text-green-500 hover:text-green-700 dark:text-green-400 dark:hover:text-green-300" />
                <span className="ml-1 text-xs font-semibold bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-100 px-2 py-1 rounded-full">
                  {row.order_info.length}
                </span>
              </button>
            </Tippy>
          ) : (
            <span className="text-xs text-gray-400 dark:text-gray-500">No reports</span>
          )}

          {activeTab === 'completed' && (
            <Tippy content="Upload Report">
              <button
                className="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200"
                onClick={(e) => {
                  e.stopPropagation();
                  handleUploadClick(row);
                }}
              >
                <FaUpload className="w-4 h-4 text-primary-DEFAULT dark:text-primary-light" />
              </button>
            </Tippy>
          )}
        </div>
      )
    },
  ];

  // Combine all columns into a single array


  // Combine all columns into a single array (removed conditional logic)
  const columns = [...baseColumns, ...adminColumns];

  const fetchCurrentData = useCallback(() => {
    fetchCustomerData();
  }, [fetchCustomerData]);

  const handleTabClick = (tab: 'booking' | 'completed') => {
    if (tab === activeTab) {
      return;
    }

    if (tab === 'completed') {
      previousProcessFilter.current = columnFilters.process_status;
      setColumnFilters((prev) => ({ ...prev, process_status: 'completed' }));
      setAppliedFilters((prev) => ({ ...prev, process_status: 'completed' }));
    } else {
      setColumnFilters((prev) => {
        const next = { ...prev };
        if (previousProcessFilter.current) {
          next.process_status = previousProcessFilter.current;
        } else {
          delete next.process_status;
        }
        return next;
      });

      setAppliedFilters((prev) => {
        const next = { ...prev };
        if (previousProcessFilter.current) {
          next.process_status = previousProcessFilter.current;
        } else {
          delete next.process_status;
        }
        return next;
      });

      previousProcessFilter.current = undefined;
    }

    setActiveTab(tab);
    setPage(1);
  };



  // Add a custom row click handler that only expands if clicking on non-interactive areas
  const handleRowClick = (record: any, e: React.MouseEvent) => {
    // Check if the click target is an interactive element
    const target = e.target as HTMLElement;
    const interactiveSelectors = [
      'button', 'select', 'input', 'textarea', 'a',
      '.btn', '.form-select', '.form-input', '.action-icon'
    ];

    const isInteractive = interactiveSelectors.some(selector =>
      target.closest(selector) ||
      target.matches(selector) ||
      target.tagName.toLowerCase() === 'svg' ||
      target.tagName.toLowerCase() === 'path'
    );

    // Only toggle if not clicking on an interactive element
    if (!isInteractive) {
      toggleRow(record.booking_id, e);
    }
  };



  return (
    <div className="relative">

      <div className="panel overflow-x-auto">
        <div className="flex md:items-center md:flex-row flex-col mb-5 gap-5">
          <div>
            <h5 className="font-semibold text-lg dark:text-white-light">Booking Management</h5>
          </div>
          <div className="ltr:ml-auto rtl:mr-auto flex items-center gap-4">


            {hasAccess(permissions, "Booking", "add") && (
              <Link
                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 flex items-center gap-2"
                to="/booking/add"
              >
                <FaUserPlus className="text-lg" /> Add Booking
              </Link>
            )}
          </div>
        </div>
        {/* Custom Tabs */}
        <div className="flex gap-2 mb-6">
          <button
            className={`px-6 py-2 rounded-t-lg font-semibold transition-all duration-200 border-b-2 ${activeTab === 'booking'
              ? 'border-primary-DEFAULT text-primary-DEFAULT bg-white dark:bg-gray-800'
              : 'border-transparent text-gray-500 bg-gray-50 dark:bg-gray-900'
              }`}
            onClick={() => handleTabClick('booking')}
          >
            Booking
          </button>
          <button
            className={`px-6 py-2 rounded-t-lg font-semibold transition-all duration-200 border-b-2 ${activeTab === 'completed'
              ? 'border-primary-DEFAULT text-primary-DEFAULT bg-white dark:bg-gray-800'
              : 'border-transparent text-gray-500 bg-gray-50 dark:bg-gray-900'
              }`}
            onClick={() => handleTabClick('completed')}
          >
            Completed
          </button>
        </div>

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


        {loading && (
          <div className="fixed inset-0 flex justify-center items-center bg-black bg-opacity-50 z-[9999]">
            <div className="w-16 h-16 border-t-4 border-primary-DEFAULT border-solid rounded-full animate-spin"></div>
          </div>
        )}


        <div className="datatables">
          <DataTable
            idAccessor="booking_id" // ✅ required for expansion to work properly
            highlightOnHover
            className="whitespace-nowrap table-hover rounded-lg overflow-hidden"
            records={records}
            columns={columns}
            totalRecords={totalRecords}
            recordsPerPage={pageSize}
            page={page}
            onPageChange={setPage}
            recordsPerPageOptions={PAGE_SIZES}
            onRecordsPerPageChange={(size) => {
              setPageSize(size);
              setPage(1);
            }}
            sortStatus={sortStatus}
            onSortStatusChange={(status) => {
              setSortStatus(status);
              setPage(1);
            }}
            minHeight={200}
            paginationText={({ from, to, totalRecords }) =>
              `Showing ${from} to ${to} of ${totalRecords} entries`
            }
            rowClassName={() =>
              `transition-colors duration-100 ${
                isDark ? 'hover:bg-gray-700' : 'hover:bg-gray-50'
              } cursor-default`
            }
            rowExpansion={{
              trigger: 'never', // 👈 ensures only arrow controls expansion
              allowMultiple: false,
              expanded: {
                recordIds: Array.from(expandedRows),
                onRecordIdsChange: (ids) => setExpandedRows(new Set(ids)),
              },
              content: ({ record }) => {
                const isExpanded = expandedRows.has(record.booking_id);
                if (!isExpanded) return null;

                return (
                  <Collapse
                    in={isExpanded}
                    transitionDuration={200}
                    transitionTimingFunction="ease-in-out"
                  >
                    <div className="p-6 bg-gray-50 dark:bg-gray-900 border-t border-gray-200 dark:border-gray-700">
                      <div className="grid grid-cols-1 lg:grid-cols-12 gap-6 items-stretch">
                        {/* LEFT – Booking Info */}
                        <div className="lg:col-span-8">
                          <div className="bg-white dark:bg-gray-800 p-6 rounded-2xl shadow-md border border-gray-200 dark:border-gray-700 h-full">
                            <h3 className="uppercase tracking-wide text-gray-500 mb-6 font-semibold text-sm">
                              Booking Details
                            </h3>
                            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
                              <div>
                                <p className="text-xs text-gray-500 font-medium">Email</p>
                                <p className="mt-1 font-medium">{record.email}</p>
                              </div>
                              <div>
                                <p className="text-xs text-gray-500 font-medium">Phone</p>
                                <p className="mt-1 font-medium">{record.phone}</p>
                              </div>

                              {record.packagesByType?.package && (
                                <div>
                                  <p className="text-xs text-gray-500 font-medium">Packages</p>
                                  <div className="mt-1 flex flex-wrap gap-2">
                                    {record.packagesByType.package.map((pkg: any) => (
                                      <span
                                        key={pkg.id}
                                        className="inline-block px-2 py-0.5 text-xs font-semibold rounded-lg text-blue-700 bg-blue-100"
                                      >
                                        {role === "doctor"
                                          ? pkg.name
                                          : `${pkg.name} - $${pkg.price}`}
                                      </span>
                                    ))}
                                  </div>
                                </div>
                              )}

                              {Object.keys(record.packagesByType || {}).some(
                                (type) => type !== "package"
                              ) && (
                                <div>
                                  <p className="text-xs text-gray-500 font-medium">
                                    Additional Packages
                                  </p>
                                  <div className="mt-1 flex flex-wrap gap-2">
                                    {Object.keys(record.packagesByType)
                                      .filter((type) => type !== "package")
                                      .flatMap((type) => record.packagesByType[type])
                                      .map((pkg: any) => (
                                        <span
                                          key={pkg.id}
                                          className="inline-block px-2 py-0.5 text-xs font-semibold rounded-lg text-green-700 bg-green-100"
                                        >
                                          {role === "doctor"
                                            ? pkg.name
                                            : `${pkg.name} - $${pkg.price}`}
                                        </span>
                                      ))}
                                  </div>
                                </div>
                              )}

                              <div>
                                <p className="text-xs text-gray-500 font-medium">Time</p>
                                <p className="mt-1 font-medium">{record.time}</p>
                              </div>

                              {record.insurance_name && (
                                <div>
                                  <p className="text-xs text-gray-500 font-medium">Insurance</p>
                                  <p className="mt-1 font-medium">{record.insurance_name}</p>
                                </div>
                              )}

                              <div>
                                <p className="text-xs text-gray-500 font-medium">Total Amount</p>
                                <p className="mt-1 font-bold text-green-600">
                                  {record.rs ? `$${record.rs}` : '-'}
                                </p>
                              </div>

                              <div>
                                <p className="text-xs text-gray-500 font-medium">Transaction ID</p>
                                <p className="mt-1 font-medium">{record.transaction_id || '-'}</p>
                              </div>
                            </div>
                          </div>
                        </div>

                        {/* RIGHT – Actions */}
                        <div className="lg:col-span-4 flex">
                          <div className="bg-white dark:bg-gray-800 p-6 rounded-2xl shadow-md border border-gray-200 dark:border-gray-700 flex flex-col justify-between w-full">
                            <h3 className="uppercase tracking-wide text-gray-500 mb-6 font-semibold text-sm">
                              Actions
                            </h3>
                            <div className="flex flex-col gap-3">
                              <button
                                onClick={() => handleViewOrdersClick(record)}
                                disabled={!record.order_ids?.length}
                                className="flex items-center justify-center gap-2 px-4 py-3 rounded-lg text-sm font-medium text-blue-700 bg-blue-50 hover:bg-blue-100 transition disabled:opacity-50 disabled:cursor-not-allowed"
                              >
                                <FaEye />
                                {record.order_ids?.length
                                  ? `View Orders (${record.order_ids.length})`
                                  : 'No Orders'}
                              </button>

                              <button
                                onClick={() => {
                                  if (record.order_info?.length > 0) {
                                    setSelectedOrderRow(record);
                                    setReports(record.order_info);
                                    setShowReportModal(true);
                                  }
                                }}
                                disabled={!record.order_info?.length}
                                className="flex items-center justify-center gap-2 px-4 py-3 rounded-lg text-sm font-medium text-green-700 bg-green-50 hover:bg-green-100 transition disabled:opacity-50 disabled:cursor-not-allowed"
                              >
                                <FaEye />
                                {record.order_info?.length
                                  ? `View Reports (${record.order_info.length})`
                                  : 'No Reports'}
                              </button>

                              <button
                                onClick={() => handleGenerateOrderClick(record)}
                                disabled={["", "pending"].includes(record.process_status)}
                                className="flex items-center justify-center gap-2 px-4 py-3 rounded-lg text-sm font-medium text-white bg-primary hover:bg-primary-light border border-primary hover:border-primary-light shadow transition disabled:opacity-50 disabled:cursor-not-allowed"
                              >
                                Generate Report
                              </button>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </Collapse>
                );
              },
            }}
      />
        </div>



        {/* Edit Booking Modal */}
        <Transition appear show={showEditModal} as={Fragment}>
          <Dialog as="div" open={showEditModal} onClose={() => setShowEditModal(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-lg 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">
                        Update Booking #{editBookingData?.booking_id}
                      </div>
                      <button
                        type="button"
                        className="text-gray-400 hover:text-gray-600 dark:hover:text-white transition-colors duration-200"
                        onClick={() => setShowEditModal(false)}
                      >
                        <FaTimes />
                      </button>
                    </div>

                    <div className="p-6">
                      {isModalLoading ? (

                        <div className="fixed inset-0 flex justify-center items-center bg-black bg-opacity-50 z-[9999]">
                          <div className="w-16 h-16 border-t-4 border-primary-DEFAULT border-solid rounded-full animate-spin"></div>
                        </div>

                      ) : (
                        <div className="mt-4 space-y-4">
                          <div>
                            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                              Select Date
                            </label>
                            <Flatpickr
                              value={editDate}
                              options={{
                                dateFormat: 'm-d-Y',
                                position: isRtl ? 'auto right' : 'auto left',
                                minDate: 'today',
                              }}
                              className="form-input w-full rounded-lg border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 focus:ring-2 focus:ring-primary-500 focus:border-primary-500 dark:focus:ring-primary-400 dark:focus:border-primary-400 transition-all duration-200"
                              onChange={handleEditDateChange}
                            />
                          </div>

                          <div>
                            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                              Select Time
                            </label>
                            <select
                              value={editTime}
                              onChange={(e) => setEditTime(e.target.value)}
                              className="form-select w-full rounded-lg border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 focus:ring-2 focus:ring-primary-500 focus:border-primary-500 dark:focus:ring-primary-400 dark:focus:border-primary-400 transition-all duration-200"
                            >
                              <option value="">
                                {isFetchingSlots ? "Loading available times..." : "Select a Time"}
                              </option>
                              {!isFetchingSlots && availableEditTimeSlots.length > 0 && (
                                availableEditTimeSlots.map((slot, index) => (
                                  <option key={index} value={slot}>
                                    {slot}
                                  </option>
                                ))
                              )}
                              {!isFetchingSlots && availableEditTimeSlots.length === 0 && (
                                <option disabled>No available times for selected date</option>
                              )}
                            </select>
                          </div>
                        </div>
                      )}
                    </div>

                    <div className="flex justify-end items-center px-6 py-4 gap-3 bg-gray-50 dark:bg-gray-800">
                      <button
                        type="button"
                        className="btn btn-outline-danger rounded-lg px-4 py-2 text-sm font-medium transition-all duration-200"
                        onClick={() => setShowEditModal(false)}
                      >
                        Cancel
                      </button>
                      <button
                        type="button"
                        className="btn btn-primary rounded-lg px-4 py-2 text-sm font-medium bg-primary-DEFAULT hover:bg-primary-light border-primary-DEFAULT hover:border-primary-light text-white transition-all duration-200 shadow-primary hover:shadow-primary-lg"
                        onClick={handleUpdateBooking}
                        disabled={isModalLoading}
                      >
                        {loading ? (
                          <>
                            <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>
                            Updating...
                          </>
                        ) : 'Update Booking'}
                      </button>
                    </div>
                  </Dialog.Panel>
                </Transition.Child>
              </div>
            </div>
          </Dialog>
        </Transition>


        {/* Transection ID Modal */}


        <Transition appear show={showPaymentModal} as={Fragment}>
          <Dialog as="div" open={showPaymentModal} onClose={() => setShowPaymentModal(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] flex 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 rounded-lg shadow-lg overflow-hidden ${isDark ? 'bg-gray-800' : 'bg-white'}`}
                >
                  <div className="px-5 py-3 border-b border-gray-200 dark:border-gray-700 flex justify-between items-center">
                    <h3 className="text-lg font-bold text-primary-DEFAULT dark:text-primary-light">
                      Confirm Payment for Booking #{selectedBooking?.booking_id}
                    </h3>
                    <button onClick={() => setShowPaymentModal(false)}>
                      <FaTimes className="text-gray-400 hover:text-gray-600 dark:hover:text-white" />
                    </button>
                  </div>

                  <div className="p-6 space-y-4">
                    <div>
                      <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                        Payment Mode
                      </label>
                      <select
                        value={paymentMode}
                        onChange={(e) => setPaymentMode(e.target.value)}
                        className="form-select w-full rounded-lg border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-all duration-200"
                      >
                        <option value="Cash">Cash</option>
                        <option value="Online">Online</option>
                        <option value="Card">Card</option>
                      </select>
                    </div>

                    <div>
                      <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                        Transaction ID
                      </label>
                      <input
                        type="text"
                        value={transactionId}
                        onChange={(e) => setTransactionId(e.target.value)}
                        className="form-input w-full rounded-lg border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-all duration-200"
                        placeholder="Enter transaction ID"
                      />
                    </div>
                  </div>

                  <div className="flex justify-end items-center px-6 py-4 gap-3 bg-gray-50 dark:bg-gray-800">
                    <button
                      type="button"
                      className="btn btn-outline-danger rounded-lg px-4 py-2 text-sm font-medium"
                      onClick={() => setShowPaymentModal(false)}
                    >
                      Cancel
                    </button>
                    <button
                      type="button"
                      className="btn btn-primary rounded-lg px-4 py-2 text-sm font-medium"
                      onClick={() => updatePaymentStatus(selectedBooking, "Paid", transactionId, paymentMode)}

                    >
                      {isPaymentUpdating ? "Updating..." : "Confirm Payment"}
                    </button>
                  </div>
                </Dialog.Panel>
              </Transition.Child>
            </div>
          </Dialog>
        </Transition>



        {/* Order View Modal */}
        <Transition appear show={showOrderViewModal} as={Fragment}>
          <Dialog as="div" open={showOrderViewModal} onClose={() => setShowOrderViewModal(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-2xl 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">
                        Order Details for {selectedOrderRow?.firstName}
                      </div>
                      <button
                        type="button"
                        className="text-gray-500 hover:text-gray-700 dark:hover:text-primary"
                        onClick={() => setShowOrderViewModal(false)}
                      >
                        <FaTimes />
                      </button>
                    </div>

                    <div className="p-5">
                      {orderInfo.length > 0 ? (
                        <div className="overflow-x-auto">
                          <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
                            <thead className="bg-gray-50 dark:bg-gray-700">
                              <tr>
                                <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
                                  Order ID
                                </th>
                                <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
                                  Key Name
                                </th>
                                <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
                                  Date Generated
                                </th>
                              </tr>
                            </thead>
                            <tbody className="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
                              {orderInfo.map((order, index) => (
                                <tr key={index} className="hover:bg-gray-50 dark:hover:bg-gray-700">
                                  <td className="px-4 py-3 whitespace-nowrap text-sm font-medium text-primary-DEFAULT dark:text-primary-light">
                                    #{order.id}
                                  </td>
                                  <td className="px-4 py-3 whitespace-nowrap text-sm text-gray-600 dark:text-gray-300">
                                    {order.keyName}
                                  </td>
                                  <td className="px-4 py-3 whitespace-nowrap text-sm text-gray-600 dark:text-gray-300">
                                    {order.date}
                                  </td>
                                </tr>
                              ))}
                            </tbody>
                          </table>
                        </div>
                      ) : (
                        <div className="text-center py-8 text-gray-500 dark:text-gray-400">
                          <FaKey className="mx-auto h-12 w-12 text-gray-300 dark:text-gray-600" />
                          <h3 className="mt-4 text-lg font-medium">No orders generated yet</h3>
                          <p className="mt-2 text-sm">Generate orders using the Generate Order button.</p>
                        </div>
                      )}

                      <div className="flex justify-end space-x-3 pt-4 mt-6 border-t border-gray-200 dark:border-gray-700">
                        <button
                          type="button"
                          onClick={() => setShowOrderViewModal(false)}
                          className="px-6 py-2 border border-gray-300 dark:border-gray-600 rounded-md text-secondary dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
                        >
                          Close
                        </button>
                      </div>
                    </div>
                  </Dialog.Panel>
                </Transition.Child>
              </div>
            </div>
          </Dialog>
        </Transition>

        {/* Report View Modal */}
        <Transition appear show={showReportModal} as={Fragment}>
          <Dialog as="div" open={showReportModal} onClose={() => setShowReportModal(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-4xl overflow-hidden rounded-lg border-0 p-0 ${isDark ? 'bg-gray-800' : 'bg-white'} shadow-lg`}>

                    {/* Header */}
                    <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">
                        Reports for Booking #{selectedOrderRow?.booking_id}
                      </div>
                      <button
                        type="button"
                        className="text-gray-500 hover:text-gray-700 dark:hover:text-primary"
                        onClick={() => setShowReportModal(false)}
                      >
                        <FaTimes />
                      </button>
                    </div>

                    {/* Table / Content */}
                    <div className="p-5">
                      {reports.length > 0 ? (
                        <div className="overflow-x-auto max-h-[400px]">
                          <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
                            <thead className="bg-gray-50 dark:bg-gray-700 sticky top-0 z-10">
                              <tr>
                                <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
                                  Order ID
                                </th>
                                <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
                                  Report Name
                                </th>
                                <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
                                  Created At
                                </th>
                                <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
                                  Reports
                                </th>
                              </tr>
                            </thead>
                            <tbody className="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
                              {reports.map((report, index) => (
                                <tr key={index} className="hover:bg-gray-50 dark:hover:bg-gray-700">
                                  <td className="px-4 py-3 whitespace-nowrap text-sm font-medium text-primary-DEFAULT dark:text-primary-light">
                                    #{report.order_id}
                                  </td>
                                  <td className="px-4 py-3 whitespace-nowrap text-sm text-gray-600 dark:text-gray-300">
                                    {report.keyName || report.order_report_name}
                                  </td>
                                  <td className="px-4 py-3 whitespace-nowrap text-sm text-gray-600 dark:text-gray-300">
                                    {report.date || report.created_at}
                                  </td>
                                  <td className="px-4 py-3 whitespace-nowrap text-sm text-gray-600 dark:text-gray-300">
                                    {report.files && report.files.length > 0 ? (
                                      <div className="flex flex-col space-y-2">
                                        {report.files.map((file: any, fIndex: number) => (
                                          <div key={fIndex} className="flex items-center space-x-3">
                                            <a
                                              href={file.file_path}
                                              target="_blank"
                                              rel="noopener noreferrer"
                                              className="text-blue-500 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300"
                                              title="View Report"
                                            >
                                              <FaEye className="h-5 w-5" />
                                            </a>
                                            <button
                                              onClick={() => handleDownload(file)}
                                              disabled={!!downloadProgress[file.file_path]}
                                              className="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200 flex items-center"
                                            >
                                              {downloadProgress[file.file_path] ? (
                                                <div className="flex items-center text-blue-500">
                                                  <ImSpinner2 className="w-4 h-4 animate-spin mr-1" />
                                                  {downloadProgress[file.file_path]}%
                                                </div>
                                              ) : (
                                                <FaDownload className="w-4 h-4 text-blue-500 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300" />
                                              )}
                                            </button>
                                            <span className="ml-2 text-sm text-gray-700 dark:text-gray-200">
                                              {file.file_name}
                                            </span>
                                          </div>
                                        ))}
                                      </div>
                                    ) : (
                                      <span className="text-gray-400 italic">Report not generated</span>
                                    )}
                                  </td>
                                </tr>
                              ))}
                            </tbody>
                          </table>
                        </div>
                      ) : (
                        <div className="text-center py-8 text-gray-500 dark:text-gray-400">
                          <FaKey className="mx-auto h-12 w-12 text-gray-300 dark:text-gray-600" />
                          <h3 className="mt-4 text-lg font-medium">No reports available</h3>
                          <p className="mt-2 text-sm">No reports have been generated for this booking yet.</p>
                        </div>
                      )}

                      {/* Modal Footer */}
                      <div className="flex justify-end space-x-3 pt-4 mt-6 border-t border-gray-200 dark:border-gray-700">
                        <button
                          type="button"
                          onClick={() => setShowReportModal(false)}
                          className="px-6 py-2 border border-gray-300 dark:border-gray-600 rounded-md text-secondary dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
                        >
                          Close
                        </button>
                      </div>
                    </div>

                  </Dialog.Panel>
                </Transition.Child>
              </div>
            </div>
          </Dialog>
        </Transition>

        <Transition appear show={showUserReportModal} as={Fragment}>
          <Dialog as="div" open={showUserReportModal} onClose={() => setShowUserReportModal(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-4xl overflow-hidden rounded-lg border-0 p-0 ${isDark ? 'bg-gray-800' : 'bg-white'} shadow-lg`}>

                    {/* Header */}
                    <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">
                        Reports for Booking {selectedOrderRow?.firstName}
                      </div>
                      <button
                        type="button"
                        className="text-gray-500 hover:text-gray-700 dark:hover:text-primary"
                        onClick={() => setShowUserReportModal(false)}
                      >
                        <FaTimes />
                      </button>
                    </div>

                    {/* Table / Content */}
                    <div className="p-5">
                      {reports.length > 0 ? (
                        <div className="overflow-x-auto max-h-[400px]">
                          <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
                            <thead className="bg-gray-50 dark:bg-gray-700 sticky top-0 z-10">
                              <tr>
                                <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
                                  Order ID
                                </th>
                                <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
                                  Report Name
                                </th>
                                <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
                                  Created At
                                </th>
                                <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
                                  Reports
                                </th>
                              </tr>
                            </thead>
                            <tbody className="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
                              {reports.map((report, index) => (
                                <tr key={index} className="hover:bg-gray-50 dark:hover:bg-gray-700">
                                  <td className="px-4 py-3 whitespace-nowrap text-sm font-medium text-primary-DEFAULT dark:text-primary-light">
                                    {report.order_id || "-"}
                                  </td>
                                  <td className="px-4 py-3 whitespace-nowrap text-sm text-gray-600 dark:text-gray-300">
                                    {report.keyName || report.order_report_name}
                                  </td>
                                  <td className="px-4 py-3 whitespace-nowrap text-sm text-gray-600 dark:text-gray-300">
                                    {report.date || report.created_at}
                                  </td>
                                  <td className="px-4 py-3 text-sm text-gray-600 dark:text-gray-300">
                                    {report.files && report.files.length > 0 ? (
                                      <div className="flex flex-col space-y-2">
                                        {report.files.map((file: any, fIndex: number) => (
                                          <div
                                            key={fIndex}
                                            className="flex items-center justify-between p-2 rounded-md bg-gray-50 dark:bg-gray-900 hover:bg-gray-100 dark:hover:bg-gray-700 transition"
                                          >
                                            <div className="flex items-center space-x-3">
                                              <a
                                                href={file.file_path}
                                                target="_blank"
                                                rel="noopener noreferrer"
                                                className="text-blue-500 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300"
                                                title="View Report"
                                              >
                                                <FaEye className="h-5 w-5" />
                                              </a>
                                              <button
                                                onClick={() => handleDownload(file)}
                                                disabled={!!downloadProgress[file.file_path]}
                                                className="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors duration-200"
                                              >
                                                {downloadProgress[file.file_path] ? (
                                                  <div className="flex items-center text-blue-500">
                                                    <ImSpinner2 className="w-4 h-4 animate-spin mr-1" />
                                                    {downloadProgress[file.file_path]}%
                                                  </div>
                                                ) : (
                                                  <FaDownload className="w-4 h-4 text-blue-500 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300" />
                                                )}
                                              </button>
                                              <span className="ml-2 text-sm text-gray-700 dark:text-gray-200">
                                                {file.file_name}
                                              </span>
                                            </div>
                                          </div>
                                        ))}
                                      </div>
                                    ) : (
                                      <span className="text-gray-400 italic">Report not generated</span>
                                    )}
                                  </td>
                                </tr>
                              ))}
                            </tbody>
                          </table>
                        </div>
                      ) : (
                        <div className="text-center py-8 text-gray-500 dark:text-gray-400">
                          <FaKey className="mx-auto h-12 w-12 text-gray-300 dark:text-gray-600" />
                          <h3 className="mt-4 text-lg font-medium">No reports available</h3>
                          <p className="mt-2 text-sm">No reports have been generated for this booking yet.</p>
                        </div>
                      )}

                      {/* Modal Footer */}
                      <div className="flex justify-end space-x-3 pt-4 mt-6 border-t border-gray-200 dark:border-gray-700">
                        <button
                          type="button"
                          onClick={() => setShowUserReportModal(false)}
                          className="px-6 py-2 border border-gray-300 dark:border-gray-600 rounded-md text-secondary dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
                        >
                          Close
                        </button>
                      </div>

                    </div>
                  </Dialog.Panel>
                </Transition.Child>
              </div>
            </div>
          </Dialog>
        </Transition>


        {/* Order Generation 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 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}
                          onChange={(e) => setSelectedKeys(e.target.value)}
                          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) => {
                            const alreadyUsed = localUsedKeys.includes(key.name);
                            return (
                              <option
                                key={key._id}
                                value={key.name}
                                disabled={alreadyUsed}
                                className={alreadyUsed ? 'text-gray-400' : ''}
                              >
                                {key.name} {alreadyUsed && '(Already used)'}
                              </option>
                            );
                          })}
                        </select>

                        {selectedKeys && (
                          <p className="mt-2 text-sm text-primary-DEFAULT dark:text-primary-light">
                            Selected: {selectedKeys}
                          </p>
                        )}
                      </div>

                      {generatedOrderIds.length > 0 && (
                        <div className="mt-6">
                          <h3 className="font-semibold text-primary-DEFAULT dark:text-primary-light mb-2">
                            Generated Order IDs:
                          </h3>
                          <div className="flex flex-wrap gap-2">
                            {generatedOrderIds.map((orderId, index) => (
                              <span
                                key={index}
                                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"
                              >
                                #{orderId}
                              </span>
                            ))}
                          </div>
                        </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 || isGenerating}
                          className={`btn rounded-lg px-4 py-2 flex items-center gap-2 transition-all duration-200
                          ${!selectedKeys || 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>

        <Transition appear show={showUploadModal} as={Fragment}>
          <Dialog as="div" open={showUploadModal} onClose={() => setShowUploadModal(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-lg overflow-hidden rounded-lg border-0 p-0 ${isDark ? 'bg-gray-800' : 'bg-white'} shadow-lg`}
                  >
                    {/* Header */}
                    <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">
                        Upload Files for Booking #{uploadBookingId}
                      </div>
                      <button
                        type="button"
                        className="text-gray-400 hover:text-gray-600 dark:hover:text-white transition-colors duration-200"
                        onClick={() => setShowUploadModal(false)}
                      >
                        <FaTimes />
                      </button>
                    </div>

                    {/* Body */}
                    <div className="p-6">
                      <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        Select Files (PDF, JPG, PNG)
                      </label>
                      <input
                        type="file"
                        multiple
                        accept=".pdf,.jpg,.jpeg,.png"
                        onChange={(e) => {
                          if (e.target.files) {
                            setSelectedFiles(Array.from(e.target.files));
                          }
                        }}
                        className="block w-full text-sm text-gray-900 border border-gray-300 rounded-lg cursor-pointer bg-gray-50 dark:text-gray-300 dark:bg-gray-800 dark:border-gray-600 focus:outline-none"
                      />

                      {/* Show selected files */}
                      {selectedFiles.length > 0 && (
                        <ul className="mt-4 space-y-2 text-sm text-gray-600 dark:text-gray-300">
                          {selectedFiles.map((file, idx) => (
                            <li key={idx} className="flex justify-between items-center border-b pb-1">
                              {file.name}
                              <span className="text-xs text-gray-400">{(file.size / 1024).toFixed(1)} KB</span>
                            </li>
                          ))}
                        </ul>
                      )}
                    </div>

                    {/* Footer */}
                    <div className="flex justify-end items-center px-6 py-4 gap-3 bg-gray-50 dark:bg-gray-800">
                      <button
                        type="button"
                        className="btn btn-outline-danger rounded-lg px-4 py-2 text-sm font-medium transition-all duration-200"
                        onClick={() => setShowUploadModal(false)}
                      >
                        Cancel
                      </button>
                      <button
                        type="button"
                        className="btn btn-primary rounded-lg px-4 py-2 text-sm font-medium bg-primary-DEFAULT hover:bg-primary-light border-primary-DEFAULT hover:border-primary-light text-white transition-all duration-200 shadow-primary hover:shadow-primary-lg"
                        disabled={uploading || selectedFiles.length === 0}
                        onClick={handleFileUpload}
                      >
                        {uploading ? "Uploading..." : "Upload Files"}
                      </button>
                    </div>
                  </Dialog.Panel>
                </Transition.Child>
              </div>
            </div>
          </Dialog>
        </Transition>

        <AutoCallerModal
          isOpen={showCallerModal}
          onClose={() => {
            setShowCallerModal(false);
            setSelectedBookingForCall(null);
          }}
          bookingId={selectedBookingForCall?.booking_id}
          customerId={selectedBookingForCall?.cust_id}
          customerName={selectedBookingForCall?.firstName}
          customerPhone={selectedBookingForCall?.phone}
          bookingDate={selectedBookingForCall?.date}
          bookingTime={selectedBookingForCall?.time}
          packageName={Array.isArray(selectedBookingForCall?.package) ? selectedBookingForCall.package.map((p: any) => p.package_name).join(', ') : ''}
        />

      </div>

    </div >
  );
};

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

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

export default OrderSorting;