import { useNavigate, useSearchParams } from "react-router-dom";
import TaleButton from "@components/TaleButton";
import { TaleDashbaordMainCard } from "@components/TaleDashbaordMainCard";
import { Suspense, useCallback, useEffect, useMemo, useState } from "react";
import { TaleLoadingFallback } from "@components/TaleLoadingFallback";
import { useQuery } from "@tanstack/react-query";
import { lazily } from "react-lazily";
import { invoicesService } from "@/api/invoices";
import { useTranslation } from "@/hooks/useTranslation";
import "./invoices.css";

const { AdminInvoicesList } = lazily(() =>
    import("@pages/admin/invoices/AdminInvoicesList")
);
const { InternalServerError } = lazily(() =>
    import("@components/Errors/InternalServerError")
);

const Invoices = () => {
    const { t } = useTranslation();
    const navigate = useNavigate();

    const [params] = useSearchParams();
    const currentPage = parseInt(params.get("page")) || 0;
    const statusFilter = params.get("status") || "";
    const searchFilter = params.get("search") || "";

    // State for delete confirmation
    const [invoiceToDelete, setInvoiceToDelete] = useState(null);
    const [isDeleting, setIsDeleting] = useState(false);

    const fetchData = useCallback(
        async () => {
            const data = await invoicesService.getInvoices(
                currentPage,
                20,
                null, // userId - removed filter for admin view
                null, // companyId
                searchFilter,
                statusFilter
            );
            return data;
        },
        [currentPage, statusFilter, searchFilter]
    );

    const {
        isPending: loading,
        data: invoicesData,
        error,
        refetch,
    } = useQuery({
        queryKey: ["invoices", currentPage, statusFilter, searchFilter],
        queryFn: fetchData,
        retry: false,
    });

    const [invoiceItems, setInvoiceItems] = useState([]);
    const [pagination, setPagination] = useState({
        currentPage: 0,
        totalItems: 0,
        totalPages: 1
    });

    useEffect(() => {
        if (loading || error || !invoicesData) return;

        // Handle API response structure - data.result contains the array
        if (invoicesData.result && Array.isArray(invoicesData.result)) {
            setInvoiceItems(invoicesData.result);
        } else if (Array.isArray(invoicesData)) {
            // If API directly returns array
            setInvoiceItems(invoicesData);
        } else {
            setInvoiceItems([]);
        }

        // Set pagination from API response
        setPagination({
            currentPage: invoicesData.currentPage || currentPage,
            totalItems: invoicesData.totalItems || 0,
            totalPages: invoicesData.totalPages || 1
        });
    }, [invoicesData, loading, error, currentPage]);

    const updateInvoice = useCallback(
        (id, props) => {
            const index = invoiceItems.findIndex((e) => e.id === id);
            if (index === -1) return;
            let clone = { ...invoiceItems[index], ...props };
            setInvoiceItems([
                ...invoiceItems.slice(0, index),
                clone,
                ...invoiceItems.slice(index + 1),
            ]);
        },
        [invoiceItems]
    );

    const handleDeleteClick = useCallback((id) => {
        setInvoiceToDelete(id);
    }, []);

    const confirmDelete = useCallback(async () => {
        if (!invoiceToDelete) return;

        setIsDeleting(true);
        try {
            await invoicesService.deleteInvoice(invoiceToDelete);
            setInvoiceItems((prev) => prev.filter((inv) => inv.id !== invoiceToDelete));
            // Update pagination stats
            setPagination(prev => ({
                ...prev,
                totalItems: Math.max(0, prev.totalItems - 1)
            }));

            // Show success message
            console.log("Invoice deleted successfully!");
        } catch (error) {
            console.error("Failed to delete invoice:", error);
        } finally {
            setIsDeleting(false);
            setInvoiceToDelete(null);
        }
    }, [invoiceToDelete]);

    const cancelDelete = useCallback(() => {
        setInvoiceToDelete(null);
    }, []);

    const loadingItem = useMemo(
        () => (
            <div className="size-full z-20 absolute flex items-center justify-center grow">
                <TaleLoadingFallback />
            </div>
        ),
        []
    );

    const handleFilterChange = (type, value) => {
        const params = new URLSearchParams(window.location.search);
        params.set(type, value);
        params.set("page", "0"); // Reset to first page when filtering
        navigate(`/admin/factures?${params.toString()}`);
    };

    const handleSearch = (value) => {
        const params = new URLSearchParams(window.location.search);
        if (value) {
            params.set("search", value);
        } else {
            params.delete("search");
        }
        params.set("page", "0");
        navigate(`/admin/factures?${params.toString()}`);
    };

    const handleClearSearch = () => {
        handleSearch("");
    };

    const statusOptions = [
        { value: "", label: t("invoices.admin.statusAll") },
        { value: "SUBMITTED", label: t("invoices.admin.statusSubmittedPlural") },
        { value: "PAID", label: t("invoices.admin.statusPaidPlural") },
        { value: "REJECTED", label: t("invoices.admin.statusRejectedPlural") },
        { value: "REFUNDED", label: t("invoices.admin.statusRefundedPlural") },
    ];

    // Calculate stats from invoice items
    const calculateStats = () => {
        return {
            total: invoiceItems.length,
            paid: invoiceItems.filter(i => i.status === "PAID").length,
            submitted: invoiceItems.filter(i => i.status === "SUBMITTED").length,
            rejected: invoiceItems.filter(i => i.status === "REJECTED").length,
            refunded: invoiceItems.filter(i => i.status === "REFUNDED").length
        };
    };

    const itemStats = calculateStats();

    return (
        <>
            {/* Delete Confirmation Modal */}
            {invoiceToDelete && (
                <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
                    <div className="bg-white rounded-lg shadow-xl max-w-md w-full">
                        <div className="p-6">
                            <h3 className="text-lg font-semibold text-gray-900 mb-2">
                                {t("invoices.admin.confirmDeleteTitle")}
                            </h3>
                            <p className="text-gray-600 mb-6">
                                {t("invoices.admin.confirmDeleteMessage")}
                            </p>
                            <div className="flex justify-end gap-3">
                                <TaleButton
                                    variant="outlined"
                                    onClick={cancelDelete}
                                    disabled={isDeleting}
                                >
                                    {t("common.cancel")}
                                </TaleButton>
                                <TaleButton
                                    onClick={confirmDelete}
                                    loading={isDeleting}
                                    className="bg-red-600 hover:bg-red-700 border-red-600"
                                >
                                    {t("common.delete")}
                                </TaleButton>
                            </div>
                        </div>
                    </div>
                </div>
            )}

            <TaleDashbaordMainCard className={"flex flex-col gap-6"}>
                <div className="invoices-header">
                    <div className="w-full flex justify-between items-center">
                        <div className="flex flex-col">
                            <h2 className="!text-2xl font-bold !m-0">{t("invoices.admin.listTitle")}</h2>
                            <p className="text-gray-600">
                                {t("invoices.admin.listSubtitle")}
                            </p>
                        </div>
                        <div className="flex gap-3">
                            <TaleButton
                                role="normal"
                                className="!px-4"
                                onClick={() => navigate("/admin/factures/generate")}
                            >
                                + {t("invoices.admin.generateInvoiceButton")}
                            </TaleButton>
                            <TaleButton
                                role="normal"
                                variant="outlined"
                                onClick={() => refetch()}
                            >
                                <i className="fas fa-sync-alt mr-2 rtl:mr-0 rtl:ml-2"></i>
                                {t("invoices.admin.refresh")}
                            </TaleButton>
                        </div>
                    </div>
                </div>

                {/* Filters */}
                <div className="flex flex-col md:flex-row gap-4 items-center">
                    <div className="flex gap-2">
                        <select
                            className="px-4 py-2 border rounded-lg"
                            value={statusFilter}
                            onChange={(e) => handleFilterChange("status", e.target.value)}
                        >
                            {statusOptions.map(option => (
                                <option key={option.value} value={option.value}>
                                    {option.label}
                                </option>
                            ))}
                        </select>
                    </div>

                    <div className="ml-auto rtl:ml-0 rtl:mr-auto w-full md:w-auto">
                        <div className="relative">
                            <input
                                type="text"
                                placeholder={t("invoices.admin.searchPlaceholder")}
                                className="px-4 py-2 border rounded-lg w-full md:w-64"
                                value={searchFilter}
                                onChange={(e) => handleSearch(e.target.value)}
                            />
                            {searchFilter && (
                                <button
                                    className="absolute right-2 rtl:right-auto rtl:left-2 top-1/2 transform -translate-y-1/2 text-gray-500 hover:text-gray-700"
                                    onClick={handleClearSearch}
                                >
                                    <i className="fas fa-times"></i>
                                </button>
                            )}
                        </div>
                    </div>
                </div>

                {/* Stats Summary */}
                {!loading && (
                    <div className="grid grid-cols-2 md:grid-cols-5 gap-4">
                        <div className="bg-white border p-4 rounded-xl">
                            <div className="text-sm text-blue-600">{t("invoices.admin.totalInvoices")}</div>
                            <div className="text-2xl font-bold">{pagination.totalItems}</div>
                        </div>
                        <div className="bg-white border p-4 rounded-xl">
                            <div className="text-sm text-green-600">{t("invoices.admin.statusPaidPlural")}</div>
                            <div className="text-2xl font-bold">
                                {itemStats.paid}
                            </div>
                        </div>
                        <div className="bg-white border p-4 rounded-xl">
                            <div className="text-sm text-yellow-600">{t("invoices.admin.statusSubmittedPlural")}</div>
                            <div className="text-2xl font-bold">
                                {itemStats.submitted}
                            </div>
                        </div>
                        <div className="bg-white border p-4 rounded-xl">
                            <div className="text-sm text-red-600">{t("invoices.admin.statusRejectedPlural")}</div>
                            <div className="text-2xl font-bold">
                                {itemStats.rejected}
                            </div>
                        </div>
                        <div className="bg-white border p-4 rounded-xl">
                            <div className="text-sm text-purple-600">{t("invoices.admin.statusRefundedPlural")}</div>
                            <div className="text-2xl font-bold">
                                {itemStats.refunded}
                            </div>
                        </div>
                    </div>
                )}

                {/* Invoices List */}
                <div
                    className={`flex flex-col relative grow size-full ${
                        !invoiceItems.length && !loading ? 'items-center justify-center gap-4' : "gap-4"
                    }`}
                >
                    {loading && loadingItem}
                    {error && !loading ? (
                        <div className="size-full z-20 absolute flex items-center justify-center grow">
                            <InternalServerError />
                        </div>
                    ) : null}
                    <Suspense fallback={loadingItem}>
                        {loading || error ? null : !invoiceItems.length ? (
                            <>
                                <img
                                    alt="Empty box"
                                    width={80}
                                    height={80}
                                    src="/assets/empty-box.svg"
                                />
                                <span className="text-[#333333] text-lg">
                                    {t("invoices.admin.noInvoicesFound")}
                                </span>
                                {searchFilter && (
                                    <button
                                        onClick={handleClearSearch}
                                        className="text-blue-600 hover:text-blue-800 text-sm"
                                    >
                                        {t("invoices.admin.clearSearch")}
                                    </button>
                                )}
                            </>
                        ) : (
                            <AdminInvoicesList
                                invoices={invoiceItems}
                                updateInvoice={updateInvoice}
                                onDeleteClick={handleDeleteClick}
                            />
                        )}
                    </Suspense>
                </div>

                {/* Pagination */}
                {pagination.totalPages > 1 && (
                    <div className="flex justify-center items-center gap-4 mt-6">
                        <button
                            className="px-4 py-2 border rounded-lg disabled:opacity-50 hover:bg-gray-50 flex items-center gap-2"
                            disabled={currentPage <= 0}
                            onClick={() => {
                                const params = new URLSearchParams(window.location.search);
                                params.set("page", Math.max(0, currentPage - 1));
                                navigate(`/admin/factures?${params.toString()}`);
                            }}
                        >
                            <i className="fas fa-chevron-left rtl:-scale-x-100"></i>
                            {t("invoices.admin.previous")}
                        </button>

                        <div className="flex items-center gap-2">
                            {Array.from({ length: Math.min(5, pagination.totalPages) }, (_, i) => {
                                let pageNum;

                                // Show pages around current page
                                if (pagination.totalPages <= 5) {
                                    pageNum = i;
                                } else if (currentPage < 2) {
                                    pageNum = i;
                                } else if (currentPage > pagination.totalPages - 3) {
                                    pageNum = pagination.totalPages - 5 + i;
                                } else {
                                    pageNum = currentPage - 2 + i;
                                }

                                return (
                                    <button
                                        key={pageNum}
                                        className={`w-10 h-10 flex items-center justify-center border rounded-lg ${
                                            currentPage === pageNum
                                                ? "bg-blue-500 text-white border-blue-500"
                                                : "hover:bg-gray-50"
                                        }`}
                                        onClick={() => {
                                            const params = new URLSearchParams(window.location.search);
                                            params.set("page", pageNum);
                                            navigate(`/admin/factures?${params.toString()}`);
                                        }}
                                    >
                                        {pageNum + 1}
                                    </button>
                                );
                            })}

                            {pagination.totalPages > 5 && currentPage < pagination.totalPages - 3 && (
                                <>
                                    <span className="mx-1">...</span>
                                    <button
                                        className="w-10 h-10 flex items-center justify-center border rounded-lg hover:bg-gray-50"
                                        onClick={() => {
                                            const params = new URLSearchParams(window.location.search);
                                            params.set("page", pagination.totalPages - 1);
                                            navigate(`/admin/factures?${params.toString()}`);
                                        }}
                                    >
                                        {pagination.totalPages}
                                    </button>
                                </>
                            )}
                        </div>

                        <button
                            className="px-4 py-2 border rounded-lg disabled:opacity-50 hover:bg-gray-50 flex items-center gap-2"
                            disabled={currentPage >= pagination.totalPages - 1}
                            onClick={() => {
                                const params = new URLSearchParams(window.location.search);
                                params.set("page", currentPage + 1);
                                navigate(`/admin/factures?${params.toString()}`);
                            }}
                        >
                            {t("invoices.admin.next")}
                            <i className="fas fa-chevron-right rtl:-scale-x-100"></i>
                        </button>

                        <div className="ml-4 rtl:ml-0 rtl:mr-4 text-sm text-gray-600 hidden md:block">
                            {t("invoices.admin.totalInvoicesCount", { count: pagination.totalItems })}
                        </div>
                    </div>
                )}
            </TaleDashbaordMainCard>
        </>
    );
};

export default Invoices;