"use client";

import { useState } from "react";
import type { StoreProduct } from "@/lib/api";
import { resolveMediaUrl } from "@/lib/api";
import { useCart } from "@/context/CartContext";
import { Button } from "@/components/ui/Button";

export default function StoreProductCard({ product }: { product: StoreProduct }) {
  const { addItem } = useCart();
  const [status, setStatus] = useState<"idle" | "adding" | "added" | "error">("idle");
  const variant = product.variants[0];

  async function handleAddToCart() {
    if (!variant) return;
    setStatus("adding");
    try {
      await addItem(variant.id, 1);
      setStatus("added");
      setTimeout(() => setStatus("idle"), 1500);
    } catch {
      setStatus("error");
    }
  }

  const outOfStock = !variant || variant.stockQty <= 0;

  return (
    <div className="rounded-xl2 border border-neutral-200 bg-white overflow-hidden flex flex-col">
      <div
        className="h-48 bg-neutral-200 bg-cover bg-center"
        style={{ backgroundImage: product.images[0] ? `url(${resolveMediaUrl(product.images[0])})` : undefined }}
      />
      <div className="p-6 flex flex-col gap-3 flex-1">
        <h3 className="font-display text-lg text-neutral-900">{product.name}</h3>
        <p className="text-sm text-neutral-600 flex-1">{product.description}</p>
        <p className="text-lg font-semibold text-neutral-900">
          ${product.basePrice.toFixed(2)}
        </p>
        <Button onClick={handleAddToCart} disabled={outOfStock || status === "adding"} className="mt-2">
          {outOfStock ? "Out of Stock" : status === "adding" ? "Adding…" : status === "added" ? "Added ✓" : "Add to Cart"}
        </Button>
        {status === "error" ? <p className="text-xs text-red-600">Couldn&apos;t add to cart — please try again.</p> : null}
      </div>
    </div>
  );
}