"use client";

import { useState, useEffect } from "react";
import { useParams } from "next/navigation";
import Breadcrumb from "@/components/Breadcrumb";
import OrderTypeSelector, {
    DeliveryType,
} from "@/components/order/OrderTypeSelector";
import ShippingForm, { ShippingFormData } from "@/components/order/ShippingForm";
import OrderSidebar from "@/components/order/OrderSidebar";
import { authenticatedFetch } from "@/lib/authenticated-fetch";
import { MapPin, Check, Plus, ChevronDown } from "lucide-react";
import { useTranslations } from "next-intl";

interface SavedAddress {
    id: number;
    first_name: string;
    last_name: string;
    email: string;
    address1: string;
    city: string;
    state: string;
    country: string;
    postcode: string;
    phone: string;
}

export default function OrderPage() {
    const { locale } = useParams() as { locale: string };
    const t = useTranslations("cart");
    const isRtl = locale === "ar";
    const [selectedDeliveryType, setSelectedDeliveryType] =
        useState<DeliveryType>("home");

    // Cart data from backend
    const [cartItems, setCartItems] = useState<any[]>([]);
    const [cartTotals, setCartTotals] = useState<any[]>([]);
    const [cartLoading, setCartLoading] = useState(true);

    // Address states
    const [savedAddresses, setSavedAddresses] = useState<SavedAddress[]>([]);
    const [selectedAddressId, setSelectedAddressId] = useState<number | null>(null);
    const [showAddForm, setShowAddForm] = useState(true); // Show form by default (no saved addresses yet)
    const [submitLoading, setSubmitLoading] = useState(false);
    const [submitError, setSubmitError] = useState<string | null>(null);
    const [submitSuccess, setSubmitSuccess] = useState(false);

    /** Fetch cart details on mount */
    useEffect(() => {
        const fetchCart = async () => {
            try {
                const res = await authenticatedFetch("/api/checkout/cartdetails");
                const data = await res.json();

                if (res.ok) {
                    const items = data?.data?.items || data?.items || [];
                    setCartItems(items);
                    setCartTotals(data?.totalsData || []);
                }
            } catch (err) {
                console.error("[OrderPage] Cart fetch error:", err);
            } finally {
                setCartLoading(false);
            }
        };

        fetchCart();
    }, []);

    /** Format address for display */
    const formatAddress = (addr: SavedAddress): string => {
        const parts = [addr.address1, addr.city, addr.state, addr.country].filter(Boolean);
        return parts.join("، ");
    };

    /** Save address via Markatty API */
    const handleFormSubmit = async (data: ShippingFormData) => {
        setSubmitLoading(true);
        setSubmitError(null);
        setSubmitSuccess(false);

        try {
            const res = await authenticatedFetch("/api/checkout/saveaddress", {
                method: "POST",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify({
                    billing: data,
                    shipping: data,
                }),
            });

            const result = await res.json();

            if (!res.ok || result.success === false) {
                setSubmitError(result.message || "حدث خطأ أثناء حفظ العنوان. الرجاء المحاولة مرة أخرى.");
                return;
            }

            // Address saved — add to the local list
            const newAddress: SavedAddress = {
                id: result.addressId || Date.now(),
                ...data,
            };

            setSavedAddresses((prev) => [...prev, newAddress]);
            setSelectedAddressId(newAddress.id);
            setShowAddForm(false);
            setSubmitSuccess(true);

            // Auto-hide success message after 3 seconds
            setTimeout(() => setSubmitSuccess(false), 3000);
        } catch (err) {
            console.error("[OrderPage] Save address error:", err);
            setSubmitError("حدث خطأ في الاتصال. الرجاء المحاولة مرة أخرى.");
        } finally {
            setSubmitLoading(false);
        }
    };

    /** Select a saved address */
    const handleSelectAddress = (id: number) => {
        setSelectedAddressId(id);
        setShowAddForm(false);
    };

    const breadcrumbItems = [
        { label: t("home") || "Home", href: `/${locale}/home` },
        { label: t("order-information") || "Order Information" },
    ];

    return (
        <div className="min-h-screen bg-white dark:bg-background-dark text-gray-800 dark:text-gray-100 transition-colors duration-200" dir={isRtl ? "rtl" : "ltr"}>
            <main className="container mx-auto px-4 lg:px-8 py-8">
                <div className={`flex items-center text-sm text-gray-500 dark:text-gray-400 mb-8`}>
                    <Breadcrumb items={breadcrumbItems} />
                </div>

                <h2 className="text-xl font-bold mb-6 text-start text-black dark:text-white">
                    {t("order-information")}
                </h2>

                <OrderTypeSelector
                    selectedType={selectedDeliveryType}
                    onTypeChange={setSelectedDeliveryType}
                />

                <div className="border border-gray-300 dark:border-gray-600 rounded-xl p-6 lg:p-8 bg-white dark:bg-surface-dark">
                    <div className="flex justify-between items-center mb-6">
                        <h3 className="text-lg font-bold text-black dark:text-white">{t("checkout.shipping-address")}</h3>
                        <span className="text-xs text-gray-400">{t("please-choose-delivery-method")}</span>
                    </div>

                    {/* Success Message */}
                    {submitSuccess && (
                        <div className="mb-6 p-4 bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg flex items-center gap-2">
                            <Check className="w-5 h-5 text-green-600 dark:text-green-400" />
                            <p className="text-green-600 dark:text-green-400 text-sm font-medium">
                                {t("address-saved-success")}
                            </p>
                        </div>
                    )}

                    {/* Error Message */}
                    {submitError && (
                        <div className="mb-6 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-sm text-center">{submitError}</p>
                        </div>
                    )}

                    <div className="grid grid-cols-1 lg:grid-cols-12 gap-8">
                        {/* Sidebar (Summary) */}
                        <div className="lg:col-span-4 order-2 lg:order-2">
                            <OrderSidebar
                                items={cartItems}
                                totals={cartTotals}
                                isLoading={cartLoading}
                            />
                        </div>

                        {/* Main Content — Saved Addresses + Form */}
                        <div className="lg:col-span-8 order-1 lg:order-1">

                            {/* Saved Addresses List */}
                            {savedAddresses.length > 0 && (
                                <div className="mb-6 space-y-3">
                                    <h4 className="text-sm font-bold text-gray-700 dark:text-gray-300 mb-3">
                                        {t("saved-addresses")}
                                    </h4>
                                    {savedAddresses.map((addr) => (
                                        <button
                                            key={addr.id}
                                            type="button"
                                            onClick={() => handleSelectAddress(addr.id)}
                                            className={`w-full text-right p-4 rounded-xl border-2 transition-all duration-200 ${selectedAddressId === addr.id
                                                    ? "border-black dark:border-white bg-gray-50 dark:bg-gray-800 shadow-sm"
                                                    : "border-gray-200 dark:border-gray-700 hover:border-gray-400 dark:hover:border-gray-500"
                                                }`}
                                        >
                                            <div className="flex items-start gap-3">
                                                <div className={`mt-1 w-5 h-5 rounded-full border-2 flex items-center justify-center flex-shrink-0 transition ${selectedAddressId === addr.id
                                                        ? "border-black dark:border-white bg-black dark:bg-white"
                                                        : "border-gray-300 dark:border-gray-600"
                                                    }`}>
                                                    {selectedAddressId === addr.id && (
                                                        <Check className="w-3 h-3 text-white dark:text-black" />
                                                    )}
                                                </div>
                                                <div className="flex-1">
                                                    <div className="flex items-center gap-2 mb-1">
                                                        <MapPin className="w-4 h-4 text-gray-500" />
                                                        <span className="font-semibold text-sm text-gray-800 dark:text-gray-200">
                                                            {addr.first_name} {addr.last_name}
                                                        </span>
                                                    </div>
                                                    <p className="text-xs text-gray-500 dark:text-gray-400 leading-relaxed">
                                                        {formatAddress(addr)}
                                                    </p>
                                                    <p className="text-xs text-gray-400 mt-1" dir="ltr">
                                                        {addr.phone}
                                                    </p>
                                                </div>
                                            </div>
                                        </button>
                                    ))}

                                    {/* Add New Address Button */}
                                    {!showAddForm && (
                                        <button
                                            type="button"
                                            onClick={() => setShowAddForm(true)}
                                            className="w-full flex items-center justify-center gap-2 py-3 border-2 border-dashed border-gray-300 dark:border-gray-600 rounded-xl text-sm text-gray-500 dark:text-gray-400 hover:border-gray-500 hover:text-gray-700 dark:hover:border-gray-400 dark:hover:text-gray-300 transition"
                                        >
                                            <Plus className="w-4 h-4" />
                                            {t("add-new-address")}
                                        </button>
                                    )}
                                </div>
                            )}

                            {/* Shipping Form — always show if no addresses saved, or if user clicks "add new" */}
                            {showAddForm && (
                                <div className={savedAddresses.length > 0 ? "pt-4 border-t border-gray-200 dark:border-gray-700" : ""}>
                                    {savedAddresses.length > 0 && (
                                        <div className="flex items-center justify-between mb-4">
                                            <h4 className="text-sm font-bold text-gray-700 dark:text-gray-300">{t("add-new-address")}</h4>
                                            <button
                                                type="button"
                                                onClick={() => setShowAddForm(false)}
                                                className="text-xs text-gray-400 hover:text-gray-600 transition"
                                            >
                                                {t("cancel")}
                                            </button>
                                        </div>
                                    )}
                                    <ShippingForm
                                        onSubmit={handleFormSubmit}
                                        isLoading={submitLoading}
                                    />
                                </div>
                            )}
                        </div>
                    </div>
                </div>
            </main>
        </div>
    );
}