"use client";

import Image from "next/image";

import Button from "@/components/ui/Button";
import ProductCard, { type ProductCardProps } from "@/components/ui/ProductCard";

interface CartProduct {
  imageSrc?: string;
  imageAlt?: string;
  name?: string;
  size?: string;
  color?: string;
  price?: string;
  oldPrice?: string;
  discountBadge?: string;
  sellerName?: string;
}

interface AddToCartModalProps {
  open: boolean;
  onClose: () => void;
  product?: CartProduct;
  recommendations?: ProductCardProps[];
}

const defaultProduct: Required<CartProduct> = {
  imageSrc: "/images/tote-gallery-1.png",
  imageAlt: "Calla tote bag",
  name: "Calla Tote Bag - Espresso Brown",
  size: "Small - 39.5",
  color: "Espresso Brown",
  price: "LKR 5,000.00",
  oldPrice: "LKR 5,600.00",
  discountBadge: "-40%",
  sellerName: "Cozy",
};

const defaultRecommendations: ProductCardProps[] = [
  {
    imageSrc: "/images/tote-gallery-4.png",
    imageAlt: "Black tote bag",
    discountBadge: "-42%",
    showWishlist: true,
    name: "Calla Tote Bag - Espresso Brown",
    rating: 4.3,
    soldCount: "128 Sold",
    price: "LKR 5,000.00",
    oldPrice: "LKR 5,600.00",
    showAddToCart: true,
  },
  {
    imageSrc: "/images/tote-gallery-3.png",
    imageAlt: "Brown heels",
    showWishlist: true,
    name: "Calla Tote Bag - Espresso Brown",
    rating: 4.9,
    soldCount: "128 Sold",
    price: "LKR 5,000.00",
    oldPrice: "LKR 5,600.00",
    showAddToCart: true,
  },
];

export default function AddToCartModal({
  open,
  onClose,
  product,
  recommendations = defaultRecommendations,
}: AddToCartModalProps) {
  if (!open) {
    return null;
  }

  const productDetails = { ...defaultProduct, ...product };

  return (
    <div className="fixed inset-0 z-[10000] flex items-center justify-center bg-black/35 px-4 py-6">
      <div className="relative max-h-[92vh] w-full max-w-[430px] overflow-y-auto rounded-lg bg-white p-6 shadow-2xl">
        <button
          type="button"
          onClick={onClose}
          className="absolute right-5 top-5 text-gray-400 transition-colors hover:text-gray-700"
          aria-label="Close cart modal"
        >
          <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.8}>
            <path strokeLinecap="round" strokeLinejoin="round" d="M6 18 18 6M6 6l12 12" />
          </svg>
        </button>

        <h2 className="text-center text-base font-semibold text-[#1f2440]">
          Successfully added to cart!
        </h2>

        <div className="mt-6 flex gap-5">
          <div className="relative h-32 w-28 shrink-0 overflow-hidden rounded bg-gray-100">
            <Image
              src={productDetails.imageSrc}
              alt={productDetails.imageAlt || productDetails.name}
              fill
              sizes="112px"
              className="object-cover"
            />
          </div>

          <div className="min-w-0 flex-1 space-y-2">
            <h3 className="text-sm font-semibold text-gray-900">{productDetails.name}</h3>
            <p className="text-xs text-gray-500">
              Size: {productDetails.size} · Color: {productDetails.color}
            </p>
            <div className="flex flex-wrap items-center gap-2">
              <span className="text-lg font-semibold text-gray-900">{productDetails.price}</span>
              <span className="text-sm text-red-500 line-through">{productDetails.oldPrice}</span>
            </div>
            <span className="inline-flex rounded bg-red-500 px-2 py-1 text-[10px] font-semibold text-white">
              {productDetails.discountBadge}
            </span>

            <div className="mt-3 flex items-center gap-3 rounded-md bg-gray-50 px-3 py-2">
              <span className="flex h-7 w-7 items-center justify-center rounded-full bg-[#b76222] text-[10px] font-semibold text-white">
                coz
              </span>
              <span className="text-xs font-medium text-gray-700">{productDetails.sellerName}</span>
            </div>
          </div>
        </div>

        <div className="mt-7 grid grid-cols-2 gap-3">
          <Button variant="ghost" className="h-11 rounded-full bg-gray-100 text-xs font-semibold text-gray-700 hover:bg-gray-200">
            Shop More
          </Button>
          <Button variant="teal" className="h-11 rounded-full text-xs font-semibold">
            View cart & checkout
          </Button>
        </div>

        {recommendations.length > 0 && (
          <div className="mt-8">
            <p className="mb-4 text-center text-xs text-gray-700">You may also like this.</p>
            <div className="grid grid-cols-2 gap-4">
              {recommendations.map((item, index) => (
                <ProductCard
                  key={`${item.name ?? "recommendation"}-${index}`}
                  {...item}
                  size="compact"
                  className="shadow-[0_8px_24px_rgba(15,23,42,0.08)]"
                />
              ))}
            </div>
          </div>
        )}
      </div>
    </div>
  );
}
