"use client";

import { useState } from "react";
import { useTranslations } from "next-intl";
import { useRouter } from "next/navigation";
import { Card } from "@/components/ui/card";

type FormState = "idle" | "submitting" | "success" | "error";
type AccountType = "personal" | "company";

/**
 * Registration entry — Bug 1 redesign.
 *
 * Previously a hidden checkbox ("Register as an individual") sat on top
 * of the company-flavoured form, which buried personal accounts under a
 * single click that most users miss. The new layout puts a primary
 * account-type chooser at the top: two large cards, one for Personal,
 * one for Company. Selection is required before the form below
 * appears, so the rest of the layout adapts cleanly without a
 * collapsing-checkbox feel.
 *
 * Bug 12: per-field validation runs on submit. The native HTML required
 * attribute already blocks empty submits at the browser level; the
 * server-side Zod schema in `/api/register` is the authoritative
 * second line of defence.
 *
 * Behaviour:
 *   - "Personal account": company-name field is hidden; on submit, the
 *     server generates an opaque `personal-{8hex}` org name (Bug 9).
 *   - "Company account": company-name field is required; the server
 *     additionally runs the duplicate-domain check.
 *   - Returning users (those who arrive here by accident) can switch
 *     types after picking — the choice cards stay clickable above the
 *     form. Field state is preserved across switches so they don't
 *     have to re-type their name.
 */
export default function RegisterPage() {
  const t = useTranslations("register");
  const tCommon = useTranslations("common");
  const router = useRouter();

  const [accountType, setAccountType] = useState<AccountType | null>(null);

  const [form, setForm] = useState({
    companyName: "",
    givenName: "",
    familyName: "",
    email: "",
  });
  const [state, setState] = useState<FormState>("idle");
  const [error, setError] = useState("");

  const isPersonal = accountType === "personal";

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setForm((prev) => ({ ...prev, [e.target.name]: e.target.value }));
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!accountType) return; // Should be impossible — submit button is gated
    setError("");
    setState("submitting");

    try {
      // Build the request body explicitly. For personals we omit
      // companyName so the server generates an opaque ZITADEL org name
      // (`personal-{8hex}`); the Zod schema accepts the omission.
      const body: Record<string, unknown> = {
        givenName: form.givenName,
        familyName: form.familyName,
        email: form.email,
        isPersonal,
      };
      if (!isPersonal) {
        body.companyName = form.companyName;
      }

      const res = await fetch("/api/register", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(body),
      });

      if (!res.ok) {
        const data = await res.json();
        if (data.code === "duplicate_domain" && data.domain) {
          throw new Error(t("duplicateDomain", { domain: data.domain }));
        }
        throw new Error(data.error || "Registration failed");
      }

      setState("success");
    } catch (err: any) {
      setError(err.message);
      setState("error");
    }
  };

  if (state === "success") {
    return (
      <div className="min-h-screen flex items-center justify-center p-4">
        <Card className="max-w-md w-full text-center p-8">
          <div className="h-14 w-14 rounded-xl bg-emerald-500/15 flex items-center justify-center mx-auto mb-4">
            <svg
              className="h-7 w-7 text-emerald-400"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
              strokeWidth={2}
            >
              <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
            </svg>
          </div>
          <h2 className="font-display text-lg font-semibold text-text-primary mb-2">
            {t("successTitle")}
          </h2>
          <p className="text-sm text-text-secondary mb-6">
            {t("successDescription")}
          </p>
          <button
            onClick={() => router.push("/login")}
            className="w-full py-2.5 px-4 bg-accent text-white text-sm font-medium rounded-lg hover:bg-accent-dim transition-colors"
          >
            {t("goToLogin")}
          </button>
        </Card>
      </div>
    );
  }

  return (
    <div className="min-h-screen flex items-center justify-center p-4">
      <div className="max-w-md w-full">
        <div className="text-center mb-8 animate-in">
          <h1 className="font-display text-2xl font-semibold text-text-primary mb-1">
            {t("title")}
          </h1>
          <p className="text-sm text-text-secondary">{t("subtitle")}</p>
        </div>

        {/* Account type chooser — required first step */}
        <div
          role="radiogroup"
          aria-label={t("accountTypeLabel")}
          className="grid grid-cols-2 gap-3 mb-6 animate-in animate-in-delay-1"
        >
          <AccountTypeCard
            selected={accountType === "personal"}
            onClick={() => setAccountType("personal")}
            label={t("personalCardTitle")}
            description={t("personalCardDescription")}
            icon={
              <svg
                className="h-5 w-5"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
                strokeWidth={1.5}
                aria-hidden="true"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
                />
              </svg>
            }
          />
          <AccountTypeCard
            selected={accountType === "company"}
            onClick={() => setAccountType("company")}
            label={t("companyCardTitle")}
            description={t("companyCardDescription")}
            icon={
              <svg
                className="h-5 w-5"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
                strokeWidth={1.5}
                aria-hidden="true"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  d="M3 21V7l9-4 9 4v14M9 21V11h6v10M5 21h14"
                />
              </svg>
            }
          />
        </div>

        {/* Form — only shown after a choice is made. Animation
            delay-2 lines up with the cards animating in first, so
            the form feels like it appears in response to selection. */}
        {accountType && (
          <Card className="animate-in animate-in-delay-2">
            <form onSubmit={handleSubmit} className="space-y-4" noValidate>
              {/* Company name — only for company accounts (Bug 2 mirror) */}
              {!isPersonal && (
                <div>
                  <label className="block text-xs font-semibold uppercase tracking-wider text-text-muted mb-1.5">
                    {t("companyName")}
                  </label>
                  <input
                    name="companyName"
                    type="text"
                    required
                    value={form.companyName}
                    onChange={handleChange}
                    placeholder={t("companyNamePlaceholder")}
                    className="w-full px-3 py-2 bg-surface-2 border border-border rounded-lg text-sm text-text-primary placeholder:text-text-muted focus:outline-none focus:ring-1 focus:ring-accent focus:border-accent transition-colors"
                  />
                </div>
              )}

              {/* Name row */}
              <div className="grid grid-cols-2 gap-3">
                <div>
                  <label className="block text-xs font-semibold uppercase tracking-wider text-text-muted mb-1.5">
                    {t("givenName")}
                  </label>
                  <input
                    name="givenName"
                    type="text"
                    required
                    value={form.givenName}
                    onChange={handleChange}
                    className="w-full px-3 py-2 bg-surface-2 border border-border rounded-lg text-sm text-text-primary placeholder:text-text-muted focus:outline-none focus:ring-1 focus:ring-accent focus:border-accent transition-colors"
                  />
                </div>
                <div>
                  <label className="block text-xs font-semibold uppercase tracking-wider text-text-muted mb-1.5">
                    {t("familyName")}
                  </label>
                  <input
                    name="familyName"
                    type="text"
                    required
                    value={form.familyName}
                    onChange={handleChange}
                    className="w-full px-3 py-2 bg-surface-2 border border-border rounded-lg text-sm text-text-primary placeholder:text-text-muted focus:outline-none focus:ring-1 focus:ring-accent focus:border-accent transition-colors"
                  />
                </div>
              </div>

              {/* Email */}
              <div>
                <label className="block text-xs font-semibold uppercase tracking-wider text-text-muted mb-1.5">
                  {t("email")}
                </label>
                <input
                  name="email"
                  type="email"
                  required
                  value={form.email}
                  onChange={handleChange}
                  placeholder={isPersonal ? "you@example.ch" : "you@company.ch"}
                  className="w-full px-3 py-2 bg-surface-2 border border-border rounded-lg text-sm text-text-primary placeholder:text-text-muted focus:outline-none focus:ring-1 focus:ring-accent focus:border-accent transition-colors"
                />
              </div>

              {error && (
                <div className="text-xs text-red-400 bg-red-400/10 border border-red-400/20 rounded-lg px-3 py-2">
                  {error}
                </div>
              )}

              <button
                type="submit"
                disabled={state === "submitting"}
                className="w-full py-2.5 px-4 bg-accent text-white text-sm font-medium rounded-lg hover:bg-accent-dim transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
              >
                {state === "submitting" ? tCommon("loading") : t("submit")}
              </button>
            </form>

            <p className="text-xs text-text-muted text-center mt-4">
              {t("hasAccount")}{" "}
              <a
                href="/login"
                className="text-accent hover:text-accent-dim transition-colors"
              >
                {tCommon("login")}
              </a>
            </p>
          </Card>
        )}

        <p className="text-xs text-text-muted text-center mt-6 animate-in animate-in-delay-3">
          {t("footer")}
        </p>
      </div>
    </div>
  );
}

/**
 * Account-type radio card. Visually a card, semantically a radio: arrow
 * keys move between cards, Space/Enter selects.
 *
 * Selected state is rendered with the accent ring + tinted background;
 * unselected is the standard surface-2 with hover affordance. The icon
 * and text colours intensify when selected to give a clear "this one
 * is on" signal beyond just the border colour.
 */
function AccountTypeCard({
  selected,
  onClick,
  label,
  description,
  icon,
}: {
  selected: boolean;
  onClick: () => void;
  label: string;
  description: string;
  icon: React.ReactNode;
}) {
  return (
    <button
      type="button"
      role="radio"
      aria-checked={selected}
      onClick={onClick}
      className={`text-left rounded-xl border p-4 transition-colors cursor-pointer focus:outline-none focus:ring-2 focus:ring-accent/40 ${
        selected
          ? "border-accent bg-accent/10"
          : "border-border bg-surface-2 hover:border-accent/40 hover:bg-surface-3/30"
      }`}
    >
      <div
        className={`mb-2 ${
          selected ? "text-accent" : "text-text-muted"
        }`}
      >
        {icon}
      </div>
      <div
        className={`text-sm font-semibold mb-0.5 ${
          selected ? "text-text-primary" : "text-text-primary"
        }`}
      >
        {label}
      </div>
      <div className="text-xs text-text-muted leading-snug">{description}</div>
    </button>
  );
}