"use client";

import { useOrderDetail } from "@/lib/providers/order-detail-provider";
import OrderStepperStatus from "./order-stepper-status";
import OrderTimeAddressInfoAlert from "./order-time-address-info-alert";
import OrderItems from "./order-items";
import OrderPaymentSticky from "./order-payment-sticky";

const STATUS_LABELS: Record<string, string> = {
    placed: "ثبت شد",
    preparing: "در حال آماده‌سازی",
    ready_to_ship: "آماده ارسال",
    handed_to_courier: "ارسال شد",
    delivered: "تحویل داده شد",
    cancelled: "لغو شد",
};

export default function OrderDetailContent() {
    const { data: orderGroup, error, isLoading } = useOrderDetail();

    if (isLoading) {
        return <div className="p-8 text-center text-gray-500">در حال بارگذاری...</div>;
    }

    if (error || !orderGroup) {
        return (
            <div className="p-8 text-center text-destructive">
                {error ?? "سفارش یافت نشد"}
            </div>
        );
    }

    // وضعیت اصلی رو از اولین سفارش می‌گیریم (یا می‌تونی منطق پیچیده‌تری بذاری)
    const mainStatus = orderGroup.orders[0]?.status ?? "placed";

    const statusToStep: Record<string, number> = {
        placed: 0,
        preparing: 2,
        ready_to_ship: 3,
        handed_to_courier: 3,
        delivered: 4,
        cancelled: -1,
    };

    const currentStep = statusToStep[mainStatus] ?? 0;
    const statusLabel = STATUS_LABELS[mainStatus] ?? mainStatus;

    return (
        <section className="relative pb-32">
            <h2 className="w-full p-3 px-4 bg-primary-action text-primary-foreground text-md font-medium">
                {statusLabel}
            </h2>

            {mainStatus !== "cancelled" && (
                <OrderStepperStatus currentStep={currentStep} />
            )}

            <OrderTimeAddressInfoAlert order={orderGroup} />
            <OrderItems order={orderGroup} />
            <OrderPaymentSticky order={orderGroup} />
        </section>
    );
}