"use client";

import { useState } from "react";

import { browserFetch } from "../lib/api";
import { notifyAuthChanged } from "../lib/authEvents";

export default function RegisterForm({ redirectTo = "/account" }: { redirectTo?: string }) {
  const [error, setError] = useState("");
  const [form, setForm] = useState({ fullName: "", email: "", password: "" });

  async function onSubmit(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault();
    setError("");
    try {
      await browserFetch("/auth/register", {
        method: "POST",
        body: JSON.stringify(form)
      });
      notifyAuthChanged("login");
      window.location.href = redirectTo;
    } catch (submitError) {
      setError(submitError instanceof Error ? submitError.message : "No se pudo crear la cuenta");
    }
  }

  return (
    <form className="stack" onSubmit={onSubmit}>
      <input className="field" placeholder="Nombre completo" value={form.fullName} onChange={(event) => setForm((current) => ({ ...current, fullName: event.target.value }))} required />
      <input className="field" type="email" placeholder="Correo" value={form.email} onChange={(event) => setForm((current) => ({ ...current, email: event.target.value }))} required />
      <input className="field" type="password" placeholder="Contrasena" value={form.password} onChange={(event) => setForm((current) => ({ ...current, password: event.target.value }))} required />
      <button className="button button-primary" type="submit">Crear cuenta</button>
      {error ? <p className="muted">{error}</p> : null}
    </form>
  );
}