'use client';

import React, { useEffect, useState } from 'react';
import { Card, CardContent } from '@/components/ui/card';
import { Loader2 } from 'lucide-react';
import { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from '@/components/ui/pagination';
import apis, { BUCKET_ROOT } from '@/utils/apis';
import DashboardLayout from '@/components/layout/DashboardLayout';
import { useGlobalContext } from '@/context/Provider';
import Image from 'next/image';
import { currency } from '@/lib/utils';

type BookingItem = {
    _id: string;
    booking_id: string;
    no_of_guest: number;
    total_booking_amount: number;
    status: string;
    createdAt: string;
    special_request?: string;
    occasion_type?: string;
    restaurant_id?: {
        restaurant_name?: string;
        image?: string;
        restaurant_phone?: string;
        country_code?: string;
    };
    slot_id?: {
        start?: string;
        end?: string;
    };
};

const getPaginationRange = (currentPage: number, totalPages: number, siblingCount = 1) => {
    const totalPageNumbers = siblingCount * 2 + 5;
    if (totalPages <= totalPageNumbers) return Array.from({ length: totalPages }, (_, i) => i + 1);

    const leftSiblingIndex = Math.max(currentPage - siblingCount, 2);
    const rightSiblingIndex = Math.min(currentPage + siblingCount, totalPages - 1);

    const shouldShowLeftEllipsis = leftSiblingIndex > 2;
    const shouldShowRightEllipsis = rightSiblingIndex < totalPages - 1;

    const range: (number | '...')[] = [1];

    if (shouldShowLeftEllipsis) range.push('...');

    for (let i = leftSiblingIndex; i <= rightSiblingIndex; i++) range.push(i);

    if (shouldShowRightEllipsis) range.push('...');

    range.push(totalPages);
    return range;
};

function BookingsList({ initialPage = 1, initialLimit = 9 }: { initialPage?: number; initialLimit?: number }) {
    const [pageNumber, setPageNumber] = useState(initialPage);
    const [limit] = useState(initialLimit);
    const [loading, setLoading] = useState(false);
    const [bookings, setBookings] = useState<BookingItem[]>([]);
    const [totalPages, setTotalPages] = useState(1);
    const { userInfo } = useGlobalContext();

    const fetchBookings = async (page: number) => {
        if (!userInfo?._id) return;

        try {
            setLoading(true);
            const params = new URLSearchParams({
                page: String(page),
                limit: String(limit),
                id: String(userInfo._id),
            });

            const res = await apis.Slots.getBookingList(params.toString());
            const payload = res?.data || res;

            setBookings(payload || []);
            const total = res?.total || 0;
            setTotalPages(Math.ceil(total / limit));
        } catch (err) {
            console.error('Failed to fetch bookings', err);
        } finally {
            setLoading(false);
        }
    };

    useEffect(() => {
        fetchBookings(pageNumber);
    }, [pageNumber, userInfo?._id]);

    const formatDateTime = (input?: string) => {
        if (!input) return '';
        const d = new Date(input);
        return (
            new Intl.DateTimeFormat('en-GB', {
                day: '2-digit',
                month: 'short',
                year: 'numeric',
            }).format(d) +
            ' at ' +
            new Intl.DateTimeFormat('en-US', {
                hour: '2-digit',
                minute: '2-digit',
                hour12: true,
            }).format(d)
        );
    };

    if (loading) return <p className="p-5 text-gray-500">Loading...</p>;
    if (!bookings.length) {
        return (
            <div className="flex flex-col items-center justify-center py-20 w-full text-center">
                <p className="text-gray-500 text-lg font-medium">No bookings found.</p>
            </div>
        );
    }

    return (
        <div className="flex flex-col min-h-screen p-6 max-w-7xl mx-auto">
            {/* Header */}
            <div className="flex items-center justify-between mb-6">
                <h2 className="text-2xl font-semibold">Bookings</h2>
            </div>

            {/* Bookings Grid */}
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
                {bookings.map((b) => {
                    const restaurantName = b.restaurant_id?.restaurant_name || 'Unknown Restaurant';
                    const restaurantImg = b.restaurant_id?.image || '';
                    const bookingDate = formatDateTime(b.createdAt);
                    const slotStart = b.slot_id?.start
                        ? new Date(b.slot_id.start).toLocaleString('en-US', {
                            year: 'numeric',
                            month: 'short',
                            day: '2-digit',
                            hour: '2-digit',
                            minute: '2-digit',
                        })
                        : '';

                    const slotEnd = b.slot_id?.end
                        ? new Date(b.slot_id.end).toLocaleTimeString('en-US', {
                            hour: '2-digit',
                            minute: '2-digit',
                        })
                        : '';

                    return (
                        <Card key={b._id} className="rounded-xl shadow-sm border border-gray-100">
                            <CardContent className="p-5">
                                <div className="flex items-start justify-between gap-4">
                                    {/* Left Section */}
                                    <div className="flex-1">
                                        <h3 className="text-lg font-bold">Booking Id: {b.booking_id}</h3>
                                        <p className="text-sm text-gray-400 mt-1">{bookingDate}</p>

                                        <div className="mt-3 flex items-center gap-2">
                                            {restaurantImg && (
                                                <img
                                                    src={BUCKET_ROOT + restaurantImg}
                                                    alt={restaurantName}
                                                    width={40}
                                                    height={40}
                                                    className="w-10 h-10 rounded-md object-cover border"
                                                />
                                            )}
                                            <div className="text-[hsl(var(--primary))] font-medium">{restaurantName}</div>
                                        </div>

                                        <div className="mt-4 grid grid-cols-3 gap-3">
                                            <div>
                                                <div className="font-semibold text-sm text-gray-700">Slot</div>
                                                <div className="text-xs text-gray-500 mt-1">
                                                    {slotStart}
                                                </div>
                                            </div>

                                            <div>
                                                <div className="font-semibold text-sm text-gray-700">Guests</div>
                                                <div className="text-xs text-gray-500 mt-1">{b.no_of_guest}</div>
                                            </div>

                                            <div>
                                                <div className="font-semibold text-sm text-gray-700">Status</div>
                                                <div
                                                    className={`text-xs mt-1 font-medium capitalize ${b.status?.toLowerCase() === 'paid'
                                                        ? 'text-green-600'
                                                        : b.status?.toLowerCase() === 'refunded'
                                                            ? 'text-red-500'
                                                            : b.status?.toLowerCase() === 'cancel'
                                                                ? 'text-red-600'
                                                                : b.status?.toLowerCase() === 'arrived'
                                                                    ? 'text-green-600'
                                                                    : 'text-gray-500'
                                                        }`}
                                                >
                                                    {b.status}
                                                </div>

                                            </div>
                                        </div>

                                        <div className="mt-4 grid grid-cols-2 gap-4">
                                            {b.occasion_type && (
                                                <div>
                                                    <div className="font-semibold text-sm text-gray-700">Occasion</div>
                                                    <div className="text-xs text-gray-500 mt-1">{b.occasion_type}</div>
                                                </div>
                                            )}
                                            {b.special_request && (
                                                <div>
                                                    <div className="font-semibold text-sm text-gray-700">Special Request</div>
                                                    <div className="text-xs text-gray-500 mt-1 line-clamp-2" title={b.special_request}>
                                                        {b.special_request}
                                                    </div>
                                                </div>
                                            )}
                                        </div>

                                        <div className="mt-4 border-t border-dashed pt-4"></div>
                                    </div>

                                    {/* Right Section */}
                                    <div className="flex flex-col items-end justify-between">
                                        <div className="text-sm text-gray-500">Booking amount</div>
                                        <div className="mt-2 text-right text-xl font-bold text-[hsl(var(--primary))]">
                                            {currency}{Number(b.total_booking_amount).toFixed(2)}
                                        </div>
                                    </div>
                                </div>
                            </CardContent>
                        </Card>
                    );
                })}
            </div>

            {/* Pagination at bottom */}
            {totalPages > 1 && (
                <div className="pagination-container">
                    <Pagination>
                        <PaginationPrevious
                            onClick={() => setPageNumber(prev => Math.max(prev - 1, 1))}
                            className="pagination-btn"
                        />
                        <PaginationContent>
                            {getPaginationRange(pageNumber, totalPages).map((p, i) => (
                                <PaginationItem key={i}>
                                    {p === '...' ? <PaginationEllipsis /> :
                                        <PaginationLink
                                            isActive={pageNumber === p}
                                            onClick={() => setPageNumber(Number(p))}
                                            className={
                                                pageNumber === p
                                                    ? "pagination-link-active"
                                                    : "pagination-link"
                                            }
                                        >
                                            {p}
                                        </PaginationLink>}
                                </PaginationItem>
                            ))}
                        </PaginationContent>
                        <PaginationNext
                            onClick={() => setPageNumber(prev => Math.min(prev + 1, totalPages))}
                            className="pagination-btn"
                        />
                    </Pagination>
                </div>
            )}
        </div>
    );
}

export default function BookingsPage() {
    return (
        <DashboardLayout>
            <BookingsList />
        </DashboardLayout>
    );
}