import { useEffect, useState } from "react"
import { useRouter } from "next/router"
import { medusaClient } from "../lib/medusa-client"
import { getStoredCartId, clearStoredCartId } from "../lib/storefront"

const initialForm = {
  email: "",
  first_name: "",
  last_name: "",
  address_1: "",
  postal_code: "",
  city: "",
  country_code: "fr",
}

export default function CheckoutPage() {
  const router = useRouter()
  const [form, setForm] = useState(initialForm)
  const [status, setStatus] = useState("")
  const [isLoading, setIsLoading] = useState(false)
  const [cartId, setCartId] = useState(null)

  useEffect(() => {
    const storedCartId = getStoredCartId()
    setCartId(storedCartId)
  }, [])

  const handleChange = (event) => {
    const { name, value } = event.target
    setForm((prev) => ({ ...prev, [name]: value }))
  }

  const handleSubmit = async (event) => {
    event.preventDefault()
    setStatus("")
    setIsLoading(true)

    if (!cartId) {
      setStatus("Votre panier est vide.")
      setIsLoading(false)
      return
    }

    try {
      await medusaClient.carts.update(cartId, {
        email: form.email,
        shipping_address: {
          first_name: form.first_name,
          last_name: form.last_name,
          address_1: form.address_1,
          postal_code: form.postal_code,
          city: form.city,
          country_code: form.country_code,
        },
      })

      const { shipping_options: shippingOptions } =
        await medusaClient.shippingOptions.listCartOptions(cartId)

      if (!shippingOptions?.length) {
        throw new Error("Aucune option de livraison disponible.")
      }

      await medusaClient.carts.addShippingMethod(cartId, {
        option_id: shippingOptions[0].id,
      })

      const { cart: cartWithPayments } = await medusaClient.carts.createPaymentSessions(
        cartId
      )

      const manualSession = cartWithPayments?.payment_sessions?.find(
        (session) => session.provider_id === "manual"
      )
      const providerId =
        manualSession?.provider_id ||
        cartWithPayments?.payment_sessions?.[0]?.provider_id

      if (!providerId) {
        throw new Error("Aucun moyen de paiement disponible.")
      }

      await medusaClient.carts.setPaymentSession(cartId, { provider_id: providerId })

      const { type, data } = await medusaClient.carts.complete(cartId)
      if (type === "order" && data?.id) {
        clearStoredCartId()
        router.push(`/order-confirmation?order_id=${data.id}`)
        return
      }

      setStatus("Commande validée, mais sans numéro de commande.")
    } catch (error) {
      setStatus("Impossible de finaliser la commande.")
    } finally {
      setIsLoading(false)
    }
  }

  return (
    <div style={{ maxWidth: "520px", margin: "0 auto" }}>
      <h1>Finaliser la commande</h1>
      <form onSubmit={handleSubmit} style={{ display: "grid", gap: "1rem" }}>
        <label>
          Email
          <input
            name="email"
            type="email"
            value={form.email}
            onChange={handleChange}
            required
            style={{ width: "100%", padding: "0.5rem", marginTop: "0.5rem" }}
          />
        </label>
        <label>
          Prénom
          <input
            name="first_name"
            value={form.first_name}
            onChange={handleChange}
            required
            style={{ width: "100%", padding: "0.5rem", marginTop: "0.5rem" }}
          />
        </label>
        <label>
          Nom
          <input
            name="last_name"
            value={form.last_name}
            onChange={handleChange}
            required
            style={{ width: "100%", padding: "0.5rem", marginTop: "0.5rem" }}
          />
        </label>
        <label>
          Adresse
          <input
            name="address_1"
            value={form.address_1}
            onChange={handleChange}
            required
            style={{ width: "100%", padding: "0.5rem", marginTop: "0.5rem" }}
          />
        </label>
        <label>
          Code postal
          <input
            name="postal_code"
            value={form.postal_code}
            onChange={handleChange}
            required
            style={{ width: "100%", padding: "0.5rem", marginTop: "0.5rem" }}
          />
        </label>
        <label>
          Ville
          <input
            name="city"
            value={form.city}
            onChange={handleChange}
            required
            style={{ width: "100%", padding: "0.5rem", marginTop: "0.5rem" }}
          />
        </label>
        <label>
          Pays
          <input
            name="country_code"
            value={form.country_code}
            onChange={handleChange}
            required
            style={{ width: "100%", padding: "0.5rem", marginTop: "0.5rem" }}
          />
        </label>
        <button
          type="submit"
          disabled={isLoading}
          style={{
            border: "1px solid #ccc",
            background: "#fff",
            borderRadius: "6px",
            padding: "0.6rem",
            cursor: "pointer",
          }}
        >
          {isLoading ? "Validation..." : "Passer la commande"}
        </button>
        {status && <p>{status}</p>}
      </form>
    </div>
  )
}