"use client";

import { FormEvent, useState } from "react";
import { signIn } from "next-auth/react";
import { useRouter } from "next/navigation";

export function RegisterForm({ orgId, token }: { orgId?: string; token?: string }) {
  const router = useRouter();
  const inviteMode = Boolean(orgId && token);
  const [organizationName, setOrganizationName] = useState("");
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [error, setError] = useState("");
  const [success, setSuccess] = useState("");

  async function submit(event: FormEvent) {
    event.preventDefault();
    setError("");
    setSuccess("");
    const response = await fetch("/api/register", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ organizationName, name, email, password, orgId, token })
    });
    const payload = await response.json();
    if (!response.ok) {
      setError(payload.error ?? "Registration failed.");
      return;
    }
    if (inviteMode) {
      await signIn("credentials", { email, password, redirect: false });
      router.push("/admin");
      router.refresh();
      return;
    }
    setSuccess(payload.verification?.previewUrl
      ? `Workspace created. Verify your email using the development preview link: ${payload.verification.previewUrl}`
      : "Workspace created. Check your email to verify your account before signing in.");
    router.refresh();
  }

  return (
    <form className="mt-6 grid gap-3" onSubmit={submit}>
      {!inviteMode ? (
        <label className="admin-label normal-case tracking-normal">Organization name<input className="admin-input normal-case tracking-normal" value={organizationName} onChange={(event) => setOrganizationName(event.target.value)} placeholder="Acme Operations" /></label>
      ) : null}
      <label className="admin-label normal-case tracking-normal">Your name<input className="admin-input normal-case tracking-normal" value={name} onChange={(event) => setName(event.target.value)} placeholder="Jane Admin" /></label>
      <label className="admin-label normal-case tracking-normal">Work email<input className="admin-input normal-case tracking-normal" value={email} onChange={(event) => setEmail(event.target.value)} placeholder="jane@company.com" type="email" /></label>
      <label className="admin-label normal-case tracking-normal">Password<input className="admin-input normal-case tracking-normal" value={password} onChange={(event) => setPassword(event.target.value)} placeholder="At least 8 characters" type="password" /></label>
      <button className="brand-button py-3" type="submit">{inviteMode ? "Join organization" : "Create workspace"}</button>
      {error ? <p className="text-sm text-brand-primary">{error}</p> : null}
      {success ? <p className="rounded-lg bg-emerald-50 px-3 py-2 text-sm font-medium text-emerald-700">{success}</p> : null}
    </form>
  );
}