import { useNavigate, useSearchParams } from "react-router-dom";
import { useSelector } from "react-redux";
import TaleButton from "@components/TaleButton";
import { TaleDashbaordMainCard } from "@components/TaleDashbaordMainCard";
import React, { 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 { CompanyInvoicesList } = lazily(() =>
    import("@pages/business/invoices/CompanyInvoicesList")
);
const { InternalServerError } = lazily(() =>
    import("@components/Errors/InternalServerError")
);

const CompanyInvoices = () => {
    const { t } = useTranslation();
    const navigate = useNavigate();
    const { user } = useSelector((state) => state.auth);
    const userId = user?.id;

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

    // State for payment
    const [invoiceToPay, setInvoiceToPay] = useState(null);

    // Fetch company invoices (only invoices assigned to this company)
    const fetchData = useCallback(
        async () => {
            if (!userId) return { result: [], totalItems: 0, totalPages: 0 };

            // Get invoices filtered by company ID (invoices assigned to this company)
            const data = await invoicesService.getCompanyInvoices(
                currentPage,
                20,
                userId,
                searchFilter,
                statusFilter
            );
            console.log(data)
            return data;
        },
        [currentPage, statusFilter, searchFilter, userId]
    );

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

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

    useEffect(() => {
        if (loading || error || !invoicesData) return;
        console.log(invoicesData)
        if (invoicesData.result && Array.isArray(invoicesData.result)) {
            setInvoiceItems(invoicesData.result);
        } else if (Array.isArray(invoicesData)) {
            setInvoiceItems(invoicesData);
        } else {
            setInvoiceItems([]);
        }

        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 handlePayClick = useCallback((invoice) => {
        setInvoiceToPay(invoice);
    }, []);

    const handleProceedToPayment = useCallback(() => {
        if (!invoiceToPay) return;
        navigate(`/invoices/${invoiceToPay.id}/payment`);
    }, [invoiceToPay, navigate]);

    const cancelPayment = useCallback(() => {
        setInvoiceToPay(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");
        navigate(`/invoices?${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(`/invoices?${params.toString()}`);
    };

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

    const statusOptions = [
        { value: "", label: t("invoices.business.statusAll") },
        { value: "SUBMITTED", label: t("invoices.business.statusPendingOption") },
        { value: "PAID", label: t("invoices.business.statusPaidOption") },
        { value: "OVERDUE", label: t("invoices.business.statusOverdueOption") },
    ];

    // Calculate outstanding amount
    const calculateStats = () => {
        const submittedInvoices = invoiceItems.filter(i => i.status === "SUBMITTED");
        const overdueInvoices = invoiceItems.filter(i => i.status === "OVERDUE");

        const totalOutstanding = submittedInvoices.reduce((sum, inv) => sum + inv.total, 0);
        const totalOverdue = overdueInvoices.reduce((sum, inv) => sum + inv.total, 0);

        return {
            total: invoiceItems.length,
            paid: invoiceItems.filter(i => i.status === "PAID").length,
            submitted: submittedInvoices.length,
            overdue: overdueInvoices.length,
            totalOutstanding,
            totalOverdue
        };
    };

    const StatCard = useCallback(({ img, number, text, background, }) => {
        return (
            <div className="stats-card grow basis-1/3 transition-transform hover:scale-[1.02]" style={{ background }}>
                <div className="rounded-full bg-opacity-30 bg-white w-14 h-14 flex items-center justify-center">
                    <i className={`fas ${img} text-3xl text-white`}></i>
                </div>
                <div className={"text-right"} style={{ display: "flex", flexDirection: "column", color: "white" }}>
                    <p className="stats-value self-end">{number}</p>
                    <h3 className="stats-title">{text}</h3>
                </div>

                {/*<div className="mt-3 text-sm text-white">
                    {description}
                </div>*/}


            </div>


        );
    }, []);



    const itemStats = calculateStats();

    // If no company ID
    if (!userId && !loading) {
        return (
            <div className="p-6">
                <TaleDashbaordMainCard className="p-6">
                    <div className="text-center py-8">
                        <i className="fas fa-building text-4xl text-gray-300 mb-4"></i>
                        <h2 className="text-xl font-semibold text-gray-700 mb-2">
                            {t("invoices.business.noCompany")}
                        </h2>
                        <p className="text-gray-600 mb-6">
                            {t("invoices.business.noCompanyMessage")}
                        </p>
                        <TaleButton
                            onClick={() => navigate("/company/setup")}
                        >
                            {t("invoices.business.configureCompany")}
                        </TaleButton>
                    </div>
                </TaleDashbaordMainCard>
            </div>
        );
    }

    const statsCards = [
        {
            background: "#FFAA1A",
            img: "fa-file-invoice-dollar",
            number: new Intl.NumberFormat('en-TN', {
                    style: 'currency',
                    currency: 'TND',
                    minimumFractionDigits: 2,
                    maximumFractionDigits: 2,
                }).format(itemStats.totalOutstanding),
            text: t("invoices.business.totalDue"),
            description: itemStats.submitted + "invoice(s) pending"
        },
        {
            background: "#FF720D",
            img: "fa-exclamation-triangle",
            number: new Intl.NumberFormat('en-TN', {
                style: 'currency',
                currency: 'TND',
                minimumFractionDigits: 2,
                maximumFractionDigits: 2,
            }).format(itemStats.totalOverdue),
            text: t("invoices.business.overdueLabel"),
            description: itemStats.overdue + " overdue invoice(s)"
        },
        {
            background: "#00BFED",
            img: "fa-check-circle",
            number: itemStats.paid,
            text: t("invoices.business.paidLabel"),
            description: "All invoices settled"
        },
    ];

    return (
        <>
            {/* Payment Confirmation Modal */}
            {invoiceToPay && (
                <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.business.proceedPayment")}
                            </h3>
                            <p className="text-gray-600 mb-6">
                                {t("invoices.business.confirmPayPrompt", { id: invoiceToPay.id })}
                            </p>

                            <div className="mb-6 p-4 bg-blue-50 rounded-lg">
                                <div className="flex justify-between mb-2">
                                    <span className="text-gray-600">{t("invoices.business.amountLabel")}</span>
                                    <span className="font-bold">
                                        {new Intl.NumberFormat('en-TN', {
                                            style: 'currency',
                                            currency: 'TND',
                                            minimumFractionDigits: 2,
                                            maximumFractionDigits: 2,
                                        }).format(invoiceToPay.total)}
                                    </span>
                                </div>
                                <div className="flex justify-between">
                                    <span className="text-gray-600">{t("invoices.business.issuerLabel")}</span>
                                    <span className="font-medium">{invoiceToPay.company?.companyName}</span>
                                </div>
                            </div>

                            <div className="flex justify-end gap-3">
                                <TaleButton
                                    variant="outlined"
                                    onClick={cancelPayment}
                                >
                                    {t("common.cancel")}
                                </TaleButton>
                                <TaleButton
                                    onClick={handleProceedToPayment}
                                    className="bg-green-600 hover:bg-green-700 border-green-600"
                                >
                                    <i className="fas fa-credit-card mr-2 rtl:mr-0 rtl:ml-2"></i>
                                    {t("invoices.business.proceedToPayment")}
                                </TaleButton>
                            </div>
                        </div>
                    </div>
                </div>
            )}

            <div className="p-6">
                <TaleDashbaordMainCard className="p-6">
                    <div className="mb-6">
                        <h1 className="text-2xl font-bold">{t("invoices.business.receivedInvoicesTitle")}</h1>
                        <p className="text-gray-600">
                            {t("invoices.business.receivedInvoicesSubtitle")}
                        </p>
                    </div>

                    {/* Important Notice */}
                    <div className="mb-6 p-4 bg-white border border-blue-200 rounded-lg">
                        <div className="flex items-start">
                            <i className="fas fa-info-circle text-blue-500 mt-0.5 mr-3 rtl:mr-0 rtl:ml-3"></i>
                            <div>
                                <div className="font-medium text-blue-700 mb-1">
                                    {t("invoices.business.issuedNotice")}
                                </div>
                                <div className="text-sm text-blue-600">
                                    {t("invoices.business.issuedNoticeBody")}
                                </div>
                            </div>
                        </div>
                    </div>

                    {/* Outstanding Balance Summary
                    <div className="mb-8 grid grid-cols-1 md:grid-cols-3 gap-6">
                        <div className="bg-gradient-to-r from-blue-50 to-blue-100 p-6 rounded-xl border border-blue-200">
                            <div className="flex items-center justify-between">
                                <div>
                                    <div className="text-sm text-blue-600 font-medium">Total Due</div>
                                    <div className="text-3xl font-bold text-gray-900">
                                        {new Intl.NumberFormat('en-TN', {
                                            style: 'currency',
                                            currency: 'TND',
                                            minimumFractionDigits: 2,
                                            maximumFractionDigits: 2,
                                        }).format(itemStats.totalOutstanding)}
                                    </div>
                                </div>
                                <i className="fas fa-file-invoice-dollar text-3xl text-blue-400"></i>
                            </div>
                            <div className="mt-3 text-sm text-blue-700">
                                {itemStats.submitted} invoice(s) pending
                            </div>
                        </div>

                        <div className="bg-gradient-to-r from-yellow-50 to-yellow-100 p-6 rounded-xl border border-yellow-200">
                            <div className="flex items-center justify-between">
                                <div>
                                    <div className="text-sm text-yellow-600 font-medium">Overdue</div>
                                    <div className="text-3xl font-bold text-gray-900">
                                        {new Intl.NumberFormat('en-TN', {
                                            style: 'currency',
                                            currency: 'TND',
                                            minimumFractionDigits: 2,
                                            maximumFractionDigits: 2,
                                        }).format(itemStats.totalOverdue)}
                                    </div>
                                </div>
                                <i className="fas fa-exclamation-triangle text-3xl text-yellow-400"></i>
                            </div>
                            <div className="mt-3 text-sm text-yellow-700">
                                {itemStats.overdue} overdue invoice(s)
                            </div>
                        </div>

                        <div className="bg-gradient-to-r from-green-50 to-green-100 p-6 rounded-xl border border-green-200">
                            <div className="flex items-center justify-between">
                                <div>
                                    <div className="text-sm text-green-600 font-medium">Paid</div>
                                    <div className="text-3xl font-bold text-gray-900">
                                        {itemStats.paid} invoice(s)
                                    </div>
                                </div>
                                <i className="fas fa-check-circle text-3xl text-green-400"></i>
                            </div>
                            <div className="mt-3 text-sm text-green-700">
                                All invoices settled
                            </div>
                        </div>
                    </div>*/}
                    {/* Stats Cards */}
                    <div className="flex gap-4 items-center mb-6">
                        {
                            statsCards.map((e) => (
                                <React.Fragment key={e.img}>{StatCard(e)}</React.Fragment>
                            ))}
                    </div>

                    {/* Filters */}
                    <div className="flex flex-col md:flex-row gap-4 items-center mb-6">
                        <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.business.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>

                    {/* Quick Actions */}
                    <div className="mb-6">
                        <TaleButton
                            onClick={() => refetch()}
                            variant="outlined"
                        >
                            <i className="fas fa-sync-alt mr-2 rtl:mr-0 rtl:ml-2"></i>
                            {t("invoices.business.refresh")}
                        </TaleButton>
                    </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.business.noInvoicesReceived")}
                                    </span>
                                    <p className="text-gray-600 text-center max-w-md">
                                        {t("invoices.business.noInvoicesReceivedBody")}
                                    </p>
                                    {searchFilter && (
                                        <button
                                            onClick={handleClearSearch}
                                            className="text-blue-600 hover:text-blue-800 text-sm"
                                        >
                                            {t("invoices.business.clearSearch")}
                                        </button>
                                    )}
                                </>
                            ) : (
                                <CompanyInvoicesList
                                    invoices={invoiceItems}
                                    updateInvoice={updateInvoice}
                                    onPayClick={handlePayClick}
                                />
                            )}
                        </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(`/invoices?${params.toString()}`);
                                }}
                            >
                                <i className="fas fa-chevron-left rtl:-scale-x-100"></i>
                                {t("invoices.business.previous")}
                            </button>

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

                                    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(`/invoices?${params.toString()}`);
                                            }}
                                        >
                                            {pageNum + 1}
                                        </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(`/invoices?${params.toString()}`);
                                }}
                            >
                                {t("invoices.business.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.business.invoicesReceivedCount", { count: pagination.totalItems })}
                            </div>
                        </div>
                    )}

                    {/* Help Section */}
                    <div className="mt-8 pt-6 border-t">
                        <div className="text-sm text-gray-600">
                            <p className="font-medium mb-2">{t("invoices.business.needHelp")}</p>
                            <ul className="space-y-1">
                                <li className="flex items-start">
                                    <i className="fas fa-question-circle text-blue-500 mr-2 rtl:mr-0 rtl:ml-2 mt-0.5"></i>
                                    <span>{t("invoices.business.helpContact")}</span>
                                </li>
                                <li className="flex items-start">
                                    <i className="fas fa-exclamation-triangle text-yellow-500 mr-2 rtl:mr-0 rtl:ml-2 mt-0.5"></i>
                                    <span>{t("invoices.business.helpPenalty")}</span>
                                </li>
                                <li className="flex items-start">
                                    <i className="fas fa-file-alt text-green-500 mr-2 rtl:mr-0 rtl:ml-2 mt-0.5"></i>
                                    <span>{t("invoices.business.helpKeepRecords")}</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </TaleDashbaordMainCard>
            </div>
        </>
    );
};

export default CompanyInvoices;