import { useCallback, useEffect, useState } from "react"
import { medusaClient } from "../lib/medusa-client"
import { formatAmount } from "../lib/format"
import { getStoredCartId, clearStoredCartId } from "../lib/storefront"

export default function CartPage() {
  const [cart, setCart] = useState(null)
  const [status, setStatus] = useState("")
  const [isLoading, setIsLoading] = useState(true)

  const loadCart = useCallback(async () => {
    const storedCartId = getStoredCartId()
    if (!storedCartId) {
      setCart(null)
      setIsLoading(false)
      return
    }

    try {
      const { cart: fetchedCart } = await medusaClient.carts.retrieve(storedCartId)
      setCart(fetchedCart)
    } catch (error) {
      clearStoredCartId()
      setCart(null)
    } finally {
      setIsLoading(false)
    }
  }, [])

  useEffect(() => {
    loadCart()
  }, [loadCart])

  const handleRemove = async (lineItemId) => {
    if (!cart) {
      return
    }
    setStatus("")
    try {
      await medusaClient.carts.lineItems.delete(cart.id, lineItemId)
      await loadCart()
    } catch (error) {
      setStatus("Impossible de retirer l'article.")
    }
  }

  if (isLoading) {
    return <p>Chargement du panier...</p>
  }

  if (!cart || !cart.items?.length) {
    return <p>Votre panier est vide.</p>
  }

  return (
    <div style={{ maxWidth: "720px", margin: "0 auto" }}>
      <h1>Panier</h1>
      {status && <p>{status}</p>}
      <div style={{ display: "grid", gap: "1rem", marginTop: "1rem" }}>
        {cart.items.map((item) => (
          <div
            key={item.id}
            style={{
              border: "1px solid #ccc",
              borderRadius: "8px",
              padding: "1rem",
              display: "flex",
              justifyContent: "space-between",
              gap: "1rem",
            }}
          >
            <div>
              <strong>{item.title}</strong>
              <p>Quantité : {item.quantity}</p>
              <p>
                {formatAmount(item.unit_price, cart.region?.currency_code || "eur")}
              </p>
            </div>
            <button
              type="button"
              onClick={() => handleRemove(item.id)}
              style={{
                border: "1px solid #ccc",
                background: "#fff",
                borderRadius: "6px",
                padding: "0.4rem 0.8rem",
                cursor: "pointer",
                height: "fit-content",
              }}
            >
              Retirer
            </button>
          </div>
        ))}
      </div>
      <p style={{ marginTop: "1.5rem", fontWeight: 600 }}>
        Total : {formatAmount(cart.total, cart.region?.currency_code || "eur")}
      </p>
    </div>
  )
}