"use client";
import React, { useState, useEffect } from "react";
import DashboardLayout from "@/components/layout/DashboardLayout";
import { useGlobalContext } from "@/context/Provider";
import apis, { BUCKET_ROOT } from "@/utils/apis";
import {
    Pagination,
    PaginationContent,
    PaginationLink,
    PaginationItem,
    PaginationPrevious,
    PaginationNext,
    PaginationEllipsis,
} from "@/components/ui/pagination";

interface Transaction {
    id: string;
    description: string;
    points: number;
    date: string;
    type: "earned" | "redeemed";
    orderId?: string;
    foodName?: string;
    foodImage?: string;
    restaurantImage?: string;
    _id?: 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;
};

const Loyality = () => {
    const { Toast } = useGlobalContext();
    const [walletBalance, setWalletBalance] = useState(0);
    const [history, setHistory] = useState<Transaction[]>([]);
    const [pageNumber, setPageNumber] = useState(1);
    const [totalPages, setTotalPages] = useState(1);
    const limit = 5;

    const fetchTransactionHistory = async (pageNumber: number, limit: number) => {
        try {
            const queryString = new URLSearchParams({
                page: String(pageNumber),
                limit: String(limit),
            }).toString();

            const res = await apis.LoyalityPoints.getHistory(queryString);
            const transactions = res?.result?.data || [];
            const total = res?.result?.total || 0;
            const balance = res?.result?.total_point || 0;
            setWalletBalance(balance);
            setTotalPages(Math.ceil(total / limit));

            const formattedHistory: Transaction[] = transactions.map((item: any) => {
                const date = new Date(item?.createdAt);
                const formattedDate = date.toLocaleString("en-GB", {
                    day: "2-digit",
                    month: "short",
                    year: "numeric",
                    hour: "2-digit",
                    minute: "2-digit",
                    hour12: true,
                });
                const finalFormattedDate = formattedDate.replace(",", " at");

                const foodItem = item?.order_id?.cart_items?.[0];
                const restaurantImage = item?.order_id?.restaurant_id?.image || "";

                return {
                    id: item._id,
                    description: item.type === "earned" ? "Points Earned" : "Points Redeemed",
                    points: item.points,
                    date: finalFormattedDate,
                    type: item.type,
                    orderId: item?.order_id?.order_id,
                    _id: item?.order_id?._id,
                    foodName: foodItem?.food_id?.name || "Unknown Food Item",
                    restaurantImage: restaurantImage,
                };
            });

            setHistory(formattedHistory);
        } catch (err) {
            Toast.error(err);
        }
    };

    useEffect(() => {
        fetchTransactionHistory(pageNumber, limit);
    }, [pageNumber]);

    return (
        <div className="flex flex-col min-h-screen p-5 max-w-7xl mx-auto">
            <div className="w-full">
                <h2 className="text-3xl font-semibold mb-6">Loyalty Points</h2>

                <div className="flex items-center justify-between">
                    <h2 className="text-xl font-semibold">
                        Total Points:{" "}
                        <span className="text-primary">
                            {Number(walletBalance).toFixed(2)}
                        </span>
                    </h2>
                </div>

                {/* Note Section below Total Points */}
                <div className="mt-4 p-4 bg-brand-50 border-l-4 border-primary text-primary rounded-lg">
                    <p className="font-semibold">Note:</p>
                    <p className="text-sm">
                        Earned points can be redeemed for your next order.
                    </p>
                </div>

                <div className="space-y-4 mt-6">
                    {history.length === 0 ? (
                        <p className="text-center text-gray-500">No transaction history available.</p>
                    ) : (
                        history.map((item) => (
                            <a
                                key={item.id}
                                href={`/summary?id=${item._id || item.id}`}
                                className="flex items-center justify-between bg-white p-4 rounded-lg shadow-sm border mt-2 hover:bg-gray-50 transition-colors block"
                            >
                                <div className="flex gap-4 items-start">
                                    <div className="flex-shrink-0 w-12 h-12 rounded-full bg-white border border-gray-200 shadow-sm flex items-center justify-center">
                                        {item?.restaurantImage && (
                                            <img
                                                src={BUCKET_ROOT + item.restaurantImage}
                                                alt={item?.foodName}
                                                width={40}
                                                height={40}
                                                className="w-12 h-12 rounded-full object-cover"
                                            />
                                        )}
                                    </div>

                                    <div>
                                        <p className="font-semibold">Order Id: {item?.orderId} </p>
                                        <p className="text-sm text-gray-500">
                                            {item.date}
                                        </p>
                                    </div>
                                </div>
                                <span
                                    className={`text-sm font-semibold px-3 py-1 rounded-md ${item?.type === "earned"
                                        ? "bg-brand-100 text-primary"
                                        : "bg-red-100 text-red-600"
                                        }`}
                                >
                                    {item.type === "earned" ? `+${item.points} points` : `-${item.points} points`}
                                </span>
                            </a>
                        ))
                    )}
                </div>

                {/* Pagination */}
                {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, index) => (
                                    <PaginationItem key={index}>
                                        {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>
        </div>
    );
};

export default function LoyalityPage() {
    return (
        <DashboardLayout>
            <Loyality />
        </DashboardLayout>
    );
}