"use client";
import React, { useState, useEffect } from "react";
import DashboardLayout from "@/components/layout/DashboardLayout";
import { useGlobalContext } from "@/context/Provider";
import Image from "next/image";

import { Modal } from "@/components/ui/modal";
import apis from "@/utils/apis";
import PaymentModal from "@/components/payment/page";
import {
    Pagination,
    PaginationContent,
    PaginationLink,
    PaginationItem,
    PaginationPrevious,
    PaginationNext,
    PaginationEllipsis,
} from "@/components/ui/pagination";
import { currency } from "@/lib/utils";

interface OrderIdObject {
    _id: string;
    order_status?: string;
}

interface Transaction {
    id: string;
    description: string;
    amount: number;
    date: string;
    type: "CREDIT" | "DEBIT";
    order_id?: string | OrderIdObject;
    is_expired?: boolean;
}

interface PaymentGatewayConfig {
    paymentGateway: "stripe" | "razorpay" | "paytab" | "cashfree";
    stripe?: {
        key: string;
        secret: string;
        webhook: string;
    };
    razorpay?: {
        key: string;
        secret: string;
        bank_account: string;
    };
    cashfree?: {
        client_id: string;
        client_secret: string;
        webhook_secret: string;
    };
}

type WalletTab = "WALLET" | "PROMO_WALLET";

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 Wallet = () => {
    const { Toast } = useGlobalContext();
    const [activeTab, setActiveTab] = useState<WalletTab>("WALLET");
    const [walletBalance, setWalletBalance] = useState(0);
    const [promoWalletBalance, setPromoWalletBalance] = useState(0);
    const [showModal, setShowModal] = useState(false);
    const [amount, setAmount] = useState(0);
    const [paymentModalOpen, setPaymentModalOpen] = useState(false);
    const [history, setHistory] = useState<Transaction[]>([]);
    const [customAmount, setCustomAmount] = useState("");
    const [clientSecret, setClientSecret] = useState("");
    const [pageNumber, setPageNumber] = useState(1);
    const [totalPages, setTotalPages] = useState(1);
    const [paymentConfig, setPaymentConfig] = useState<PaymentGatewayConfig | null>(null);
    const limit = 10;

    const fetchPaymentConfiguration = async () => {
        try {
            const query = new URLSearchParams({ type: "payment" }).toString();
            const res = await apis.ConfigurationType.listing(query);

            if (res?.data) {
                setPaymentConfig(res.data);
            }
        } catch (err) {
            Toast.error(err);
        }
    };

    const fetchWalletBalance = async () => {
        try {
            const res = await apis.Wallet.getWalletBalance();
            const balance = res?.data?.balance || 0;
            setWalletBalance(balance);
        } catch (err) {
            Toast.error(err);
        }
    };

    const fetchPromoWalletBalance = async () => {
        try {
            const res = await apis.Wallet.getWalletBalance();
            const balance = res?.data?.promo_balance || 0;
            setPromoWalletBalance(balance);
        } catch (err) {
            Toast.error(err);
        }
    };

    const loadRazorpayScript = () => {
        return new Promise((resolve) => {
            const script = document.createElement("script");
            script.src = "https://checkout.razorpay.com/v1/checkout.js";
            script.onload = () => resolve(true);
            script.onerror = () => resolve(false);
            document.body.appendChild(script);
        });
    };

    const loadCashfreeScript = () => {
        return new Promise((resolve) => {
            if ((window as any).Cashfree) {
                resolve(true);
                return;
            }
            const script = document.createElement("script");
            script.src = "https://sdk.cashfree.com/js/v3/cashfree.js";
            script.onload = () => resolve(true);
            script.onerror = () => resolve(false);
            document.body.appendChild(script);
        });
    };

    const fetchTransactionHistory = async (pageNum: number, lim: number, tab: WalletTab) => {
        try {
            const query: Record<string, string> = {
                pageNumber: String(pageNum),
                limit: String(lim),
            };

            if (tab === "PROMO_WALLET") {
                query.wallet_type = "PROMO_WALLET";
            }

            const queryString = new URLSearchParams(query).toString();

            const res = await apis.Wallet.getTransactionHistory(queryString);
            const transactions = res?.result?.transactions || [];
            const total = res?.result?.total || 0;
            setTotalPages(Math.ceil(total / lim));

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

                return {
                    id: item._id,
                    description: item.description,
                    amount: item.amount,
                    date: formattedDate,
                    type: item.type,
                    order_id: item.order_id,
                    is_expired: item.is_expired
                };
            });

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

    useEffect(() => {
        fetchPaymentConfiguration();
        fetchWalletBalance();
        fetchPromoWalletBalance();
    }, []);

    useEffect(() => {
        setPageNumber(1);
        setHistory([]);
    }, [activeTab]);

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

    const handleAddMoney = async () => {
        if (!paymentConfig) {
            Toast.error("Payment configuration not loaded");
            return;
        }

        const numericAmount = parseFloat(customAmount);

        if (customAmount && !isNaN(numericAmount) && numericAmount > 0) {
            setAmount(numericAmount);
        } else {
            Toast.error("Please enter a valid amount");
            return;
        }

        setShowModal(false);

        try {
            const payload = {
                amount: numericAmount,
            };
            const res = await apis.Wallet.addMoney(payload);

            if (paymentConfig.paymentGateway === "cashfree" && res?.cashfree) {
                const scriptLoaded = await loadCashfreeScript();
                if (!scriptLoaded) {
                    Toast.error("Cashfree SDK failed to load");
                    return;
                }

                if (!(window as any).Cashfree) {
                    Toast.error("Cashfree SDK not available");
                    return;
                }

                const isSandbox = !paymentConfig.cashfree?.client_id || paymentConfig.cashfree.client_id.startsWith("TEST");
                const cashfree = (window as any).Cashfree({
                    mode: isSandbox ? "sandbox" : "production",
                });

                const checkoutOptions = {
                    paymentSessionId: res.cashfree.payment_session_id,
                    redirectTarget: "_self",
                };

                cashfree.checkout(checkoutOptions);
                return;
            }

            if (paymentConfig.paymentGateway === "razorpay") {
                const scriptLoaded = await loadRazorpayScript();
                if (!scriptLoaded) {
                    Toast.error("Razorpay SDK failed to load");
                    return;
                }

                if (!paymentConfig.razorpay?.key) {
                    Toast.error("Razorpay key not configured");
                    return;
                }

                const options = {
                    key: paymentConfig.razorpay.key,
                    amount: res.razorpay.amount,
                    currency: res.razorpay.currency,
                    description: "Add to Wallet",
                    order_id: res.razorpay.id,
                    handler: function (response: any) {
                        Toast.success("Payment successful");
                        fetchWalletBalance();
                        fetchTransactionHistory(pageNumber, limit, activeTab);
                    },
                    prefill: {
                        name: "User Name",
                        email: "user@example.com",
                        contact: "9999999999",
                    },
                    theme: {
                        color: "hsl(var(--primary))",
                    },
                };

                const razorpay = new (window as any).Razorpay(options);
                razorpay.open();
                return;
            }
            if (res?.paytab?.redirect_url) {
                window.location.href = res.paytab.redirect_url;
                return;
            }

            if (paymentConfig.paymentGateway === "stripe" && res?.client_secret) {
                sessionStorage.setItem("clientSecret", res.client_secret);
                setClientSecret(res.client_secret);
                setPaymentModalOpen(true);
            }
        } catch (err) {
            Toast.error("Failed to create payment intent");
        }
    };



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

                {/* Tabs */}
                <div className="flex border-b border-gray-200 mb-6">
                    <button
                        onClick={() => setActiveTab("WALLET")}
                        className={`px-6 py-3 text-sm font-medium border-b-2 transition-colors duration-200 ${activeTab === "WALLET"
                            ? "border-primary text-primary"
                            : "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300"
                            }`}
                    >
                        Wallet
                    </button>
                    {/* <button
                        onClick={() => setActiveTab("PROMO_WALLET")}
                        className={`px-6 py-3 text-sm font-medium border-b-2 transition-colors duration-200 ${activeTab === "PROMO_WALLET"
                            ? "border-primary text-primary"
                            : "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300"
                            }`}
                    >
                        Promo Wallet
                    </button> */}
                </div>

                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-6">
                    {/* Wallet Balance Card */}
                    <div
                        className="relative overflow-hidden rounded-xl p-5 text-white shadow-md bg-primary"
                    >
                        <div className="absolute top-0 right-0 w-24 h-24 rounded-full opacity-10 -mr-6 -mt-6" style={{ background: 'radial-gradient(circle, #fff 0%, transparent 70%)' }} />
                        <div className="flex items-center gap-2 mb-2">
                            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="opacity-80">
                                <rect x="2" y="4" width="20" height="16" rx="2" />
                                <path d="M2 10h20" />
                            </svg>
                            <span className="text-xs font-semibold uppercase tracking-wider opacity-80">Wallet Balance</span>
                        </div>
                        <p className="text-2xl sm:text-3xl font-bold tracking-tight">{currency}{walletBalance.toFixed(2)}</p>
                        {activeTab === "WALLET" && (
                            <button
                                className="mt-3 bg-white/20 hover:bg-white/30 backdrop-blur-sm text-white text-xs font-semibold px-4 py-1.5 rounded-lg transition-all duration-200 border border-white/20"
                                onClick={() => setShowModal(true)}
                            >
                                + Add Money
                            </button>
                        )}
                    </div>

                    {/* Promo Wallet Balance Card */}
                    {/* <div
                        className="relative overflow-hidden rounded-xl p-5 text-white shadow-md"
                        style={{ background: 'linear-gradient(135deg, #065f46 0%, #059669 50%, #10b981 100%)' }}
                    >
                        <div className="absolute top-0 right-0 w-24 h-24 rounded-full opacity-10 -mr-6 -mt-6" style={{ background: 'radial-gradient(circle, #fff 0%, transparent 70%)' }} />
                        <div className="flex items-center gap-2 mb-2">
                            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="opacity-80">
                                <path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z" />
                            </svg>
                            <span className="text-xs font-semibold uppercase tracking-wider opacity-80">Promo Wallet Balance</span>
                        </div>
                        <p className="text-2xl sm:text-3xl font-bold tracking-tight">{currency}{promoWalletBalance.toFixed(2)}</p>
                    </div> */}
                </div>

                {/* {activeTab === "PROMO_WALLET" && (
                    <div className="mt-2 p-4 bg-brand-50 border-l-4 border-primary text-primary rounded-lg mb-6">
                        <p className="font-semibold text-sm sm:text-base">Note:</p>
                        <p className="text-xs sm:text-sm">
                            Promo wallet amount gets expired after 24 hours.
                        </p>
                    </div>
                )} */}

                <div className="mt-6 space-y-4">
                    {history?.length === 0 ? (
                        <p className="text-center text-gray-500">No transaction history available.</p>
                    ) : (
                        history?.map((item) => (
                            <div key={item.id} className={`border-b pb-2 ${item.is_expired ? "opacity-50" : ""}`}>
                                <div className="flex items-center justify-between">
                                    <div>
                                        <div className="flex items-center gap-2">
                                            <p className="font-medium">{item?.description}</p>
                                            {item.is_expired && (
                                                <span className="text-xs bg-red-100 text-red-600 px-2 py-0.5 rounded-full font-semibold">
                                                    Expired
                                                </span>
                                            )}
                                        </div>
                                        <p className="text-sm text-gray-500">{item?.date}</p>
                                    </div>
                                    <p className={
                                        item.is_expired
                                            ? "text-gray-400 line-through"
                                            : item.type === "CREDIT"
                                                ? "text-green-600"
                                                : "text-red-600"
                                    }>
                                        {item.type === "CREDIT" ? `+${currency}${item.amount}` : `-${currency}${item.amount}`}
                                    </p>
                                </div>
                                {item.order_id && (
                                    <a
                                        href={
                                            typeof item.order_id === "object" && item.order_id.order_status === "delivered"
                                                ? `/summary?id=${item.order_id._id}`
                                                : `/orderDetail?id=${typeof item.order_id === "object" ? item.order_id._id : item.order_id}`
                                        }
                                        className="text-primary hover:underline text-sm mt-1 block"
                                    >
                                        View Order Details
                                    </a>
                                )}
                            </div>
                        ))
                    )}
                </div>

                {history.length > 0 && 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>

            <Modal
                title="Add To Wallet"
                description=""
                isOpen={showModal}
                onClose={() => setShowModal(false)}
            >
                <div className="mb-4">
                    <label htmlFor="custom-amount" className="block text-sm font-medium text-gray-700 mb-2">
                        Enter amount
                    </label>
                    <input
                        type="number"
                        id="custom-amount"
                        className="w-full px-4 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
                        placeholder="Enter amount"
                        value={customAmount}
                        onChange={(e) => {
                            const value = e.target.value.slice(0, 5); // limit to 5 digits
                            setCustomAmount(value);
                        }}
                    />

                </div>

                <button
                    onClick={handleAddMoney}
                    className="w-full py-2 bg-primary hover:bg-primary text-white font-semibold rounded-md transition-colors duration-150"
                >
                    + Add money
                </button>
            </Modal>

            {paymentModalOpen && paymentConfig && (
                <PaymentModal
                    open={paymentModalOpen}
                    setOpen={setPaymentModalOpen}
                    clientSecret={clientSecret}
                    price={Number(amount.toFixed(2))}
                    stripePublishableKey={paymentConfig.stripe?.key}
                    onSuccess={() => {
                        fetchWalletBalance();
                        fetchTransactionHistory(pageNumber, limit, activeTab);
                    }}
                />
            )}
        </div>
    );
};

export default function WalletPage() {
    return (
        <DashboardLayout>
            <Wallet />
        </DashboardLayout>
    );
}