"use client";

import Image from "next/image";
import { useCart } from "@/contexts/cart";
import { useTranslations } from "next-intl";
import { Link } from "@/i18n/navigation";

import { Loader, SaudiRiyal, ShoppingBag, Trash2 } from "lucide-react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { URL_IMAGE } from "@/utils/url";

export function CartContent({ data: initialData }: { data: any }) {
    const { cart, loading, removeFromCart, clearCart, itemIdRemoving, removingAllLoading } = useCart();
    // Use store cart if loaded/populated, fallback to initialData only if store is fresh/loading
    const data = cart.length > 0 || !loading ? cart : initialData;

    const t = useTranslations("cart");
    const globalT = useTranslations();

    const calculateTotal = () => {
        return data?.reduce((sum, item) => sum + Number(item.price), 0).toFixed(2);
    };

    if (!data?.length) {
        return (
            <div className="container mx-auto px-4 py-16 max-w-2xl">
                <Card>
                    <CardContent className="flex flex-col items-center justify-center py-16 text-center">
                        <ShoppingBag className="w-20 h-20 text-muted-foreground mb-4" />
                        <h2 className="text-2xl font-semibold mb-2">{t("emptyMessage")}</h2>
                        <p className="text-muted-foreground mb-6">{t("emptyDescription")}</p>
                        <Button asChild className="bg-primary-tw-700">
                            <Link href="/programs">{t("browseCourses")}</Link>
                        </Button>
                    </CardContent>
                </Card>
            </div>
        );
    };

    return (
        <div className="box px-4 py-8">
            <h1 className="text-3xl font-bold mb-8">{t("title")}</h1>

            <div className="grid lg:grid-cols-3 gap-8">
                <div className="lg:col-span-2">
                    <Card>
                        <CardContent className="p-6">
                            <div className="flex items-center justify-between pb-4 border-b mb-4">
                                <h2 className="font-semibold text-sm text-muted-foreground uppercase">
                                    {t("courseProduct")}
                                </h2>
                                <h2 className="font-semibold text-sm text-muted-foreground uppercase">
                                    {t("price")}
                                </h2>
                            </div>

                            <div className="space-y-4">
                                {data?.map((item) => (
                                    <div
                                    key={item.id}
                                    className="flex gap-4 py-4 border-b last:border-b-0"
                                    aria-disabled={loading || removingAllLoading}
                                >
                                        <div className="relative size-24 flex-shrink-0 rounded-md overflow-hidden bg-muted">
                                            {/* Support both group items (group_image) and package items (package_image) */}
                                            {
                                                (item?.package_image ?? item?.group_image) ?
                                                    <Image
                                                        src={`${URL_IMAGE}/${item.package_image ?? item.group_image}`}
                                                        alt={item.package_name ?? item.group_name ?? ''}
                                                        fill
                                                        className="object-cover rounded-md"
                                                    />
                                                    :
                                                    <span className="bg-secondary size-full rounded-md" />
                                            }
                                        </div>

                                        <div className="flex-1 min-w-0">
                                            <h3 className="font-semibold text-lg mb-1 line-clamp-2">
                                                {/* package_name for package items, group_name for program items */}
                                                {item?.package_name ?? item?.group_name}
                                            </h3>
                                            {
                                                Number(item?.price) ?
                                                    <span className="font-semibold flex items-center gap-1">
                                                        <SaudiRiyal className="size-4" />{item?.price}
                                                    </span>
                                                    :
                                                    <p className="font-semibold flex items-center gap-1">
                                                        {globalT("programs.free")}
                                                    </p>
                                            }

                                        </div>

                                        <div>
                                            <Button variant={"destructive"} size={"sm"}
                                                disabled={!!itemIdRemoving}
                                                onClick={() => removeFromCart(item?.id, globalT)}
                                            >
                                                {
                                                    (itemIdRemoving === item?.id)
                                                        ?
                                                        <Loader className="animate-spin" />
                                                        :
                                                        <Trash2 />
                                                }
                                            </Button>
                                        </div>
                                    </div>
                                ))}
                            </div>

                            <div className="grid grid-cols-2 gap-2 mt-6 pt-4 border-t">
                                <Button variant="secondary" className="w-full border" asChild>
                                    <Link href="/">{t("returnToHome")}</Link>
                                </Button>
                                <Button
                                    variant={"destructive"}
                                    disabled={removingAllLoading}
                                    onClick={() => clearCart(globalT)}
                                >
                                    {
                                        removingAllLoading ?
                                            <>
                                                <Loader className="animate-spin" />
                                                {t("removing")}
                                            </>
                                            :
                                            t("emptyCart")
                                    }
                                </Button>
                            </div>
                        </CardContent>
                    </Card>
                </div>

                {/* total */}
                <div className="lg:col-span-1">
                    <Card className="sticky top-4">
                        <CardHeader>
                            <CardTitle>{t("cartTotal")}</CardTitle>
                        </CardHeader>
                        <CardContent>
                            <div className="space-y-4 mb-6">
                                <div className="flex justify-between text-lg">
                                    <span className="font-medium">{t("total")}:</span>
                                    <span className="font-bold text-xl flex items-center gap-1">
                                        <SaudiRiyal className="size-5" /> {calculateTotal()}
                                    </span>
                                </div>
                            </div>
                            {data?.length > 0 && (
                                <Button className="w-full bg-primary-tw-700" size="lg" asChild>
                                    <Link href={'/cart/checkout'}>
                                        {t("proceedToCheckout")}
                                    </Link>
                                </Button>
                            )}
                        </CardContent>
                    </Card>
                </div>
            </div>
        </div>
    );
}