// app/register/page.tsx
"use client";

import { FormEvent, useState } from "react";
import { useRouter, useSearchParams } from "next/navigation";
import Link from "next/link";
import { useAuth } from "@/context/AuthContext";
import { Button, Field, Input } from "@/components/ui/form";

export default function RegisterPage() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const { register, loading } = useAuth();

  const [email, setEmail] = useState("");
  const [displayName, setDisplayName] = useState("");
  const [password, setPassword] = useState("");
  const [error, setError] = useState<string | null>(null);

  const next = searchParams.get("next") || "/builder";

  async function handleSubmit(e: FormEvent) {
    e.preventDefault();
    setError(null);

    try {
      await register({ email, password, displayName });
      router.push(next);
    } catch (err: any) {
      setError(err.message ?? "Failed to create account");
    }
  }

  return (
      <main className="min-h-screen bg-black text-zinc-50">
        <div className="mx-auto flex max-w-md flex-col px-4 py-10">
          <h1 className="text-2xl font-semibold tracking-tight">
            Join the <span className="text-amber-300">Battl Builder</span> Beta
          </h1>
          <p className="mt-2 text-sm text-zinc-400">
            Create an account so we can save your builds, watch price drops, and
            roll out new features to you first.
          </p>

          <form onSubmit={handleSubmit} className="mt-6 space-y-4">
            {error && (
                <div className="rounded-md border border-red-500/40 bg-red-500/10 px-3 py-2 text-sm text-red-200">
                  {error}
                </div>
            )}

            <Field label="Display Name (optional)" htmlFor="displayName">
              <Input
                  id="displayName"
                  type="text"
                  value={displayName}
                  onChange={(e) => setDisplayName(e.target.value)}
              />
            </Field>

            <Field label="Email" htmlFor="email">
              <Input
                  id="email"
                  type="email"
                  autoComplete="email"
                  required
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
              />
            </Field>

            <Field label="Password" htmlFor="password">
              <Input
                  id="password"
                  type="password"
                  autoComplete="new-password"
                  required
                  value={password}
                  onChange={(e) => setPassword(e.target.value)}
              />
            </Field>

            <Button type="submit" disabled={loading}>
              {loading ? "Creating account…" : "Join Beta"}
            </Button>
          </form>

          <p className="mt-4 text-xs text-zinc-500">
            Already have an account?{" "}
            <Link href="/login" className="text-amber-300 hover:text-amber-200">
              Log in
            </Link>
            .
          </p>
        </div>
      </main>
  );
}