"use client";

import { Home, Gift, Lock, Store } from "lucide-react";
import { useTranslations, useLocale } from "next-intl";

export type DeliveryType = "home" | "gift" | "locker" | "branch";

export interface OrderTypeSelectorProps {
    selectedType: DeliveryType;
    onTypeChange: (type: DeliveryType) => void;
}

interface DeliveryOption {
    id: DeliveryType;
    titleKey: string;
    descriptionKey: string;
    estimateKey: string;
    estimateColorClass: string;
    Icon: typeof Home;
}

const deliveryOptions: DeliveryOption[] = [
    {
        id: "home",
        titleKey: "home-delivery",
        descriptionKey: "home-delivery-desc",
        estimateKey: "estimate-1-4-days",
        estimateColorClass: "text-green-500",
        Icon: Home,
    },
    {
        id: "gift",
        titleKey: "gift-delivery",
        descriptionKey: "gift-delivery-desc",
        estimateKey: "estimate-1-4-days",
        estimateColorClass: "text-green-500",
        Icon: Gift,
    },
    {
        id: "locker",
        titleKey: "locker-delivery",
        descriptionKey: "locker-delivery-desc",
        estimateKey: "estimate-1-4-days",
        estimateColorClass: "text-green-500",
        Icon: Lock,
    },
    {
        id: "branch",
        titleKey: "branch-pickup",
        descriptionKey: "branch-pickup-desc",
        estimateKey: "estimate-1-4-days",
        estimateColorClass: "text-green-500",
        Icon: Store,
    },
];

export default function OrderTypeSelector({
    selectedType,
    onTypeChange,
}: OrderTypeSelectorProps) {
    const t = useTranslations("cart");
    const locale = useLocale();
    const isRtl = locale === "ar";

    return (
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-10" dir={isRtl ? "rtl" : "ltr"}>
            {deliveryOptions.map((option) => {
                const isSelected = selectedType === option.id;
                const Icon = option.Icon;

                return (
                    <label
                        key={option.id}
                        onClick={() => onTypeChange(option.id)}
                        className={`
                            cursor-pointer border rounded-lg p-6 transition flex flex-row items-center justify-between text-start group
                            ${isSelected
                                ? "border-black dark:border-white bg-white dark:bg-surface-dark ring-1 ring-black dark:ring-white"
                                : "border-gray-300 dark:border-gray-600 hover:border-black dark:hover:border-white bg-white dark:bg-surface-dark"
                            }
                        `}
                    >
                        <div className="flex flex-col w-full pl-2 h-full">
                            <div className={`flex items-center gap-2 mb-2 ${isRtl ? "justify-start" : "justify-start"}`}>
                                <h3 className="font-bold text-lg text-black dark:text-white">{t(option.titleKey)}</h3>
                                <div className={`
                                    w-4 h-4 rounded-full border flex items-center justify-center
                                    ${isSelected ? "border-black bg-black dark:bg-white dark:border-white" : "border-gray-400 dark:border-gray-500"}
                                `}>
                                    {isSelected && <div className="w-1.5 h-1.5 bg-white dark:bg-black rounded-full" />}
                                </div>
                            </div>
                            <p className="text-xs text-gray-500 dark:text-gray-400 mb-2 whitespace-pre-line leading-relaxed">
                                {t(option.descriptionKey)}
                            </p>
                            <span className={`text-xs font-bold mt-auto ${option.estimateColorClass}`}>
                                {t(option.estimateKey)}
                            </span>
                        </div>
                        <div className={`shrink-0 ${isRtl ? "mr-2" : "ml-2"}`}>
                            <Icon
                                className={`text-4xl w-12 h-12 transition-colors
                                    ${isSelected
                                        ? "text-black dark:text-white"
                                        : "text-gray-900 dark:text-gray-100 group-hover:text-black dark:group-hover:text-white"
                                    }
                                `}
                                strokeWidth={2}
                            />
                        </div>
                        {/* Hidden input for accessibility */}
                        <input
                            type="radio"
                            name="shipping_method"
                            checked={isSelected}
                            readOnly
                            className="hidden"
                        />
                    </label>
                );
            })}
        </div>
    );
}