"use client";
import { useState } from "react";
import { useRouter } from "next/navigation";
import Link from "next/link";

export default function RegisterPage() {
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [error, setError] = useState("");
  const [loading, setLoading] = useState(false);
  const router = useRouter();

  async function onSubmit(e) {
    e.preventDefault();
    setError(""); setLoading(true);
    try {
      const r = await fetch("/api/register", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ name, email, password }),
      });
      const data = await r.json();
      if (!r.ok) { setError(data.error || "Error al registrarse"); return; }
      router.push("/");
      router.refresh();
    } catch { setError("Error de conexión"); }
    finally { setLoading(false); }
  }

  return (
    <div className="auth">
      <div className="auth-card">
        <h1>Crear cuenta</h1>
        <p className="auth-sub">Unite a Nova Store en segundos.</p>
        <form onSubmit={onSubmit} className="auth-form">
          <label>Nombre
            <input type="text" value={name} onChange={(e) => setName(e.target.value)} placeholder="Tu nombre" required />
          </label>
          <label>Email
            <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="tu@email.com" required />
          </label>
          <label>Contraseña
            <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} placeholder="Mínimo 6 caracteres" required />
          </label>
          {error && <p className="auth-error">{error}</p>}
          <button className="btn btn-primary" disabled={loading}>{loading ? "Creando…" : "Crear cuenta"}</button>
        </form>
        <p className="auth-alt">¿Ya tenés cuenta? <Link href="/login">Iniciá sesión</Link></p>
      </div>
    </div>
  );
}