"use client";

import React, { useEffect, useState } from "react";
import { useSearchParams, useParams } from "next/navigation";
import OrderTrackingStepper from "@/components/tracking/OrderTrackingStepper";
import TrackingFormByOrder from "@/components/tracking/TrackingFormByOrder";
import CustomerSupportCard from "@/components/tracking/CustomerSupportCard";
import MapView from "@/components/tracking/MapView";
import { OrderTrackingData, OrderStatusStep, OrderStatus, TrackingFormByOrderData } from "@/types/tracking.types";
import { mockSupportAgent } from "@/lib/mockTrackingData";
import { authenticatedFetch } from "@/lib/authenticated-fetch";
import Link from "next/link";
import { useTranslations } from "next-intl";

/** Map Bagisto order status → our OrderStatus enum */
function mapBagistoStatus(status: string): OrderStatus {
    const lower = (status || "").toLowerCase();
    if (lower === "completed" || lower === "complete") return "delivered";
    if (lower === "processing") return "processing";
    if (lower === "shipped" || lower === "out_for_delivery") return "shipped";
    if (lower === "in_transit") return "in_transit";
    return "received"; // pending, new, etc.
}

/** Build status steps from Bagisto status (uses translation function) */
function buildStatusSteps(currentStatus: OrderStatus, t: (key: string) => string): OrderStatusStep[] {
    const allSteps: OrderStatusStep[] = [
        { status: "received", label: t("status-received"), icon: "fas fa-clipboard-check", completed: false },
        { status: "processing", label: t("status-processing"), icon: "fas fa-box-open", completed: false },
        { status: "shipped", label: t("status-shipped"), icon: "fas fa-truck-loading", completed: false },
        { status: "in_transit", label: t("status-in-transit"), icon: "fas fa-shipping-fast", completed: false },
        { status: "delivered", label: t("status-delivered"), icon: "fas fa-home", completed: false },
    ];

    const statusOrder: OrderStatus[] = ["received", "processing", "shipped", "in_transit", "delivered"];
    const currentIndex = statusOrder.indexOf(currentStatus);

    return allSteps.map((step, index) => ({
        ...step,
        completed: index <= currentIndex,
    }));
}

export default function TrackOrderPage() {
    const searchParams = useSearchParams();
    const { locale } = useParams() as { locale: string };
    const t = useTranslations("track-order");
    const dbIdFromUrl = searchParams?.get("id") ?? null;
    const incrementIdFromUrl = searchParams?.get("incrementId") ?? null;
    const initialSearch = dbIdFromUrl || incrementIdFromUrl || "";

    const [trackingData, setTrackingData] = useState<OrderTrackingData | null>(null);
    const [orderRaw, setOrderRaw] = useState<any>(null);
    const [isLoading, setIsLoading] = useState(false);
    const [error, setError] = useState<string | null>(null);

    /** Fetch order details from Markatty API */
    const fetchOrderDetails = async (identifier: string) => {
        setIsLoading(true);
        setError(null);
        try {
            const res = await authenticatedFetch(
                `/api/customer/orderdetails?incrementId=${encodeURIComponent(identifier)}&id=${encodeURIComponent(identifier)}`
            );
            const data = await res.json();

            if (!res.ok || data.success === false) {
                setError(data.message || t("order-not-found"));
                setTrackingData(null);
                return;
            }

            setOrderRaw(data);

            // Build status steps from real status or timeline
            const currentStatus = mapBagistoStatus(data.state || data.status || "pending");
            let statusHistory: OrderStatusStep[];

            if (data.orderTimelines && Array.isArray(data.orderTimelines)) {
                statusHistory = data.orderTimelines
                    .filter((tl: any) => tl.status !== "canceled")
                    .map((tl: any) => ({
                        status: tl.status as OrderStatus,
                        label: tl.label || tl.status,
                        icon: "",
                        timestamp: tl.createdAt || undefined,
                        completed: tl.active === 1,
                    }));
            } else {
                statusHistory = buildStatusSteps(currentStatus, t);
            }

            const trackData: OrderTrackingData = {
                trackingNumber: data.shipmentList?.[0]?.tracking_number || "",
                orderNumber: String(data.incrementId || identifier),
                currentStatus,
                statusHistory,
                customerInfo: {
                    name: data.customerName || "",
                    phone: "",
                    email: data.customerEmail || "",
                },
            };
            setTrackingData(trackData);
        } catch (err) {
            console.error("[TrackOrder] Error:", err);
            setError(t("search-error"));
        } finally {
            setIsLoading(false);
        }
    };

    // Auto-fetch if id or incrementId is in the URL
    useEffect(() => {
        if (initialSearch) {
            fetchOrderDetails(initialSearch);
        }
    }, [initialSearch]);

    const handleTrackByOrder = async (data: TrackingFormByOrderData) => {
        if (data.orderNumber.trim()) {
            await fetchOrderDetails(data.orderNumber.trim());
        }
    };

    return (
        <div className="min-h-screen bg-background-light dark:bg-background-dark text-text-main-light dark:text-text-main-dark font-body" dir={locale === "ar" ? "rtl" : "ltr"}>
            <main className="flex-grow container mx-auto px-4 py-6 sm:py-8 md:py-12 lg:px-24">
                {/* Page Title */}
                <h1 className="text-xl sm:text-2xl md:text-3xl font-bold text-right mb-6 sm:mb-8">{t("page-title")}</h1>

                {/* Tracking Form */}
                <div className="bg-background-light dark:bg-surface-dark border border-border-light dark:border-border-dark rounded-2xl sm:rounded-3xl p-4 sm:p-6 md:p-8 lg:p-12 shadow-sm mb-8 sm:mb-12 md:mb-16">
                    <div className="max-w-lg mx-auto">
                        <TrackingFormByOrder
                            onSubmit={handleTrackByOrder}
                            isLoading={isLoading}
                            initialOrderNumber={trackingData?.orderNumber || ""}
                            initialContact={orderRaw?.customerEmail || ""}
                        />
                    </div>

                    {/* Link to My Orders */}
                    <div className="mt-4 pt-4 border-t border-gray-200 dark:border-gray-700">
                        <Link
                            href={`/${locale}/user-profile/orders`}
                            className="inline-flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400 hover:text-black dark:hover:text-white transition-colors"
                        >
                            <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
                                <path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
                            </svg>
                            {t("view-all-orders")}
                        </Link>
                    </div>

                    {/* Error Message */}
                    {error && (
                        <div className="mt-4 sm:mt-6 p-3 sm:p-4 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg">
                            <p className="text-red-600 dark:text-red-400 text-center text-sm sm:text-base">{error}</p>
                        </div>
                    )}
                </div>

                {/* Order Status Section — Only show when tracking data is available */}
                {trackingData && (
                    <>
                        {/* Order Summary Card */}
                        {orderRaw && (
                            <div className="bg-white dark:bg-surface-dark border border-gray-200 dark:border-gray-700 rounded-2xl p-6 mb-8">
                                <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-6">
                                    <div>
                                        <h2 className="text-lg font-bold text-gray-900 dark:text-white">
                                            {t("order-number")}{trackingData.orderNumber}
                                        </h2>
                                        <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">
                                            {orderRaw.orderDate
                                                ? new Date(orderRaw.orderDate).toLocaleDateString(locale === "ar" ? "ar-EG" : "en-US", { year: "numeric", month: "long", day: "numeric" })
                                                : ""}
                                        </p>
                                    </div>
                                    <div className="flex items-center gap-3">
                                        <StatusBadge status={orderRaw.state || orderRaw.statusLabel || "pending"} t={t} />
                                        {orderRaw.orderTotal && (
                                            <span className="text-lg font-bold text-gray-900 dark:text-white">
                                                {orderRaw.orderTotal}
                                            </span>
                                        )}
                                    </div>
                                </div>

                                {/* Order Items */}
                                {orderRaw.orderItems && orderRaw.orderItems.length > 0 && (
                                    <div className="space-y-3">
                                        {orderRaw.orderItems.slice(0, 5).map((item: any, i: number) => (
                                            <div
                                                key={i}
                                                className="flex items-center gap-4 p-3 bg-gray-50 dark:bg-gray-800 rounded-xl"
                                            >
                                                {item.image && (
                                                    <img
                                                        src={item.image}
                                                        alt={item.name}
                                                        className="w-14 h-14 object-cover rounded-lg"
                                                    />
                                                )}
                                                <div className="flex-1 min-w-0">
                                                    <p className="text-sm font-medium text-gray-900 dark:text-white truncate">
                                                        {item.name}
                                                    </p>
                                                    <p className="text-xs text-gray-500 dark:text-gray-400">
                                                        {t("quantity")}: {typeof item.qty === 'object' ? (item.qty?.Ordered || 1) : (item.qty || 1)}
                                                    </p>
                                                </div>
                                                <span className="text-sm font-semibold text-gray-900 dark:text-white whitespace-nowrap">
                                                    {item.formattedPrice || item.price}
                                                </span>
                                            </div>
                                        ))}
                                    </div>
                                )}
                            </div>
                        )}

                        {/* Progress Stepper */}
                        <div className="overflow-x-auto -mx-4 px-4 sm:mx-0 sm:px-0">
                            <OrderTrackingStepper statusHistory={trackingData.statusHistory} />
                        </div>

                        {/* Bottom Grid - Map and Support */}
                        <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 sm:gap-6 md:gap-8">
                            {/* Map View */}
                            <div className="h-48 sm:h-56 md:h-64 lg:h-64 order-1 lg:order-1">
                                <MapView destination={trackingData.location} />
                            </div>

                            {/* Customer Support Card */}
                            <div className="min-h-[180px] sm:min-h-[200px] md:min-h-[256px] order-2 lg:order-2">
                                <CustomerSupportCard agent={mockSupportAgent} />
                            </div>
                        </div>

                        {/* Shipping Address */}
                        {orderRaw?.shippingAddress && (
                            <div className="bg-white dark:bg-surface-dark border border-gray-200 dark:border-gray-700 rounded-2xl p-6 mt-6">
                                <h3 className="text-base font-bold text-gray-900 dark:text-white mb-4">
                                    {t("shipping-address")}
                                </h3>
                                <p className="text-sm text-gray-600 dark:text-gray-400 whitespace-pre-line leading-relaxed">
                                    {typeof orderRaw.shippingAddress === 'string'
                                        ? orderRaw.shippingAddress.replace(/\s+/g, ' ').trim()
                                        : `${orderRaw.shippingAddress.first_name || ''} ${orderRaw.shippingAddress.last_name || ''}`}
                                </p>
                                {orderRaw?.paymentMethod && (
                                    <div className="mt-4 pt-4 border-t border-gray-200 dark:border-gray-700">
                                        <p className="text-xs text-gray-500 dark:text-gray-400 mb-1">{t("payment-method")}</p>
                                        <p className="text-sm font-medium text-gray-900 dark:text-white">{orderRaw.paymentMethod}</p>
                                    </div>
                                )}
                            </div>
                        )}
                    </>
                )}
            </main>
        </div>
    );
}

/** Status badge component */
function StatusBadge({ status, t }: { status: string; t: (key: string) => string }) {
    const map: Record<string, { label: string; color: string }> = {
        pending: { label: t("status-pending"), color: "bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400" },
        processing: { label: t("status-processing"), color: "bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400" },
        completed: { label: t("status-completed"), color: "bg-emerald-100 text-emerald-800 dark:bg-emerald-900/30 dark:text-emerald-400" },
        canceled: { label: t("status-canceled"), color: "bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400" },
        closed: { label: t("status-closed"), color: "bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300" },
    };
    const found = map[status.toLowerCase()] || map.pending;
    return (
        <span className={`inline-flex items-center px-3 py-1 rounded-full text-xs font-medium ${found.color}`}>
            {found.label}
        </span>
    );
}