import { useState } from "react"
import { useRouter } from "next/router"
import { medusaClient } from "../lib/medusa-client"

export default function RegisterPage() {
  const router = useRouter()
  const [form, setForm] = useState({
    first_name: "",
    last_name: "",
    email: "",
    password: "",
  })
  const [status, setStatus] = useState("")
  const [isLoading, setIsLoading] = useState(false)

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

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

    try {
      await medusaClient.customers.create(form)
      setStatus("Compte créé. Vous pouvez vous connecter.")
      router.push("/login")
    } catch (error) {
      setStatus("Impossible de créer le compte pour le moment.")
    } finally {
      setIsLoading(false)
    }
  }

  return (
    <div style={{ maxWidth: "420px", margin: "0 auto" }}>
      <h1>Créer un compte</h1>
      <form onSubmit={handleSubmit} style={{ display: "grid", gap: "1rem" }}>
        <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>
          Email
          <input
            name="email"
            type="email"
            value={form.email}
            onChange={handleChange}
            required
            style={{ width: "100%", padding: "0.5rem", marginTop: "0.5rem" }}
          />
        </label>
        <label>
          Mot de passe
          <input
            name="password"
            type="password"
            value={form.password}
            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 ? "Création..." : "Créer mon compte"}
        </button>
        {status && <p>{status}</p>}
      </form>
    </div>
  )
}