"use client";

import { useState } from "react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { AuthCard, FieldLabel, ErrorNote, inputClass, buttonClass } from "@/components/AuthCard";
import { apiPost } from "@/lib/client-api";

export default function RegisterPage() {
  const router = useRouter();
  const [form, setForm] = useState({
    name: "",
    email: "",
    password: "",
    companyName: "",
    businessType: "",
  });
  const [error, setError] = useState<string | null>(null);
  const [busy, setBusy] = useState(false);

  function set<K extends keyof typeof form>(key: K, value: string) {
    setForm((f) => ({ ...f, [key]: value }));
  }

  async function submit(e: React.FormEvent) {
    e.preventDefault();
    setBusy(true);
    setError(null);
    const result = await apiPost("/api/auth/register", {
      ...form,
      businessType: form.businessType || undefined,
      timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone || "Europe/London",
    });
    setBusy(false);
    if (result.ok) {
      router.push("/dashboard");
      router.refresh();
    } else {
      setError(result.error);
    }
  }

  return (
    <AuthCard
      title="Create your account"
      footer={
        <>
          Already registered?{" "}
          <Link href="/login" className="font-medium text-slate-900 underline">
            Log in
          </Link>
        </>
      }
    >
      <form onSubmit={submit} className="space-y-4">
        <div>
          <FieldLabel htmlFor="name">Your name</FieldLabel>
          <input id="name" required autoComplete="name" className={inputClass}
            value={form.name} onChange={(e) => set("name", e.target.value)} />
        </div>
        <div>
          <FieldLabel htmlFor="companyName">Company name</FieldLabel>
          <input id="companyName" required autoComplete="organization" className={inputClass}
            value={form.companyName} onChange={(e) => set("companyName", e.target.value)} />
        </div>
        <div>
          <FieldLabel htmlFor="businessType">Business type (optional)</FieldLabel>
          <input id="businessType" placeholder="e.g. Used car dealership" className={inputClass}
            value={form.businessType} onChange={(e) => set("businessType", e.target.value)} />
        </div>
        <div>
          <FieldLabel htmlFor="email">Email</FieldLabel>
          <input id="email" type="email" required autoComplete="email" className={inputClass}
            value={form.email} onChange={(e) => set("email", e.target.value)} />
        </div>
        <div>
          <FieldLabel htmlFor="password">Password</FieldLabel>
          <input id="password" type="password" required autoComplete="new-password" minLength={10}
            className={inputClass}
            value={form.password} onChange={(e) => set("password", e.target.value)} />
          <p className="mt-1 text-xs text-slate-500">
            At least 10 characters, mixing two of: lowercase, uppercase, numbers, symbols.
          </p>
        </div>
        <ErrorNote message={error} />
        <button type="submit" disabled={busy} className={buttonClass}>
          {busy ? "Creating account…" : "Create account"}
        </button>
      </form>
    </AuthCard>
  );
}