import React, { useEffect, useState } from 'react';
import { Link, useNavigate } from 'react-router-dom';
import { useDispatch, useSelector } from 'react-redux';
import { IRootState } from '../store';
import ReactApexChart from 'react-apexcharts';
import PerfectScrollbar from 'react-perfect-scrollbar';
import Dropdown from '../components/Dropdown';
import { setPageTitle } from '../store/themeConfigSlice';
import { getDashboardBookingsProcessCount, getDashboardChartData, getDashboardCustomerChartData, getRecentBookings, getRevenueChartData } from '../API';
import FullScreenLoader from '../FullScreenLoader';
import { useLoader } from '../store/LoaderProvider';

// Error Boundary Component
class ErrorBoundary extends React.Component<
  { children: React.ReactNode },
  { hasError: boolean }
> {
  constructor(props: { children: React.ReactNode }) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error: Error) {
    return { hasError: true };
  }

  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
    console.error('Chart Error:', error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return (
        <div className="p-4 text-center text-danger">
          <p>Chart failed to load. Please refresh the page.</p>
          <button 
            onClick={() => this.setState({ hasError: false })}
            className="btn btn-primary mt-2"
          >
            Retry
          </button>
        </div>
      );
    }

    return this.props.children;
  }
}

const Index = () => {
    const dispatch = useDispatch();
    const navigate = useNavigate();
    const { showLoader, hideLoader } = useLoader();

    useEffect(() => {
        dispatch(setPageTitle('ROWellnessSuite'));
    }, [dispatch]);

    const [email, setEmail] = useState(localStorage.getItem('email') || '');
    const [userRole, setUserRole] = useState<string | null>(null);
    const [isDataLoaded, setIsDataLoaded] = useState(false);

    const isDark = useSelector((state: IRootState) => state.themeConfig.theme === 'dark' || state.themeConfig.isDarkMode);
    const isRtl = useSelector((state: IRootState) => state.themeConfig.rtlClass) === 'rtl';

    // State for different chart data with safe defaults
    const [bookingsChartData, setBookingsChartData] = useState({
        labels: [] as string[],
        bookings: [] as number[],
        completed_bookings: [] as number[],
        total_bookings: "0",
    });

    const [customerChartData, setCustomerChartData] = useState({
        labels: [] as string[],
        customers: [] as number[],
        total_customers: "0",
    });

    const [dailySalesData, setDailySalesData] = useState({
        labels: [] as string[],
        sales: [] as number[],
        completed_revenue: [] as number[],
        total_revenue: "0",
    });

    const [bookingStatusCount, setBookingStatusCount] = useState({
        completed: 0,
        processing: 0,
        pending: 0
    });

    const [recentBookings, setRecentBookings] = useState<any[]>([]);

    const [loading, setLoading] = useState(true);
    const [revenueLoading, setRevenueLoading] = useState(true);
    const [bookingLoading, setBookingLoading] = useState(true);

    useEffect(() => {
        const loggedIn = localStorage.getItem('isLoggedIn') === 'true';
        const role = localStorage.getItem("role");
        setUserRole(role);
        
        if (!loggedIn) {
            navigate('/login');
            return;
        }

        const fetchAllData = async () => {
            try {
                setLoading(true);
                showLoader();
                await Promise.all([
                    fetchBookingsData('year'),
                    fetchCustomerData('year'),
                    fetchDailySalesData('week'),
                    fetchBookingStatusCount(),
                    fetchRecentBookings()
                ]);
                setIsDataLoaded(true);
            } catch (error) {
                console.error('Error fetching dashboard data:', error);
            } finally {
                setLoading(false);
                hideLoader();
            }
        };

        fetchAllData();
    }, [navigate]);

    const fetchBookingsData = async (type: string) => {
        try {
            const response = await getDashboardChartData({ type, data_type: 'bookings', email });
            if (response.status === 'success') {
                setBookingsChartData({
                    labels: response.data.labels || [],
                    bookings: response.data.bookings || [],
                    completed_bookings: response.data.completed_bookings || [],
                    total_bookings: response.data.total_booking || "0",
                });
            }
        } catch (error) {
            console.error('Error fetching bookings data:', error);
        }
    };

    const fetchCustomerData = async (type: string) => {
        try {
            const response = await getDashboardCustomerChartData(email);
            if (response.status === 'success') {
                setCustomerChartData({
                    labels: response.data.labels || [],
                    customers: response.data.customers || [],
                    total_customers: response.data.total_customers || "0",
                });
            }
        } catch (error) {
            console.error('Error fetching customer data:', error);
        }
    };

    const fetchDailySalesData = async (type: string) => {
        try {
            setRevenueLoading(true);
            const response = await getRevenueChartData({ type, data_type: 'sales', email });
            if (response.status === 'success') {
                setDailySalesData({
                    labels: response.data.labels || [],
                    sales: response.data.booking_revenue || [],
                    completed_revenue: response.data.completed_revenue || [],
                    total_revenue: response.data.total_revenue || "0",
                });
            }
        } catch (error) {
            console.error('Error fetching sales data:', error);
        } finally {
            setRevenueLoading(false);
        }
    };

    const fetchBookingStatusCount = async () => {
        try {
            setBookingLoading(true);
            const response = await getDashboardBookingsProcessCount(email);
            if (response.status === true) {
                setBookingStatusCount({
                    completed: response.data?.completed || 0,
                    processing: response.data?.processing || 0,
                    pending: response.data?.pending || 0
                });
            }
        } catch (error) {
            console.error('Error fetching booking status count:', error);
        } finally {
            setBookingLoading(false);
        }
    };

    const fetchRecentBookings = async () => {
        try {
            setBookingLoading(true);
            const response = await getRecentBookings(email);
            if (response.status === "success") {
                setRecentBookings(response.data || []);
            }
        } catch (error) {
            console.error('Error fetching recent bookings:', error);
        } finally {
            setBookingLoading(false);
        }
    };

    const handleBookingsTimePeriodChange = (period: string) => {
        fetchBookingsData(period.toLowerCase());
    };

    const handleCustomerTimePeriodChange = (period: string) => {
        fetchCustomerData(period.toLowerCase());
    };

    const handleSalesTimePeriodChange = (period: string) => {
        fetchDailySalesData(period.toLowerCase());
    };

    // Safe chart configurations with default values
    const bookingsChart: any = {
        series: [
            {
                name: 'Bookings',
                data: bookingsChartData.bookings.length > 0 ? bookingsChartData.bookings : [0],
            },
            {
                name: 'Completed',
                data: bookingsChartData.completed_bookings.length > 0 ? bookingsChartData.completed_bookings : [0],
            },
        ],
        options: {
            chart: {
                height: 325,
                type: 'line',
                fontFamily: 'Nunito, sans-serif',
                zoom: { enabled: false },
                toolbar: { show: false },
            },
            dataLabels: { enabled: false },
            stroke: {
                width: 3,
                curve: 'smooth',
            },
            colors: isDark ? ['#2196F3', '#00C853'] : ['#1B55E2', '#28a745'],
            markers: {
                size: 5,
                hover: { size: 7 },
            },
            xaxis: {
                categories: bookingsChartData.labels.length > 0 ? bookingsChartData.labels : ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
                axisBorder: { show: false },
                axisTicks: { show: false },
                labels: { style: { fontSize: '12px' } },
            },
            yaxis: {
                tickAmount: 5,
                labels: {
                    formatter: (value: number) => value?.toString() || '0',
                    style: { fontSize: '12px' },
                },
                min: 0,
            },
            grid: {
                borderColor: isDark ? '#191E3A' : '#E0E6ED',
                strokeDashArray: 5,
                xaxis: { lines: { show: true } },
                yaxis: { lines: { show: false } },
            },
            tooltip: {
                theme: isDark ? 'dark' : 'light',
            },
        },
    };

    // Customer Growth Chart
    const customerChart: any = {
        series: [
            {
                name: 'Customers',
                data: customerChartData.customers.length > 0 ? customerChartData.customers : [0],
            },
        ],
        options: {
            chart: {
                height: 325,
                type: 'area',
                fontFamily: 'Nunito, sans-serif',
                toolbar: { show: false },
                zoom: { enabled: false },
            },
            dataLabels: { enabled: false },
            stroke: {
                width: 2,
                curve: 'smooth',
            },
            fill: {
                type: 'gradient',
                gradient: {
                    shadeIntensity: 1,
                    opacityFrom: 0.7,
                    opacityTo: 0.3,
                    stops: [0, 90, 100]
                },
            },
            colors: isDark ? ['#00E396'] : ['#00E396'],
            xaxis: {
                categories: customerChartData.labels.length > 0 ? customerChartData.labels : ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
                axisBorder: { show: false },
                axisTicks: { show: false },
                labels: {
                    style: { fontSize: '12px' },
                },
            },
            yaxis: {
                tickAmount: 5,
                labels: {
                    formatter: (value: number) => value?.toString() || '0',
                    style: { fontSize: '12px' },
                },
                min: 0,
            },
            grid: {
                borderColor: isDark ? '#191E3A' : '#E0E6ED',
                strokeDashArray: 5,
                xaxis: { lines: { show: true } },
                yaxis: { lines: { show: false } },
            },
            tooltip: {
                theme: isDark ? 'dark' : 'light',
            },
        },
    };

    // Booking Status Chart (Donut)
    const bookingStatusChart: any = {
        series: [bookingStatusCount.completed, bookingStatusCount.processing, bookingStatusCount.pending],
        options: {
            chart: {
                type: 'donut',
                height: 460,
                fontFamily: 'Nunito, sans-serif',
            },
            dataLabels: {
                enabled: false,
            },
            stroke: {
                show: true,
                width: 25,
                colors: isDark ? '#0e1726' : '#fff',
            },
            colors: isDark ? ['#5c1ac3', '#e2a03f', '#e7515a'] : ['#5c1ac3', '#e2a03f', '#e7515a'],
            legend: {
                position: 'bottom',
                horizontalAlign: 'center',
                fontSize: '14px',
                markers: {
                    width: 10,
                    height: 10,
                    offsetX: -2,
                },
                height: 50,
                offsetY: 20,
            },
            plotOptions: {
                pie: {
                    donut: {
                        size: '65%',
                        background: 'transparent',
                        labels: {
                            show: true,
                            name: {
                                show: true,
                                fontSize: '16px',
                                offsetY: -10,
                            },
                            value: {
                                show: true,
                                fontSize: '26px',
                                color: isDark ? '#bfc9d4' : undefined,
                                offsetY: 16,
                                formatter: (val: any) => {
                                    return val?.toString() || '0';
                                },
                            },
                            total: {
                                show: true,
                                label: 'Total',
                                color: '#888ea8',
                                fontSize: '16px',
                                formatter: (w: any) => {
                                    return w.globals.seriesTotals.reduce(function (a: any, b: any) {
                                        return a + b;
                                    }, 0);
                                },
                            },
                        },
                    },
                },
            },
            labels: ['Completed', 'Processing', 'Pending'],
            states: {
                hover: {
                    filter: {
                        type: 'none',
                        value: 0.15,
                    },
                },
                active: {
                    filter: {
                        type: 'none',
                        value: 0.15,
                    },
                },
            },
        },
    };

    // Daily Sales Chart (Bar Chart)
    const dailySalesChart: any = {
        series: [
            {
                name: 'Revenue',
                data: dailySalesData.sales.length > 0 ? dailySalesData.sales : [0],
            },
            {
                name: 'Completed Revenue',
                data: dailySalesData.completed_revenue.length > 0 ? dailySalesData.completed_revenue : [0],
            },
        ],
        options: {
            chart: {
                height: 325,
                type: 'bar',
                fontFamily: 'Nunito, sans-serif',
                toolbar: {
                    show: false,
                },
            },
            plotOptions: {
                bar: {
                    borderRadius: 4,
                    horizontal: false,
                    columnWidth: '55%',
                },
            },
            dataLabels: {
                enabled: false,
            },
            stroke: {
                show: true,
                width: 2,
                colors: ['transparent'],
            },
            colors: isDark 
                ? ['#FF4560', '#00E396']
                : ['#FF4560', '#008FFB'],
            xaxis: {
                categories: dailySalesData.labels.length > 0 ? dailySalesData.labels : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                axisBorder: {
                    show: false,
                },
                axisTicks: {
                    show: false,
                },
                labels: {
                    style: {
                        fontSize: '12px',
                    },
                },
            },
            yaxis: {
                labels: {
                    formatter: (value: number) => `$${value || 0}`,
                },
                min: 0,
            },
            fill: {
                opacity: 1,
            },
            tooltip: {
                y: {
                    formatter: (val: number) => `$${val || 0}`,
                },
            },
            grid: {
                borderColor: isDark ? '#191E3A' : '#E0E6ED',
                strokeDashArray: 5,
                xaxis: {
                    lines: {
                        show: true,
                    },
                },
                yaxis: {
                    lines: {
                        show: false,
                    },
                },
            },
        },
    };

    // Show full screen loading state
    if (loading && !isDataLoaded) {
        return <FullScreenLoader />;
    }

    // Prevent rendering on server side
    if (typeof window === 'undefined') {
        return null;
    }

    return (
        <div>
            <div className={loading ? 'opacity-50 pointer-events-none' : ''}>
                <div className="grid xl:grid-cols-3 gap-6 mb-6">
                    {/* Bookings Chart */}
                    <div className="panel h-full xl:col-span-2">
                        <div className="flex items-center justify-between dark:text-white-light mb-5">
                            <h5 className="font-semibold text-lg">Bookings</h5>
                            <div className="dropdown">
                                <Dropdown
                                    offset={[0, 1]}
                                    placement={`${isRtl ? 'bottom-start' : 'bottom-end'}`}
                                    button={
                                        <svg className="w-5 h-5 text-black/70 dark:text-white/70 hover:!text-primary" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <circle cx="5" cy="12" r="2" stroke="currentColor" strokeWidth="1.5" />
                                            <circle opacity="0.5" cx="12" cy="12" r="2" stroke="currentColor" strokeWidth="1.5" />
                                            <circle cx="19" cy="12" r="2" stroke="currentColor" strokeWidth="1.5" />
                                        </svg>
                                    }
                                >
                                    <ul>
                                        <li>
                                            <button type="button" onClick={() => handleBookingsTimePeriodChange('week')}>This Week</button>
                                        </li>
                                        <li>
                                            <button type="button" onClick={() => handleBookingsTimePeriodChange('month')}> This Month</button>
                                        </li>
                                        <li>
                                            <button type="button" onClick={() => handleBookingsTimePeriodChange('year')}> This Year</button>
                                        </li>
                                    </ul>
                                </Dropdown>
                            </div>
                        </div>
                        <p className="text-lg dark:text-white-light/90">
                            Total Bookings <span className="text-primary ml-2">{bookingsChartData.total_bookings || "0"}</span>
                        </p>
                        <div className="relative">
                            <div className="bg-white dark:bg-black rounded-lg overflow-hidden">
                                {loading ? (
                                    <div className="min-h-[325px] grid place-content-center bg-white-light/30 dark:bg-dark dark:bg-opacity-[0.08]">
                                        <span className="animate-spin border-4 border-primary !border-l-transparent rounded-full w-8 h-8 inline-flex"></span>
                                    </div>
                                ) : (
                                    <ErrorBoundary>
                                        <ReactApexChart 
                                            key={`bookings-${bookingsChartData.labels?.length}-${loading}`}
                                            series={bookingsChart.series} 
                                            options={bookingsChart.options} 
                                            type="line" 
                                            height={325} 
                                        />
                                    </ErrorBoundary>
                                )}
                            </div>
                        </div>
                    </div>

                    {/* Booking Status */}
                    <div className="panel h-full">
                        <div className="flex items-center mb-5">
                            <h5 className="font-semibold text-lg dark:text-white-light">Booking Status</h5>
                        </div>
                        <div>
                            <div className="bg-white dark:bg-black rounded-lg overflow-hidden">
                                {bookingLoading ? (
                                    <div className="min-h-[325px] grid place-content-center bg-white-light/30 dark:bg-dark dark:bg-opacity-[0.08]">
                                        <span className="animate-spin border-4 border-primary !border-l-transparent rounded-full w-8 h-8 inline-flex"></span>
                                    </div>
                                ) : (
                                    <ErrorBoundary>
                                        <ReactApexChart 
                                            key={`status-${bookingStatusCount.completed}-${bookingStatusCount.processing}-${bookingStatusCount.pending}`}
                                            series={bookingStatusChart.series} 
                                            options={bookingStatusChart.options} 
                                            type="donut" 
                                            height={460} 
                                        />
                                    </ErrorBoundary>
                                )}
                            </div>
                        </div>
                    </div>
                </div>

                {userRole === 'doctor' ? (
                    <div className="grid xl:grid-cols-2 gap-6 mb-6">
                        <div className="panel h-full">
                            <div className="flex items-center justify-between mb-5">
                                <h5 className="font-semibold text-lg dark:text-white-light">
                                    Customer Growth
                                </h5>
                            </div>
                            <p className="text-lg dark:text-white-light/90">
                                Total Customers <span className="text-primary ml-2">{customerChartData.total_customers || "0"}</span>
                            </p>
                            <div>
                                <div className="bg-white dark:bg-black rounded-lg overflow-hidden">
                                    {bookingLoading ? (
                                        <div className="min-h-[325px] grid place-content-center bg-white-light/30 dark:bg-dark dark:bg-opacity-[0.08]">
                                            <span className="animate-spin border-4 border-primary !border-l-transparent rounded-full w-8 h-8 inline-flex"></span>
                                        </div>
                                    ) : (
                                        <ErrorBoundary>
                                            <ReactApexChart
                                                key={`customer-${customerChartData.labels?.length}`}
                                                series={customerChart.series}
                                                options={customerChart.options}
                                                type="area"
                                                height={325}
                                            />
                                        </ErrorBoundary>
                                    )}
                                </div>
                            </div>
                        </div>

                        <div className="panel h-full w-full">
                            <div className="flex items-center justify-between mb-5">
                                <h5 className="font-semibold text-lg dark:text-white-light">Recent Bookings</h5>
                            </div>
                            <div className="table-responsive">
                                <table className="w-full">
                                    <thead>
                                        <tr>
                                            <th className="ltr:rounded-l-md rtl:rounded-r-md">Customer</th>
                                            <th>Package</th>
                                            <th>Status</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {bookingLoading ? (
                                            <tr>
                                                <td colSpan={3} className="py-10 text-center">
                                                    <span className="animate-spin border-4 border-primary !border-l-transparent rounded-full w-8 h-8 inline-flex"></span>
                                                </td>
                                            </tr>
                                        ) : recentBookings.length === 0 ? (
                                            <tr>
                                                <td colSpan={3} className="py-10 text-center text-black dark:text-white">
                                                    No record found
                                                </td>
                                            </tr>
                                        ) : (
                                            recentBookings.map((booking) => (
                                                <tr
                                                    key={booking._id}
                                                    className="text-black hover:text-black dark:hover:text-white-light/90 group"
                                                >
                                                    <td className="min-w-[150px] text-black dark:text-white">
                                                        <div className="flex items-center">
                                                            <span className="whitespace-nowrap">{booking.customer_name || `Customer ${booking.cust_id}`}</span>
                                                        </div>
                                                    </td>
                                                    <td className="text-primary">
                                                        {booking.package && booking.package.length > 0 ? (
                                                            booking.package.map((pkg: any, index: number) => (
                                                                <div key={index} className="text-sm">
                                                                    {pkg.name}
                                                                </div>
                                                            ))
                                                        ) : (
                                                            booking.package_name || "No packages"
                                                        )}
                                                    </td>
                                                    <td>
                                                        <span
                                                            className={`badge shadow-md dark:group-hover:bg-transparent ${
                                                                booking.status === "active"
                                                                    ? "bg-success"
                                                                    : booking.status === "pending"
                                                                    ? "bg-warning"
                                                                    : booking.status === "cancelled"
                                                                    ? "bg-danger"
                                                                    : "bg-secondary"
                                                            }`}
                                                        >
                                                            {booking.status ? (booking.status.charAt(0).toUpperCase() + booking.status.slice(1)) : 'Unknown'}
                                                        </span>
                                                    </td>
                                                </tr>
                                            ))
                                        )}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                ) : (
                    <>
                        <div className="grid xl:grid-cols-2 gap-6 mb-6">
                            <div className="panel h-full">
                                <div className="flex items-center justify-between mb-5">
                                    <h5 className="font-semibold text-lg dark:text-white-light">
                                        Customer Growth
                                    </h5>
                                </div>
                                <p className="text-lg dark:text-white-light/90">
                                    Total Customers <span className="text-primary ml-2">{customerChartData.total_customers || "0"}</span>
                                </p>
                                <div>
                                    <div className="bg-white dark:bg-black rounded-lg overflow-hidden">
                                        {bookingLoading ? (
                                            <div className="min-h-[325px] grid place-content-center bg-white-light/30 dark:bg-dark dark:bg-opacity-[0.08]">
                                                <span className="animate-spin border-4 border-primary !border-l-transparent rounded-full w-8 h-8 inline-flex"></span>
                                            </div>
                                        ) : (
                                            <ErrorBoundary>
                                                <ReactApexChart
                                                    key={`customer-${customerChartData.labels?.length}`}
                                                    series={customerChart.series}
                                                    options={customerChart.options}
                                                    type="area"
                                                    height={325}
                                                />
                                            </ErrorBoundary>
                                        )}
                                    </div>
                                </div>
                            </div>

                            <div className="panel h-full">
                                <div className="flex items-center justify-between mb-5">
                                    <h5 className="font-semibold text-lg dark:text-white-light">
                                        Revenue
                                    </h5>
                                    <div className="dropdown">
                                        <Dropdown
                                            offset={[0, 1]}
                                            placement={`${isRtl ? 'bottom-start' : 'bottom-end'}`}
                                            button={
                                                <svg className="w-5 h-5 text-black/70 dark:text-white/70 hover:!text-primary" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                    <circle cx="5" cy="12" r="2" stroke="currentColor" strokeWidth="1.5" />
                                                    <circle opacity="0.5" cx="12" cy="12" r="2" stroke="currentColor" strokeWidth="1.5" />
                                                    <circle cx="19" cy="12" r="2" stroke="currentColor" strokeWidth="1.5" />
                                                </svg>
                                            }
                                        >
                                            <ul>
                                                <li>
                                                    <button type="button" onClick={() => handleSalesTimePeriodChange('week')}>This Week</button>
                                                </li>
                                                <li>
                                                    <button type="button" onClick={() => handleSalesTimePeriodChange('month')}>This Month</button>
                                                </li>
                                                <li>
                                                    <button type="button" onClick={() => handleSalesTimePeriodChange('year')}>This Year</button>
                                                </li>
                                            </ul>
                                        </Dropdown>
                                    </div>
                                </div>
                                <p className="text-lg dark:text-white-light/90">
                                    Total Revenue <span className="text-primary ml-2">${dailySalesData.total_revenue || "0"}</span>
                                </p>
                                <div>
                                    <div className="bg-white dark:bg-black rounded-lg overflow-hidden">
                                        {revenueLoading ? (
                                            <div className="min-h-[325px] grid place-content-center bg-white-light/30 dark:bg-dark dark:bg-opacity-[0.08]">
                                                <span className="animate-spin border-4 border-primary !border-l-transparent rounded-full w-8 h-8 inline-flex"></span>
                                            </div>
                                        ) : (
                                            <ErrorBoundary>
                                                <ReactApexChart 
                                                    key={`sales-${dailySalesData.labels?.length}`}
                                                    series={dailySalesChart.series} 
                                                    options={dailySalesChart.options} 
                                                    type="bar" 
                                                    height={325} 
                                                />
                                            </ErrorBoundary>
                                        )}
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div className="grid lg:grid-cols-1 grid-cols-1 gap-6">
                            <div className="panel h-full w-full">
                                <div className="flex items-center justify-between mb-5">
                                    <h5 className="font-semibold text-lg dark:text-white-light">Recent Bookings</h5>
                                </div>
                                <div className="table-responsive">
                                    <table className="w-full">
                                        <thead>
                                            <tr>
                                                <th className="ltr:rounded-l-md rtl:rounded-r-md">Customer</th>
                                                <th>Package</th>
                                                <th>Status</th>
                                                <th>Payment Status</th>
                                                <th>Payment Method</th>
                                                <th className="ltr:rounded-r-md rtl:rounded-l-md">Price</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            {bookingLoading ? (
                                                <tr>
                                                    <td colSpan={6} className="py-10 text-center">
                                                        <span className="animate-spin border-4 border-primary !border-l-transparent rounded-full w-8 h-8 inline-flex"></span>
                                                    </td>
                                                </tr>
                                            ) : recentBookings.length === 0 ? (
                                                <tr>
                                                    <td colSpan={6} className="py-10 text-center text-black dark:text-white">
                                                        No record found
                                                    </td>
                                                </tr>
                                            ) : (
                                                recentBookings.map((booking) => (
                                                    <tr
                                                        key={booking._id}
                                                        className="text-black hover:text-black dark:hover:text-white-light/90 group"
                                                    >
                                                        <td className="min-w-[150px] text-black dark:text-white">
                                                            <div className="flex items-center">
                                                                <span className="whitespace-nowrap">{booking.customer_name || `Customer ${booking.cust_id}`}</span>
                                                            </div>
                                                        </td>
                                                        <td className="text-primary">
                                                            {booking.package && booking.package.length > 0 ? (
                                                                booking.package.map((pkg: any, index: number) => (
                                                                    <div key={index} className="text-sm">
                                                                        {pkg.name}
                                                                    </div>
                                                                ))
                                                            ) : (
                                                                booking.package_name || "No packages"
                                                            )}
                                                        </td>
                                                        <td>
                                                            <span
                                                                className={`badge shadow-md   ${
                                                                    booking.status === "active"
                                                                        ? "bg-success"
                                                                        : booking.status === "pending"
                                                                        ? "bg-warning"
                                                                        : booking.status === "cancelled"
                                                                        ? "bg-danger"
                                                                        : "bg-secondary"
                                                                }`}
                                                            >
                                                                {booking.status ? (booking.status.charAt(0).toUpperCase() + booking.status.slice(1)) : 'Unknown'}
                                                            </span>
                                                        </td>

                                                        <td className="text-primary">
                                                            <span
                                                                className={`badge shadow-md  ${
                                                                    booking.payment_status === "paid" ? "bg-success" : "bg-danger"
                                                                }`}
                                                            >
                                                                {booking.payment_status ? (booking.payment_status.charAt(0).toUpperCase() +
                                                                    booking.payment_status.slice(1)) : 'Unknown'}
                                                            </span>
                                                        </td>
                                                        <td className="text-primary">
                                                            {booking.payment_method ? (booking.payment_method.charAt(0).toUpperCase() +
                                                                booking.payment_method.slice(1)) : 'Unknown'}
                                                        </td>
                                                        <td className="text-primary">${booking.rs || '0'}</td>
                                                    </tr>
                                                ))
                                            )}
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </>
                )}
            </div>
        </div>
    );
};

export default Index;