import { useState } from "react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Label } from "@/components/ui/label";
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
import {
    Dialog,
    DialogContent,
    DialogDescription,
    DialogFooter,
    DialogHeader,
    DialogTitle,
    DialogTrigger,
} from "@/components/ui/dialog";
import Icon from "@/components/core/Icon";
import Price from "@/components/(public)/Price";
import { cn } from "@/lib/utils";
import { Separator } from "@/components/ui/separator";
import UIItemDatesSelector from "@/components/(public)/UiItemDatesSelector";
import UiCardFooter from "@/components/(public)/UiCardFooter";

// ------------------- Types -------------------
type MealVariant = {
    id: string;
    title: string;
    price: number;
};

type MealPackage = {
    id: string;
    title: string;
    description: string;
    price: number;
    currency: string;
    icon?: string;
    variants: MealVariant[];
};

type SelectedMeal = {
    variantId: string | null;
    days: string[];
};

// ------------------- MealPackageCard -------------------
export default function MealPackageCard() {
    // ------------------- Dummy Data -------------------
    const mealPackage: MealPackage = {
        id: "full-board",
        title: "Full Board",
        description: "Breakfast, lunch, and dinner included daily.",
        price: 8500,
        currency: "LKR",
        icon: "utensils-crossed",
        variants: [
            { id: "standard", title: "Standard Full Board", price: 8500 },
            { id: "premium", title: "Premium Full Board", price: 12500 },
        ],
    };


    // ------------------- State -------------------
    const [selectedVariant, setSelectedVariant] = useState<string | null>(null);
    const [selectedDays, setSelectedDays] = useState<string[]>([]);
    const [appliedSelection, setAppliedSelection] = useState<SelectedMeal | null>(null);



    const handleApply = (close: () => void) => {
        setAppliedSelection({ variantId: selectedVariant, days: selectedDays });
        close();
    };

    return (
        < >
            {/* Card with DialogTrigger */}
            <Dialog>
                <DialogTrigger asChild>
                    {/* <div className="flex gap-3 items-center p-2 rounded-sm border cursor-pointer">
                        <div className="h-10 w-10 rounded-lg bg-main/10 flex items-center justify-center shrink-0">
                            <span className="text-main w-5 h-5">🍽️</span>
                        </div>
                        <div className="flex-1 space-y-0.5">
                            <CardTitle className="text-sm font-semibold">{mealPackage.title}</CardTitle>
                            <p className="text-xs text-neutral-500">{mealPackage.description}</p>
                        </div>
                        <div className="text-sm font-semibold text-neutral-900">LKR {mealPackage.price}</div>
                    </div> */}
                    <label

                        className={`group relative h-fit flex gap-3 rounded-sm border p-3 bg-white border-neutral-200 cursor-pointer transition-all
                                    ${true ? 'border-main bg-white' : 'hover:border-main/50'}
                                `}
                    // onClick={handleClick}
                    >
                        {/* <input
                            type="radio"
                            name="meal_package"
                            className="absolute top-2.5 right-2.5 h-3.5 w-3.5 accent-main"
                        // checked={isSelected}
                        // onChange={e => { }}
                        // onClick={handleClick}

                        /> */}

                        <div className="h-10 w-10 rounded-lg bg-main/10 flex items-center justify-center shrink-0">
                            <Icon icon={'Box'} className="text-main w-5 h-5" />
                        </div>

                        <div className="flex-1 space-y-0.5">
                            <div className="flex items-center gap-2">
                                <p className="font-semibold text-sm text-neutral-900">{mealPackage.title}</p>
                                {true && <span className="text-[10px] px-2 py-0.5 rounded-full bg-main text-white">{'Best'}</span>}
                            </div>
                            <p className="text-xs text-neutral-500">{mealPackage.description}</p>
                        </div>

                        <div className="flex flex-col items-end justify-end">
                            <span className="text-sm font-semibold text-neutral-900"><Price value={mealPackage.price} /></span>
                        </div>
                    </label>
                </DialogTrigger>

                <DialogContent className="w-105 p-4 rounded-sm gap-4">
                    <DialogHeader className="flex justify-start items-start">
                        <div className="flex items-start gap-2 w-full">
                            <div className="h-10 w-10 min-w-10 mt-1 rounded-md bg-main/10 flex items-center justify-center">
                                <Icon icon={'Box'} className="text-main w-6 h-6" />
                            </div>
                            <div className="">
                                <DialogTitle className="text-base">{mealPackage.title}</DialogTitle>
                                <DialogDescription className="text-sm text-neutral-500">{mealPackage.description}</DialogDescription>
                            </div>
                        </div>
                    </DialogHeader>

                    {/* Variants */}
                    <div className="space-y-2">
                        <p className="text-xs text-neutral-500">Choose variant</p>
                        <RadioGroup
                            value={selectedVariant || ""}
                            onValueChange={val => setSelectedVariant(val)}
                            className="space-y-1"
                        >
                            {mealPackage.variants.map(v => (
                                <div key={v.id} className={`flex justify-between items-center border p-2 rounded cursor-pointer ${selectedVariant === v.id ? "bg-main/10 border-main/40 text-main" : "hover:bg-neutral-100"}`}  >
                                    <Label className="flex items-start gap-2">
                                        <RadioGroupItem value={v.id} className="mt-1" />
                                        {/* <div className="h-10 w-10 min-w-10  rounded-md bg-main/10 flex items-center justify-center">
                                            <Icon icon={'Box'} className="text-main w-6 h-6" />
                                        </div> */}
                                        <div className="">
                                            <div className="flex justify-between text-black">
                                                <DialogTitle className="text-sm">{v.title}</DialogTitle>
                                                <span className="text-sm font-semibold whitespace-nowrap">LKR {v.price}</span>

                                            </div>
                                            <DialogDescription className="text-xs text-neutral-500">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Non aut ad</DialogDescription>
                                        </div>
                                    </Label>
                                </div>
                            ))}
                        </RadioGroup>
                    </div>

                    {/* Day Selection */}
                    <UIItemDatesSelector stayDays={[]} />

                    <UiCardFooter title="Total Price" subTitle="package" price={200} buttonTitle="Apply Selection" onClick={() => { }} />
                </DialogContent>
            </Dialog>

            {/* Applied Selection */}
            {appliedSelection && (
                <Card className="w-[380px]">
                    <CardContent className="text-sm text-neutral-700">
                        Selected Variant:{" "}
                        {mealPackage.variants.find(v => v.id === appliedSelection.variantId)?.title || "-"} <br />
                        Days: {appliedSelection.days.join(", ") || "-"}
                    </CardContent>
                </Card>
            )}
        </>
    );
}