"use client";
import React, { useEffect, useLayoutEffect, useMemo, useState } from "react";
import { useRouter, useSearchParams } from "next/navigation";
import { t } from "@/lib/i18n";
import { useGetOrders } from "../Requests/useGetOrders";
import { useGetMyAuctions } from "../Requests/useGetMyAuctions";
import { useGetTeamRequests } from "../Requests/useGetTeamRequests";
import LicenseHero from "../License/LicenseHero";
import MyOrdersContent from "./MyOrdersContent";
import MyAuctionsContent from "./MyAuctionsContent";
import MyMembershipRequestsContent from "./MyMembershipRequestsContent";

const MEMBERSHIP_STATUS_PARAMS = ["accepted", "finished"];

export default function MyOrdersWrapper() {
    const router = useRouter();
    const searchParams = useSearchParams();
    const [mounted, setMounted] = useState(false);

    const [lang, setLang] = useState("ar");
    const [page, setPage] = useState(1);
    const [subFilter, setSubFilter] = useState("pending");
    const [auctionSubFilter, setAuctionSubFilter] = useState("upcoming");
    const [membershipSubFilter, setMembershipSubFilter] = useState("accepted");
    /** افتراضي دائمًا: طلبات الخدمات */
    const [active, setActive] = useState("orders");
    useEffect(() => {
        setMounted(true);
        const storedLang = localStorage.getItem("lang") || "ar";
        setLang(storedLang);
    }, []);

    useLayoutEffect(() => {
        if (!mounted) return;
        const tab = searchParams.get("tab");
        if (tab !== "membership") return;
        setActive("membership");
        setPage(1);
        const msRaw = searchParams.get("membershipStatus");
        if (!msRaw) return;
        const ms = String(msRaw).trim().toLowerCase();
        if (MEMBERSHIP_STATUS_PARAMS.includes(ms)) {
            setMembershipSubFilter(ms);
        } else if (ms === "pending" || ms === "rejected") {
            setMembershipSubFilter("accepted");
        }
    }, [mounted, searchParams]);

    const teamRequestIdFromQuery = searchParams.get("teamRequestId");
    const openTeamRequestIdFromQuery =
        searchParams.get("tab") === "membership" && teamRequestIdFromQuery
            ? String(teamRequestIdFromQuery).trim()
            : "";

    const consumeTeamRequestDeepLink = () => {
        if (typeof window === "undefined") return;
        const u = new URL(window.location.href);
        if (!u.searchParams.has("teamRequestId")) return;
        u.searchParams.delete("teamRequestId");
        const next = `${u.pathname}${u.search}`;
        router.replace(next);
    };
    const ordersQuery = useGetOrders(lang, subFilter, page);
    const auctionsQuery = useGetMyAuctions(lang, page, auctionSubFilter);
    const teamRequestsQuery = useGetTeamRequests(
        lang,
        membershipSubFilter,
        page,
        mounted && active === "membership",
    );

    const isOrdersTab = active === "orders";
    const isAuctionsTab = active === "auctions";
    const isMembershipTab = active === "membership";

    const paginate = useMemo(() => {
        if (isOrdersTab) return ordersQuery.data?.paginate || {};
        if (isAuctionsTab) return auctionsQuery.data?.paginate || {};
        return (
            teamRequestsQuery.data?.paginate ||
            teamRequestsQuery.data?.data?.paginate ||
            {}
        );
    }, [
        isOrdersTab,
        isAuctionsTab,
        isMembershipTab,
        ordersQuery.data,
        auctionsQuery.data,
        teamRequestsQuery.data,
    ]);

    const totalPages = paginate.lastPage || 1;
    const currentPage = paginate.currentPage || page;
    const perPage = paginate.perPage || 20;

    const getPageNumbers = () => {
        const pages = [];
        const maxPagesToShow = 3;

        if (totalPages <= maxPagesToShow) {
            for (let i = 1; i <= totalPages; i++) pages.push(i);
        } else {
            if (currentPage <= 2) pages.push(1, 2, 3);
            else if (currentPage >= totalPages - 1)
                pages.push(totalPages - 2, totalPages - 1, totalPages);
            else pages.push(currentPage - 1, currentPage, currentPage + 1);
        }
        return pages;
    };

    const switchToOrders = () => {
        setActive("orders");
        setPage(1);
    };

    const switchToAuctions = () => {
        setActive("auctions");
        setPage(1);
    };

    const switchToMembership = () => {
        setActive("membership");
        setPage(1);
    };

    if (!mounted) return null;

    return (
        <div
            className="news-wrapper-cont my-orders-wrapper"
            style={{ direction: lang === "ar" ? "rtl" : "ltr" }}
        >
            {auctionsQuery.data?.data?.section ? (
                <LicenseHero
                    lang={lang}
                    title={auctionsQuery.data.data.section.title}
                    description={auctionsQuery.data.data.section.description}
                    video={auctionsQuery.data.data.section.video}
                />
            ) : null}

            <div className="switch-toggle-container">
                <button
                    type="button"
                    className={`switch-toggle-btn ${active === "orders" ? "active" : ""}`}
                    onClick={switchToOrders}
                >
                    <span>{t(lang, "services_orders")}</span>
                </button>

                <button
                    type="button"
                    className={`switch-toggle-btn ${active === "auctions" ? "active" : ""}`}
                    onClick={switchToAuctions}
                >
                    <span>{t(lang, "my_auction")}</span>
                </button>

                <button
                    type="button"
                    className={`switch-toggle-btn ${active === "membership" ? "active" : ""}`}
                    onClick={switchToMembership}
                >
                    <span>{t(lang, "membership_application_requests_tab")}</span>
                </button>
            </div>

            {active === "orders" ? (
                <MyOrdersContent
                    lang={lang}
                    page={page}
                    setPage={setPage}
                    subFilter={subFilter}
                    setSubFilter={setSubFilter}
                    orders={ordersQuery.data}
                    isLoading={ordersQuery.isLoading}
                    totalPages={totalPages}
                    currentPage={currentPage}
                    perPage={perPage}
                    getPageNumbers={getPageNumbers}
                />
            ) : active === "auctions" ? (
                <MyAuctionsContent
                    lang={lang}
                    page={page}
                    setPage={setPage}
                    auctionSubFilter={auctionSubFilter}
                    setAuctionSubFilter={setAuctionSubFilter}
                    myAuctions={auctionsQuery.data}
                    isLoading={auctionsQuery.isLoading}
                    isError={auctionsQuery.isError}
                    error={auctionsQuery.error}
                    totalPages={totalPages}
                    currentPage={currentPage}
                    perPage={perPage}
                    getPageNumbers={getPageNumbers}
                    active={active}
                    setActive={setActive}
                />
            ) : (
                <MyMembershipRequestsContent
                    lang={lang}
                    page={page}
                    setPage={setPage}
                    membershipSubFilter={membershipSubFilter}
                    setMembershipSubFilter={setMembershipSubFilter}
                    teamRequests={teamRequestsQuery.data}
                    isLoading={teamRequestsQuery.isLoading}
                    totalPages={totalPages}
                    currentPage={currentPage}
                    perPage={perPage}
                    getPageNumbers={getPageNumbers}
                    openTeamRequestIdFromQuery={openTeamRequestIdFromQuery}
                    onTeamRequestDeepLinkConsumed={consumeTeamRequestDeepLink}
                />
            )}
        </div>
    );
}