"use client";

import Link from "next/link";
import { useRouter } from "next/navigation";
import * as React from "react";
import { Button, Card, CardHint, CardTitle, ErrorState, Field } from "@agy/ui";
import { ApiError } from "@/lib/api";
import { useSession } from "@/lib/session";

/**
 * Where to land after signing up. Only same-origin paths are honoured, so a
 * crafted `?next=https://evil.example` cannot turn the form into an open
 * redirect.
 */
function nextDestination(fallback: string): string {
  if (typeof window === "undefined") return fallback;
  const next = new URLSearchParams(window.location.search).get("next");
  return next && next.startsWith("/") && !next.startsWith("//") ? next : fallback;
}

export default function SignupPage() {
  const router = useRouter();
  const { signup } = useSession();
  const [name, setName] = React.useState("");
  const [email, setEmail] = React.useState("");
  const [password, setPassword] = React.useState("");
  const [error, setError] = React.useState<string | null>(null);
  const [submitting, setSubmitting] = React.useState(false);
  // Read once on mount so the "already registered?" link carries the invite token.
  const [nextPath, setNextPath] = React.useState<string | null>(null);

  React.useEffect(() => {
    const next = new URLSearchParams(window.location.search).get("next");
    setNextPath(next && next.startsWith("/") && !next.startsWith("//") ? next : null);
  }, []);

  const onSubmit = async (event: React.FormEvent) => {
    event.preventDefault();
    setError(null);
    setSubmitting(true);
    try {
      await signup(email, password, name);
      router.replace(nextDestination("/onboarding"));
    } catch (err) {
      setError(err instanceof ApiError ? err.message : "ثبت‌نام ناموفق بود.");
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <div className="flex min-h-screen items-center justify-center p-5">
      <Card className="anim-rise w-full max-w-sm">
        <CardTitle>ساخت حساب</CardTitle>
        <CardHint>پس از ثبت‌نام، اولین سازمان خود را می‌سازید.</CardHint>

        <form onSubmit={onSubmit} className="mt-5 flex flex-col gap-4">
          <Field
            label="نام"
            value={name}
            onChange={(e) => setName(e.target.value)}
            placeholder="نام شما"
          />
          <Field
            label="ایمیل"
            type="email"
            dir="ltr"
            autoComplete="email"
            required
            value={email}
            onChange={(e) => setEmail(e.target.value)}
          />
          <Field
            label="رمز عبور"
            type="password"
            dir="ltr"
            autoComplete="new-password"
            required
            minLength={8}
            hint="حداقل ۸ کاراکتر."
            value={password}
            onChange={(e) => setPassword(e.target.value)}
          />

          {error && <ErrorState title="ثبت‌نام ناموفق" message={error} />}

          <Button type="submit" loading={submitting}>
            ثبت‌نام
          </Button>
        </form>

        <p className="mt-4 text-xs text-slate-400">
          قبلاً ثبت‌نام کرده‌اید؟{" "}
          <Link
            href={nextPath ? `/login?next=${encodeURIComponent(nextPath)}` : "/login"}
            className="text-accent hover:underline"
          >
            ورود
          </Link>
        </p>
      </Card>
    </div>
  );
}