"use client";

import Image from "next/image";
import CheckCircleIcon from "@mui/icons-material/CheckCircle";
import LocalShippingIcon from "@mui/icons-material/LocalShipping";
import ScheduleIcon from "@mui/icons-material/Schedule";
import VisibilityOutlinedIcon from "@mui/icons-material/VisibilityOutlined";
import DownloadOutlinedIcon from "@mui/icons-material/DownloadOutlined";
import LocationOnOutlinedIcon from "@mui/icons-material/LocationOnOutlined";
import { useRouter } from "next/navigation";
import { routes } from "@/src/config/routes";
import { apiEndpoints } from "@/src/server_api/config/api.endpoints";
import { RootState } from "@/src/redux/store";
import { useAppSelector } from "@/src/redux/hooks";
import { formatConvertedPrice } from "@/src/utils/helpers";
import { orderStatusArray, orderStatusArrayJson } from "@/src/constants/data/orders";
import ImageFallback from "@/src/components/custom-components/image-fallback";

const getOrderStatusBadge = (orderStatusVal: any) => {
    const matchedStatus = orderStatusArray.find(
        (s) => String(s.value) === String(orderStatusVal)
    );
    const label = matchedStatus?.label || (typeof orderStatusVal === "string" ? orderStatusVal : "Pending");

    const statusValStr = String(orderStatusVal);

    switch (statusValStr) {
        case orderStatusArrayJson.delivered:
        case "Delivered":
        case orderStatusArrayJson.completed:
        case "Completed":
            return {
                label,
                icon: <CheckCircleIcon sx={{ fontSize: 18 }} />,
                className: "bg-emerald-50 text-emerald-700 border border-emerald-200",
            };
        case orderStatusArrayJson.shipped:
        case "Shipped":
        case orderStatusArrayJson.partiallyShipped:
            return {
                label,
                icon: <LocalShippingIcon sx={{ fontSize: 18 }} />,
                className: "bg-[var(--color-primary)]/10 text-[var(--color-primary)] border border-[var(--color-primary)]/20",
            };
        case orderStatusArrayJson.canceled:
        case "Canceled":
        case "Cancelled":
            return {
                label,
                icon: <ScheduleIcon sx={{ fontSize: 18 }} />,
                className: "bg-red-50 text-red-700 border border-red-200",
            };
        case orderStatusArrayJson.returned:
        case "Returned":
            return {
                label,
                icon: <ScheduleIcon sx={{ fontSize: 18 }} />,
                className: "bg-amber-50 text-amber-700 border border-amber-200",
            };
        case orderStatusArrayJson.onHold:
        case "On Hold":
            return {
                label,
                icon: <ScheduleIcon sx={{ fontSize: 18 }} />,
                className: "bg-yellow-50 text-yellow-700 border border-yellow-200",
            };
        default:
            return {
                label,
                icon: <ScheduleIcon sx={{ fontSize: 18 }} />,
                className: "bg-[var(--color-secondary)]/10 text-[var(--color-secondary)] border border-[var(--color-secondary)]/20",
            };
    }
};

export default function OrdersPage({ data }: { data: any }) {
    const router = useRouter();
    const currency = useAppSelector((state: RootState) => state.currencies);
    const downloadInvoice = async (orderId: string) => {
        try {
            const url = `${process.env.NEXT_PUBLIC_API_BASE_URL}/${apiEndpoints.order.download_invoice}/${orderId}`;

            const response = await fetch(url, {
                method: "GET",
                headers: {
                    Accept: "application/pdf",
                    Authorization: `Bearer ${localStorage.getItem("token")}`,
                },
            });

            if (!response.ok) {
                throw new Error("Invoice download failed");
            }

            const blob = await response.blob();

            const fileURL = window.URL.createObjectURL(blob);

            const link = document.createElement("a");
            link.href = fileURL;
            link.download = `invoice_${orderId}.pdf`;

            document.body.appendChild(link);
            link.click();

            link.remove();
            window.URL.revokeObjectURL(fileURL);

        } catch (error) {
            console.error("Invoice download error:", error);
        }
    };

    return (
        <div className="mx-auto py-10 px-5 sm:px-5 lg:px-30 md:px-8 2xl:px-45">
            <h1 className="mb-2 text-4xl font-bold text-[var(--color-primary)]">
                My Orders
            </h1>
            <p className="mb-8 text-gray-500">
                Track your purchases and view invoices.
            </p>

            <div className="space-y-8">
                {data?.map((order: any) => {
                    const status = getOrderStatusBadge(order?.orderStatus ?? order?.status);

                    return (
                        <div
                            key={order._id}
                            className="overflow-hidden rounded-3xl border border-slate-200 bg-white shadow-lg transition-all duration-300 hover:-translate-y-1 hover:shadow-2xl"
                        >
                            <div className="flex flex-col gap-4 border-b border-gray-200 p-6 md:flex-row md:items-center md:justify-between">
                                <div>
                                    <div
                                        className={`inline-flex items-center gap-2 rounded-full px-3 py-1 text-sm font-medium ${status?.className}`}
                                    >
                                        {status?.icon}
                                        {status?.label}
                                    </div>
                                    <h2 className="mt-3 text-xl font-semibold text-[var(--color-primary)]">
                                        Order #{order?.orderId}
                                    </h2>

                                    <p className="mt-1 text-sm text-gray-500">
                                        Placed on{" "}
                                        {order?.createdAt &&
                                            new Date(order.createdAt).toLocaleDateString("en-GB", {
                                                day: "2-digit",
                                                month: "short",
                                                year: "numeric",
                                            })}
                                    </p>
                                </div>
                                <div className="text-right">
                                    <p className="text-sm text-gray-500">Order Total</p>
                                    <p className="text-2xl font-bold">
                                        {formatConvertedPrice(
                                            order?.totalAmount || 0,
                                            currency.toCurrency,
                                            currency.value
                                        )}
                                    </p>
                                </div>
                            </div>
                            <div className="divide-y">
                                {order?.products?.map((product: any, index: any) => {
                                    const productImage =
                                        product?.productDetails?.productImageUrl ||
                                        product?.productImageUrl ||
                                        product?.productDetails?.variantDetails?.variantImageUrl ||
                                        product?.variantDetails?.variantImageUrl ||
                                        "";

                                    return (
                                        <div
                                            key={index}
                                            className="flex flex-col gap-5 p-6 sm:flex-row border-gray-200"
                                        >
                                            <div className="relative h-28 w-28 overflow-hidden rounded-2xl border border-slate-200 bg-gradient-to-br from-slate-50 to-white p-2">
                                                <ImageFallback
                                                    src={productImage}
                                                    alt={product?.productDetails?.productTitle || product?.productTitle || "product"}
                                                    fill
                                                    className="object-contain p-2"
                                                />
                                            </div>
                                            <div className="flex flex-1 flex-col justify-between">
                                                <div>
                                                    <h3 className="text-lg font-semibold text-[var(--color-primary)]">
                                                        {product?.productDetails?.productTitle || product?.productTitle}
                                                    </h3>
                                                    <p className="mt-1 text-sm text-gray-500">
                                                        {product?.productDetails?.productCategory?.[0]?.category?.categoryTitle}
                                                    </p>
                                                </div>
                                                <div className="mt-4 flex flex-wrap items-center gap-6 text-sm">
                                                    <span className="rounded-full bg-[var(--color-primary)]/10 px-4 py-2 font-semibold text-[var(--color-primary)]">
                                                        {formatConvertedPrice(
                                                            Number(
                                                                product?.productDetails?.variantDetails?.discountPrice > 0
                                                                    ? product?.productDetails?.variantDetails?.discountPrice
                                                                    : product?.productDetails?.variantDetails?.price || product?.productAmount || 0
                                                            ),
                                                            currency.toCurrency,
                                                            currency.value
                                                        )}
                                                    </span>

                                                    <span className="rounded-full bg-[var(--color-secondary)]/10 px-4 py-2 font-medium text-[var(--color-secondary)]">
                                                        Qty × {product?.quantity}
                                                    </span>
                                                </div>
                                            </div>
                                        </div>
                                    );
                                })}
                            </div>
                            <div className="border-t border-gray-200 bg-gradient-to-r from-slate-50 via-white to-slate-50 p-6">
                                <div className="grid gap-6 md:grid-cols-2">
                                    <div>
                                        <p className="text-xs uppercase tracking-wide text-gray-500">
                                            Payment
                                        </p>

                                        <p className="mt-2 text-sm">{order?.paymentMethod?.paymentMethodTitle}</p>
                                    </div>

                                    <div className="text-left md:text-right">
                                        <p className="text-xs uppercase tracking-wide text-gray-500">
                                            Total
                                        </p>

                                        <p className="text-3xl font-bold text-[var(--color-secondary)]">
                                            {formatConvertedPrice(
                                                order?.totalAmount || 0,
                                                currency.toCurrency,
                                                currency.value
                                            )}
                                        </p>
                                    </div>
                                </div>

                                <div className="mt-6 flex flex-wrap gap-3">
                                    <button
                                        onClick={() => router.push(routes.account.trackOrders(order?._id))}
                                        className="rounded-xl bg-[var(--color-primary)] px-6 py-3 text-sm font-semibold text-white transition hover:bg-[var(--color-secondary)]">
                                        Track Order
                                    </button>

                                    <button
                                        onClick={() => router.push(routes.account.orderDetails(order?._id))}
                                        className="flex items-center gap-2 rounded-xl border border-[var(--color-primary)]/20 bg-white px-5 py-3 text-sm font-medium text-[var(--color-primary)] transition hover:border-[var(--color-secondary)] hover:bg-[var(--color-secondary)] hover:text-white">
                                        <VisibilityOutlinedIcon sx={{ fontSize: 18 }} />
                                        View Details
                                    </button>

                                    <button
                                        onClick={() => downloadInvoice(order?._id)}
                                        className="flex items-center gap-2 rounded-xl border border-[var(--color-primary)]/20 bg-white px-5 py-3 text-sm font-medium text-[var(--color-primary)] transition hover:border-[var(--color-secondary)] hover:bg-[var(--color-secondary)] hover:text-white"
                                    >
                                        <DownloadOutlinedIcon sx={{ fontSize: 18 }} />
                                        Invoice
                                    </button>
                                </div>
                            </div>
                        </div>
                    );
                })}
            </div>
        </div>
    );
}