// app/auth/sign-up/sign-up.tsx
"use client";

import { useState, useCallback } from "react";
import { useRouter } from "next/navigation";

type Props = { nextPath?: string };

export default function SignUp({ nextPath = "/portal" }: Props) {
    const router = useRouter();
    const [username, setUsername] = useState("");
    const [email, setEmail] = useState(""); // optional if your backend allows
    const [password, setPassword] = useState("");
    const [showPassword, setShowPassword] = useState(false);
    const [loading, setLoading] = useState(false);
    const [err, setErr] = useState<string | null>(null);

    const onSubmit = useCallback(async (e: React.FormEvent<HTMLFormElement>) => {
        e.preventDefault();
        setErr(null);
        setLoading(true);

        try {
            const res = await fetch("/api/auth/register", {
                method: "POST",
                credentials: "include",
                headers: { "Content-Type": "application/json", Accept: "application/json" },
                body: JSON.stringify({ username, email: email || undefined, password }),
            });

            const txt = await res.text();
            let j: any = null;
            try { j = txt ? JSON.parse(txt) : null; } catch {}

            if (!res.ok) {
                const message = j?.error || j?.message || `Sign-up failed (${res.status})`;
                throw new Error(message);
            }

            router.replace(nextPath); // ALWAYS /portal
            router.refresh();
        } catch (e: any) {
            setErr(e?.message || "Unable to sign up.");
        } finally {
            setLoading(false);
        }
    }, [username, email, password, nextPath, router]);

    return (
        <div className="mx-auto max-w-md rounded-lg border p-6">
        <h1 className="mb-1 text-2xl font-semibold">Create Account</h1>
        <p className="mb-6 text-sm opacity-70">Join MakerDash to manage rigs, settings, and projects.</p>

        <form className="space-y-4" onSubmit={onSubmit}>
        <div className="space-y-1">
        <label className="text-sm font-medium">Username</label>
        <input
        type="text"
        autoComplete="username"
        className="w-full rounded-md border px-3 py-2"
        placeholder="your-handle"
        value={username}
        onChange={(e) => setUsername(e.currentTarget.value)}
        required
        />
        </div>

        <div className="space-y-1">
        <label className="text-sm font-medium">Email <span className="opacity-60">(optional)</span></label>
        <input
        type="email"
        autoComplete="email"
        className="w-full rounded-md border px-3 py-2"
        placeholder="you@example.com"
        value={email}
        onChange={(e) => setEmail(e.currentTarget.value)}
        />
        </div>

        <div className="space-y-1">
        <div className="flex items-center justify-between">
        <label className="text-sm font-medium">Password</label>
        <button
        type="button"
        className="text-xs opacity-70 hover:opacity-100"
        onClick={() => setShowPassword((s) => !s)}
        >
        {showPassword ? "Hide" : "Show"}
        </button>
        </div>
        <input
        type={showPassword ? "text" : "password"}
        autoComplete="new-password"
        className="w-full rounded-md border px-3 py-2"
        placeholder="Choose a strong password"
        value={password}
        onChange={(e) => setPassword(e.currentTarget.value)}
        required
        minLength={8}
        />
        </div>

        {err && (
            <div className="rounded-md border border-red-300 bg-red-50 px-3 py-2 text-sm text-red-700">
            {err}
            </div>
        )}

        <button
        type="submit"
        disabled={loading}
        className="w-full rounded-md bg-black px-3 py-2 text-white disabled:opacity-60"
        >
        {loading ? "Creating account…" : "Sign Up"}
        </button>
        </form>

        <div className="mt-4 text-center text-sm">
        <span className="opacity-70">Already have an account?</span>{" "}
        <a className="underline" href={"/auth/sign-in"}>Sign in</a>
        </div>
        </div>
    );
}