"use client"
import Image from "next/image";
import { useEffect, useState } from "react";
import { URL_IMAGE } from "@/utils/url";

import { Link } from "@/i18n/navigation";
import { useCart } from "@/contexts/cart";
import { useLocale, useTranslations } from "next-intl";
import { USER_TOKEN_CL } from "@/utils/data/user-client";

import { Loader, SaudiRiyal, ShoppingCartIcon, Trash2 } from "lucide-react";
import {
    Sheet,
    SheetContent,
    SheetDescription,
    SheetFooter,
    SheetHeader,
    SheetTitle,
    SheetTrigger,
} from "@/components/ui/sheet";
import { Button } from "@/components/ui/button";

export function Cart({ children }: { children?: React.ReactNode }) {
    const t = useTranslations();
    const locale = useLocale();
    const [token, setToken] = useState<string | undefined>(undefined);

    useEffect(() => {
        setToken(USER_TOKEN_CL());
    }, []);

    const [open, setOpen] = useState(false);
    const { fetchCart, cart, removeFromCart, loading, itemIdRemoving } = useCart();

    useEffect(() => {
        fetchCart(t);
    }, []);
    return (
        <Sheet open={open} onOpenChange={setOpen}>
            <SheetTrigger asChild>
                {
                    children ??
                    <Button variant={"secondary"} size={"sm"} className="relative">
                        <span className="absolute -top-2 -end-2 size-4 rounded-full bg-primary-tw-700 text-white text-xs">
                            {cart.length}
                        </span>
                        <ShoppingCartIcon />
                    </Button>
                }
            </SheetTrigger>
            <SheetContent className="bg-white text-black !max-w-[40rem] !w-[30rem] overflow-y-scroll pb-20">
                <SheetHeader className="border-b">
                    <SheetTitle className="text-black">
                        {t("routes.cart")}
                    </SheetTitle>
                    <SheetDescription />
                </SheetHeader>
                {
                    loading ?
                        <div className="p-2 space-y-4">
                            {
                                [...Array(6)].map((_, i) => (
                                    <div key={i} className="grid md:grid-cols-2 gap-4 relative p-2">
                                        <div className="w-full h-32 bg-border animate-pulse rounded-md" />
                                        <div>
                                            <div className="w-44 h-8 bg-border animate-pulse my-2 rounded-md" />
                                            <div className="w-20 h-6 bg-border animate-pulse my-2 rounded-md" />
                                        </div>
                                    </div>
                                ))
                            }
                        </div>
                        :
                        <div className="p-4">
                            {
                                cart?.length > 0 ?
                                    cart?.map((item, index) => {
                                        let itemLink = '';
                                        if (item?.item_type === 'package') {
                                            const pkgName = item?.package_name || item?.display_name;
                                            const pkgSlug = pkgName ? encodeURIComponent(pkgName.trim().toLowerCase().replace(/\s+/g, '-').replace(/\//g, '-')) : '';
                                            itemLink = `/programs/packages/${item?.package_id}${pkgSlug ? `/${pkgSlug}` : ''}`;
                                        } else {
                                            const progName = item?.group_name || item?.display_name;
                                            const progSlug = progName ? encodeURIComponent(progName.trim().toLowerCase().replace(/\s+/g, '-').replace(/\//g, '-')) : '';
                                            itemLink = `/programs/${item?.group_id}${progSlug ? `/${progSlug}` : ''}`;
                                        }
                                        return (
                                            <div
                                                key={index}
                                                className="flex gap-4 py-4 border-b last:border-b-0"
                                                aria-disabled={loading}
                                            >
                                                <div className="relative size-24 flex-shrink-0 rounded-md overflow-hidden bg-muted">
                                                    {
                                                        (item?.display_image ?? item?.package_image ?? item?.group_image) ?
                                                            <Image
                                                                src={`${URL_IMAGE}/${item.display_image ?? item.package_image ?? item.group_image}`}
                                                                alt={item.display_name ?? 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">
                                                    <Link
                                                        scroll={true}
                                                        href={itemLink}
                                                        onClick={() => setOpen(prev => !prev)}
                                                        className="font-semibold text-lg mb-1 line-clamp-2"
                                                    >
                                                        {item?.display_name ?? item?.package_name ?? item?.group_name}
                                                    </Link>
                                                {
                                                    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">
                                                            {t("programs.free")}
                                                        </p>
                                                }
                                            </div>

                                            <div>
                                                <Button variant={"destructive"} size={"sm"}
                                                    disabled={!!itemIdRemoving}
                                                    onClick={() => removeFromCart(item?.id, t)}
                                                >
                                                    {
                                                        (itemIdRemoving === item?.id)
                                                            ?
                                                            <Loader className="animate-spin" />
                                                            :
                                                            <Trash2 />
                                                    }
                                                </Button>
                                            </div>
                                        </div>
                                        );
                                    })
                                    :
                                    <p className="grid place-items-center min-h-[80dvh]">
                                        {t("custom.no results")}
                                    </p>
                            }
                        </div>
                }
                <SheetFooter className={`fixed bottom-0 bg-white !max-w-[40rem] !w-[29rem] border-t grid gap-2 p-4 ${cart.length > 0 ? 'grid-cols-2' : 'grid-cols-1'}`}>
                    <Button className="bg-primary-tw-700" asChild>
                        <Link scroll={true} href={token ? "/cart" : "/login"} onClick={() => setOpen(prev => !prev)}>
                            {t("routes.cart")}
                        </Link>
                    </Button>
                    {cart.length > 0 && (
                        <Button variant={"secondary"} className="border" asChild>
                            <Link scroll={true} href={token ? "/cart/checkout" : "/login"} onClick={() => setOpen(prev => !prev)}>
                                {t("custom.checkout")}
                            </Link>
                        </Button>
                    )}
                </SheetFooter>
            </SheetContent>
        </Sheet>
    )
}