"use client";

import Image from "next/image";
import {
    CheckCircle,
    LocalShipping,
    Inventory2,
    LocationOn,
    ChevronLeft,
    ChevronRight,
    AssignmentReturn,
    Check,
    Close,
} from "@mui/icons-material";
import { orderStatusArray } from "@/src/constants/data/orders";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { routes } from "@/src/config/routes";
import { formatConvertedPrice } from "@/src/utils/helpers";
import { useAppSelector } from "@/src/redux/hooks";
import { RootState } from "@/src/redux/store";
import ImageFallback from "@/src/components/custom-components/image-fallback";
import { useRef, useState, useEffect } from "react";

export default function TrackOrderPage({ data }: { data: any }) {
    const router = useRouter();
    const currency = useAppSelector((state: RootState) => state.currencies);
    const scrollContainerRef = useRef<HTMLDivElement>(null);
    const [showLeftArrow, setShowLeftArrow] = useState(false);
    const [showRightArrow, setShowRightArrow] = useState(false);

    const checkScroll = () => {
        const el = scrollContainerRef.current;
        if (!el) return;
        setShowLeftArrow(el.scrollLeft > 5);
        setShowRightArrow(el.scrollLeft < el.scrollWidth - el.clientWidth - 5);
    };

    useEffect(() => {
        checkScroll();
        window.addEventListener("resize", checkScroll);
        return () => window.removeEventListener("resize", checkScroll);
    }, [data?.products]);

    const scroll = (direction: "left" | "right") => {
        const el = scrollContainerRef.current;
        if (!el) return;
        const scrollAmount = el.clientWidth * 0.75;
        el.scrollBy({
            left: direction === "left" ? -scrollAmount : scrollAmount,
            behavior: "smooth",
        });
    };

    const formatDate = (date?: string) => {
        if (!date) return "";

        return new Date(date).toLocaleDateString("en-GB", {
            day: "2-digit",
            month: "short",
            year: "numeric",
            hour: "2-digit",
            minute: "2-digit",
        });
    };

    const getReturnStatusInfo = (status: string | number) => {
        switch (String(status)) {
            case "1":
                return {
                    label: "Return Requested",
                    badgeClass: "bg-amber-50 text-amber-700 border-amber-200",
                    message: "Your product return has been requested.",
                };
            case "2":
                return {
                    label: "Return Approved",
                    badgeClass: "bg-blue-50 text-blue-700 border-blue-200",
                    message: "Your product return request is now approved.",
                };
            case "3":
                return {
                    label: "Return Refunded",
                    badgeClass: "bg-emerald-50 text-emerald-700 border-emerald-200",
                    message: "Your product return has been successfully refunded.",
                };
            case "4":
                return {
                    label: "Return Received",
                    badgeClass: "bg-purple-50 text-purple-700 border-purple-200",
                    message: "Your product return has been received.",
                };
            case "5":
                return {
                    label: "Return Rejected",
                    badgeClass: "bg-rose-50 text-rose-700 border-rose-200",
                    message: "Your product return request has been rejected.",
                };
            default:
                return {
                    label: "Return Processing",
                    badgeClass: "bg-gray-50 text-gray-700 border-gray-200",
                    message: "Your product return is being processed.",
                };
        }
    };

    const returnedProducts = data?.products?.filter(
        (p: any) => p?.orderProductReturnStatus && String(p?.orderProductReturnStatus) !== "0"
    ) || [];

    const trackingSteps = [
        {
            title: "Order Confirmed",
            description: "Your order has been confirmed.",
            date: data?.orderStatusAt,
            completed: !!data?.orderStatusAt,
        },
        {
            title: "Processing",
            description: "Your items are being prepared.",
            date: data?.processingStatusAt,
            completed: !!data?.processingStatusAt,
        },
        {
            title: "Packed",
            description: "Your order has been packed.",
            date: data?.packedStatusAt,
            completed: !!data?.packedStatusAt,
        },
        {
            title: "Shipped",
            description: "Your package has been handed over to the courier.",
            date: data?.shippedStatusAt,
            completed: !!data?.shippedStatusAt,
        },
        {
            title: "Delivered",
            description: "Package delivered successfully.",
            date: data?.deliveredStatusAt,
            completed: !!data?.deliveredStatusAt,
        },

        // Special statuses
        {
            title: "Cancelled",
            description: data?.cancelReason || "Order has been cancelled.",
            date: data?.canceledStatusAt,
            completed: !!data?.canceledStatusAt,
            color: "red",
        },
        {
            title: "Returned",
            description: "Order has been returned.",
            date: data?.returnedStatusAt
                ? new Date(data.returnedStatusAt).toLocaleDateString("en-GB", {
                    day: "2-digit",
                    month: "long",
                    year: "numeric",
                })
                : "",
            completed: !!data?.returnedStatusAt,
            color: "orange",
        },
        {
            title: "Refunded",
            description: "Refund completed.",
            date: data?.refundedStatusAt,
            completed: !!data?.refundedStatusAt,
            color: "blue",
        },
        {
            title: "On Hold",
            description: "Order is currently on hold.",
            date: data?.onHoldStatusAt,
            completed: !!data?.onHoldStatusAt,
            color: "yellow",
        },
    ].filter(step => step.date);

    const currentStatus = orderStatusArray.find(
        (status) => status.value === data?.orderStatus
    );

    const getStatusColor = (status?: string) => {
        switch (status) {
            case "Canceled":
                return "bg-red-100 text-red-600";
            case "Returned":
                return "bg-orange-100 text-orange-600";
            case "Refunded":
                return "bg-blue-100 text-blue-600";
            case "On Hold":
                return "bg-yellow-100 text-yellow-600";
            case "Delivered":
                return "bg-green-100 text-green-600";
            default:
                return "bg-[var(--color-primary)]/10 text-[var(--color-primary)]";
        }
    };

    return (
        <div className="mx-auto py-10 px-5 sm:px-5 lg:px-30 md:px-8 2xl:px-45">
            <div className="mb-8">
                <h1 className="text-4xl font-bold text-[var(--color-primary)]">
                    Track Order
                </h1>

                <p className="mt-2 text-gray-500">
                    Order #{data?.orderId}
                </p>
            </div>
            <div className="grid gap-4 lg:grid-cols-3">
                <div className="space-y-6 lg:col-span-2">
                    <div className="rounded-3xl border border-slate-200 bg-white p-6 shadow-sm">
                        <div className="mb-8 flex items-center justify-between">
                            <div>
                                <p className="text-sm text-gray-500">
                                    Current Status
                                </p>
                                <span
                                    className={`mt-2 inline-flex items-center gap-2 rounded-full px-4 py-2 text-sm font-semibold ${getStatusColor(
                                        currentStatus?.label
                                    )}`}
                                >
                                    <CheckCircle fontSize="small" />
                                    {currentStatus?.label}

                                </span>
                            </div>
                            <div className="text-right">
                                <p className="text-sm text-gray-500">
                                    Estimated Delivery
                                </p>
                                <p className="font-semibold text-[var(--color-primary)]">
                                    {data?.createdAt &&
                                        new Date(data?.createdAt).toLocaleDateString("en-GB", {
                                            day: "2-digit",
                                            month: "short",
                                            year: "numeric",
                                        })}
                                </p>
                            </div>
                        </div>

                        <div className="relative">
                            {trackingSteps.map((step, index) => (
                                <div
                                    key={index}
                                    className="relative flex gap-5 pb-10 last:pb-0"
                                >
                                    {index !== trackingSteps.length - 1 && (
                                        <div
                                            className={`absolute left-5 top-10 h-[calc(100%-40px)] w-[2px]
                        ${step.completed
                                                    ? "bg-[var(--color-primary)]"
                                                    : "bg-gray-200"
                                                }`}
                                        />
                                    )}
                                    <div
                                        className={`
                        relative z-10 flex h-10 w-10 shrink-0 items-center justify-center 
                        rounded-full border-4 border-white
                        ${step.completed
                                                ? "bg-[var(--color-primary)]/10 text-[var(--color-primary)]"
                                                : "bg-gray-100 text-gray-400"
                                            }
                    `}
                                    >
                                        {step.completed ? (
                                            <CheckCircle fontSize="small" />
                                        ) : (
                                            <LocalShipping fontSize="small" />
                                        )}
                                    </div>
                                    <div>
                                        <h3 className="font-semibold text-[var(--color-primary)]">
                                            {step.title}
                                        </h3>
                                        <p className="mt-1 text-sm text-gray-500">
                                            {step.description}
                                        </p>
                                        {step.date && (
                                            <p className="mt-2 text-xs text-gray-400">
                                                {formatDate(step.date)}fghf
                                            </p>
                                        )}
                                    </div>
                                </div>
                            ))}
                        </div>
                    </div>

                    {/* Return Status Timeline for Returned Items */}
                    {returnedProducts?.length > 0 && (
                        <div className="rounded-3xl border border-slate-200 bg-white p-6 shadow-sm">
                            <div className="mb-6 flex items-center justify-between border-b border-gray-100 pb-4">
                                <div>
                                    <h2 className="text-xl font-bold text-[var(--color-primary)]">
                                        Product Return Tracking
                                    </h2>
                                    <p className="text-sm text-gray-500">
                                        Status updates for items returned from this order
                                    </p>
                                </div>
                            </div>

                            <div className="space-y-8">
                                {returnedProducts.map((prod: any, idx: number) => {
                                    const returnInfo = getReturnStatusInfo(prod?.orderProductReturnStatus);
                                    const isRejected = String(prod?.orderProductReturnStatus) === "5";

                                    const returnSteps = isRejected
                                        ? [
                                            {
                                                title: "Return Requested",
                                                description: "Return request received",
                                                date: prod?.orderProductReturnStatusAt || prod?.createdAt,
                                                completed: true,
                                                isError: false,
                                            },
                                            {
                                                title: "Return Rejected",
                                                description: prod?.orderProductReturnRejectedReason || prod?.returnReason || "Your product return request has been rejected.",
                                                date: prod?.orderProductReturnRejectedStatusAt || prod?.updatedAt,
                                                completed: true,
                                                isError: true,
                                            },
                                        ]
                                        : [
                                            {
                                                title: "Return Requested",
                                                description: "Return request received",
                                                date: prod?.orderProductReturnStatusAt || prod?.createdAt,
                                                completed: !!(prod?.orderProductReturnStatusAt || prod?.createdAt),
                                                isError: false,
                                            },
                                            {
                                                title: "Return Approved",
                                                description: "Return request approved",
                                                date: prod?.orderProductReturnApprovedStatusAt,
                                                completed: !!prod?.orderProductReturnApprovedStatusAt,
                                                isError: false,
                                            },
                                            {
                                                title: "Return Received",
                                                description: "Returned item received at facility",
                                                date: prod?.orderProductReturnReceivedStatusAt,
                                                completed: !!prod?.orderProductReturnReceivedStatusAt,
                                                isError: false,
                                            },
                                            {
                                                title: "Refund Processed",
                                                description: "Refund completed successfully",
                                                date: prod?.orderProductReturnRefundStatusAt || prod?.orderProductReturnQuantityRefundStatusAt,
                                                completed: !!(prod?.orderProductReturnRefundStatusAt || prod?.orderProductReturnQuantityRefundStatusAt),
                                                isError: false,
                                            },
                                        ];

                                    const prodImage =
                                        prod?.productDetails?.productImageUrl ||
                                        prod?.productImageUrl ||
                                        prod?.productDetails?.variantDetails?.variantImageUrl ||
                                        "";

                                    return (
                                        <div key={prod?._id || idx} className="border-b border-gray-100 last:border-b-0 pb-6 last:pb-0">
                                            {/* Product header */}
                                            <div className="mb-5 flex flex-wrap items-center justify-between gap-3 rounded-2xl bg-gray-50 p-4 border border-gray-100">
                                                <div className="flex items-center gap-3">
                                                    <div className="relative h-14 w-14 flex-shrink-0 overflow-hidden rounded-xl border bg-white">
                                                        <ImageFallback
                                                            src={prodImage}
                                                            alt={prod?.productDetails?.productTitle || prod?.productTitle || "product"}
                                                            fill
                                                            className="object-contain p-1"
                                                        />
                                                    </div>
                                                    <div>
                                                        <h4 className="font-semibold text-[var(--color-primary)] text-sm sm:text-base">
                                                            {prod?.productDetails?.productTitle || prod?.productTitle}
                                                        </h4>
                                                        <p className="text-xs text-gray-500">
                                                            Qty: {prod?.quantity} | Amount:{" "}
                                                            {formatConvertedPrice(
                                                                prod?.productAmount || 0,
                                                                currency.toCurrency,
                                                                currency.value
                                                            )}
                                                        </p>
                                                    </div>
                                                </div>
                                                <span className={`inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-xs font-semibold border ${returnInfo.badgeClass}`}>
                                                    <AssignmentReturn fontSize="small" />
                                                    {returnInfo.label}
                                                </span>
                                            </div>

                                            {/* Return timeline */}
                                            <div className="pl-4 relative">
                                                {returnSteps.map((rStep, sIdx) => (
                                                    <div key={sIdx} className="relative flex gap-4 pb-6 last:pb-0">
                                                        {sIdx !== returnSteps.length - 1 && (
                                                            <div
                                                                className={`absolute left-3 top-6 h-[calc(100%-24px)] w-[2px] ${rStep.isError
                                                                    ? "bg-rose-300"
                                                                    : rStep.completed
                                                                        ? "bg-emerald-500"
                                                                        : "bg-gray-200"
                                                                    }`}
                                                            />
                                                        )}
                                                        <div
                                                            className={`relative z-10 flex h-6 w-6 shrink-0 items-center justify-center rounded-full border-2 border-white text-xs ${rStep.isError
                                                                ? "bg-rose-500 text-white"
                                                                : rStep.completed
                                                                    ? "bg-emerald-500 text-white"
                                                                    : "bg-gray-200 text-gray-400"
                                                                }`}
                                                        >
                                                            {rStep.isError ? (
                                                                <Close style={{ fontSize: 14 }} />
                                                            ) : rStep.completed ? (
                                                                <Check style={{ fontSize: 14 }} />
                                                            ) : null}
                                                        </div>
                                                        <div>
                                                            <h5 className={`text-sm font-semibold ${rStep.isError ? "text-rose-600" : "text-gray-900"}`}>
                                                                {rStep.title}
                                                            </h5>
                                                            <p className="text-xs text-gray-500">{rStep.description}</p>
                                                            {rStep.date && (
                                                                <p className="mt-0.5 text-[11px] text-gray-400">
                                                                    {formatDate(rStep.date)}
                                                                </p>
                                                            )}
                                                        </div>
                                                    </div>
                                                ))}
                                            </div>
                                        </div>
                                    );
                                })}
                            </div>
                        </div>
                    )}
                </div>

                <div className="space-y-6">
                    <div className="rounded-3xl border border-slate-200 bg-white p-6 shadow-sm">
                        <div className="mb-5 flex items-center justify-between">
                            <h2 className="font-semibold text-[var(--color-primary)]">
                                Order Summary
                            </h2>
                            {(showLeftArrow || showRightArrow) && (
                                <div className="flex items-center gap-1">
                                    <button
                                        type="button"
                                        onClick={() => scroll("left")}
                                        disabled={!showLeftArrow}
                                        className="flex h-8 w-8 items-center justify-center rounded-full border border-gray-200 text-gray-600 transition hover:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-30"
                                        aria-label="Scroll left"
                                    >
                                        <ChevronLeft fontSize="small" />
                                    </button>
                                    <button
                                        type="button"
                                        onClick={() => scroll("right")}
                                        disabled={!showRightArrow}
                                        className="flex h-8 w-8 items-center justify-center rounded-full border border-gray-200 text-gray-600 transition hover:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-30"
                                        aria-label="Scroll right"
                                    >
                                        <ChevronRight fontSize="small" />
                                    </button>
                                </div>
                            )}
                        </div>

                        <div
                            ref={scrollContainerRef}
                            onScroll={checkScroll}
                            className="flex gap-4 overflow-x-auto scrollbar-none scroll-smooth pb-2"
                            style={{ scrollbarWidth: "none", msOverflowStyle: "none" }}
                        >
                            {data?.products?.map((item: any, idx: number) => {
                                const productImage =
                                    item?.productDetails?.productImageUrl ||
                                    item?.productImageUrl ||
                                    item?.productDetails?.variantDetails?.variantImageUrl ||
                                    item?.variantDetails?.variantImageUrl ||
                                    "";

                                return (
                                    <Link
                                        key={item?._id || idx}
                                        href={routes.account.orderDetails(data?._id)}
                                        className="flex-shrink-0 w-48 rounded-2xl border border-gray-200 p-3 transition hover:shadow-md"
                                    >
                                        <div className="relative h-24 w-full rounded-xl border border-gray-200 mb-3 bg-gray-50 overflow-hidden">
                                            <ImageFallback
                                                src={productImage}
                                                alt={item?.productDetails?.productTitle || item?.productTitle || "product"}
                                                fill
                                                className="object-contain p-2"
                                            />
                                        </div>
                                        <div>
                                            <h3 className="text-sm font-semibold text-[var(--color-primary)] line-clamp-2">
                                                {item?.productDetails?.productTitle || item?.productTitle}
                                            </h3>
                                            <p className="mt-1 text-xs text-gray-500">
                                                Qty × {item?.quantity}
                                            </p>
                                            <p className="mt-2 text-sm font-bold text-[var(--color-secondary)]">
                                                {formatConvertedPrice(
                                                    item?.productAmount || 0,
                                                    currency.toCurrency,
                                                    currency.value
                                                )}
                                            </p>
                                            {item?.orderProductReturnStatus && String(item?.orderProductReturnStatus) !== "0" && (
                                                <div className="mt-2">
                                                    <span
                                                        className={`inline-flex items-center gap-1 rounded-md px-2 py-0.5 text-[11px] font-semibold border ${getReturnStatusInfo(item?.orderProductReturnStatus).badgeClass
                                                            }`}
                                                    >
                                                        <AssignmentReturn style={{ fontSize: 13 }} />
                                                        {getReturnStatusInfo(item?.orderProductReturnStatus).label}
                                                    </span>
                                                </div>
                                            )}
                                        </div>
                                    </Link>
                                );
                            })}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
}