"use client";

import { useEffect, useState } from "react";
import { ShoppingBag } from "lucide-react";
import { Button } from "@/components/ui/button";
import type { Product } from "@/lib/headless/types";
import { useCartStore } from "@/store/cart-store";

// Antes esta barra quedaba fija desde el primer render en mobile,
// tapando permanentemente parte de la imagen del producto solo para
// duplicar un boton que ya está visible más abajo. Ahora se muestra
// recien cuando el boton real (#product-buy-button en ProductPurchase,
// visible tambien en mobile) sale del viewport -- mismo patron que el
// "Buy Now" sticky de Amazon, que solo aparece al scrollear mas alla
// del boton real.
export function MobileAddToCart({ product }: { product: Product }) {
  const addItem = useCartStore((state) => state.addItem);
  const [visible, setVisible] = useState(false);
  const outOfStock = product.variants[0]?.available === false;

  useEffect(() => {
    const target = document.getElementById("product-buy-button");
    if (!target) return;
    const observer = new IntersectionObserver((entries) => {
      const entry = entries[0];
      if (entry) setVisible(!entry.isIntersecting);
    }, { threshold: 0 });
    observer.observe(target);
    return () => observer.disconnect();
  }, []);

  return (
    <div
      aria-hidden={!visible}
      className={`fixed inset-x-0 bottom-0 z-40 border-t border-slate-200 bg-white/95 p-3 shadow-2xl backdrop-blur transition-transform duration-200 lg:hidden ${
        visible ? "translate-y-0" : "pointer-events-none translate-y-full"
      }`}
    >
      <Button
        variant="primary"
        size="lg"
        className="w-full"
        disabled={outOfStock}
        onClick={() => addItem(product, product.variants[0]?.id)}
      >
        <ShoppingBag />
        {outOfStock ? "Agotado" : "Añadir al carrito"}
      </Button>
    </div>
  );
}