import { useState } from "react"
import { useProducts } from "medusa-react"
import { medusaClient } from "../lib/medusa-client"
import { ensureCart } from "../lib/storefront"
import { formatAmount } from "../lib/format"

export default function Home() {
  const { products, isLoading } = useProducts()
  const [status, setStatus] = useState("")
  const [addingId, setAddingId] = useState(null)

  const handleAddToCart = async (product) => {
    const variantId = product?.variants?.[0]?.id
    if (!variantId) {
      setStatus("Aucune variante disponible pour ce produit.")
      return
    }

    setAddingId(product.id)
    setStatus("")

    try {
      const cart = await ensureCart(medusaClient)
      await medusaClient.carts.lineItems.create(cart.id, {
        variant_id: variantId,
        quantity: 1,
      })
      setStatus(`${product.title} a été ajouté au panier.`)
    } catch (error) {
      setStatus("Impossible d'ajouter au panier pour le moment.")
    } finally {
      setAddingId(null)
    }
  }

  return (
    <div>
      <h1>Bienvenue sur la boutique Lucien-sens-bon</h1>
      {isLoading && <span>Chargement des produits...</span>}
      {status && <p style={{ marginTop: "1rem" }}>{status}</p>}
      
      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(200px, 1fr))", gap: "1rem" }}>
        {products && products.map((product) => (
          <div key={product.id} style={{ border: "1px solid #ccc", padding: "1rem", borderRadius: "8px" }}>
            <h3>{product.title}</h3>
            <p>{product.description}</p>
            <p style={{ fontWeight: 600 }}>
              {formatAmount(
                product?.variants?.[0]?.prices?.[0]?.amount,
                product?.variants?.[0]?.prices?.[0]?.currency_code || "eur"
              )}
            </p>
            <button
              type="button"
              onClick={() => handleAddToCart(product)}
              disabled={addingId === product.id}
              style={{
                border: "1px solid #ccc",
                background: "#fff",
                borderRadius: "6px",
                padding: "0.4rem 0.8rem",
                cursor: "pointer",
              }}
            >
              {addingId === product.id ? "Ajout..." : "Ajouter au panier"}
            </button>
          </div>
        ))}
      </div>
      
      {!isLoading && !products?.length && (
        <p>Aucun produit trouvé. Connectez-vous à l'admin pour en ajouter !</p>
      )}
    </div>
  )
}