"use client"

import Link from "next/link"
import { useRouter, useSearchParams } from "next/navigation"
import { type FormEvent, useMemo, useState } from "react"

import { AdminLocaleSwitcher } from "@/components/admin-locale-switcher"
import { useAdminT } from "@/providers/admin-i18n-provider"

type LoginFormProps = {
  mode: "signin" | "signup-owner" | "signup-user" | "signup-disabled"
}

type AuthResponse = {
  user?: {
    role?: string
  }
  message?: string
}

function persistRoleCookie(role: unknown) {
  if (typeof role !== "string") {
    return
  }

  // biome-ignore lint/suspicious/noDocumentCookie: Temporary fallback for middleware role resolution.
  document.cookie = `cms_role=${encodeURIComponent(role)}; Path=/; SameSite=Lax`
}

export function LoginForm({ mode }: LoginFormProps) {
  const router = useRouter()
  const searchParams = useSearchParams()
  const t = useAdminT()

  const nextPath = useMemo(() => searchParams.get("next") || "/", [searchParams])

  const [name, setName] = useState("Admin User")
  const [username, setUsername] = useState("")
  const [email, setEmail] = useState("")
  const [password, setPassword] = useState("")
  const [isBusy, setIsBusy] = useState(false)
  const [error, setError] = useState<string | null>(null)
  const [success, setSuccess] = useState<string | null>(null)
  const canSubmitSignUp = mode === "signup-owner" || mode === "signup-user"

  async function handleSignIn(event: FormEvent<HTMLFormElement>) {
    event.preventDefault()
    setIsBusy(true)
    setError(null)
    setSuccess(null)

    try {
      const response = await fetch("/api/auth/sign-in/email", {
        method: "POST",
        headers: {
          "content-type": "application/json",
        },
        body: JSON.stringify({
          identifier: email,
          password,
          callbackURL: nextPath,
        }),
      })

      const payload = (await response.json().catch(() => null)) as AuthResponse | null

      if (!response.ok) {
        setError(payload?.message ?? t("auth.errors.signInFailed", "Sign in failed"))
        return
      }

      persistRoleCookie(payload?.user?.role)
      router.push(nextPath)
      router.refresh()
    } catch {
      setError(t("auth.errors.networkSignIn", "Network error while signing in"))
    } finally {
      setIsBusy(false)
    }
  }

  async function handleSignUp(event: FormEvent<HTMLFormElement>) {
    event.preventDefault()

    if (!name.trim()) {
      setError(t("auth.errors.nameRequired", "Name is required for account creation"))
      return
    }

    setIsBusy(true)
    setError(null)
    setSuccess(null)

    try {
      const response = await fetch("/api/auth/sign-up/email", {
        method: "POST",
        headers: {
          "content-type": "application/json",
        },
        body: JSON.stringify({
          name,
          username,
          email,
          password,
          callbackURL: nextPath,
        }),
      })

      const payload = (await response.json().catch(() => null)) as AuthResponse | null

      if (!response.ok) {
        setError(payload?.message ?? t("auth.errors.signUpFailed", "Sign up failed"))
        return
      }

      persistRoleCookie(payload?.user?.role)
      setSuccess(
        mode === "signup-owner"
          ? t("auth.messages.ownerCreated", "Owner account created. Registration is now disabled.")
          : t("auth.messages.accountCreated", "Account created."),
      )
      router.push(nextPath)
      router.refresh()
    } catch {
      setError(t("auth.errors.networkSignUp", "Network error while signing up"))
    } finally {
      setIsBusy(false)
    }
  }

  return (
    <main className="mx-auto flex min-h-screen w-full max-w-md flex-col justify-center px-6 py-16">
      <div className="space-y-3">
        <div className="flex items-center justify-between gap-3">
          <p className="text-sm uppercase tracking-[0.2em] text-neutral-500">
            {t("auth.badge", "Admin Auth")}
          </p>
          <AdminLocaleSwitcher />
        </div>
        <h1 className="text-3xl font-semibold tracking-tight">
          {mode === "signin"
            ? t("auth.titles.signIn", "Sign in to CMS Admin")
            : mode === "signup-owner"
              ? t("auth.titles.signUpOwner", "Welcome to CMS Admin")
              : mode === "signup-user"
                ? t("auth.titles.signUpUser", "Create an admin account")
                : t("auth.titles.signUpDisabled", "Registration is disabled")}
        </h1>
        <p className="text-sm text-neutral-600">
          {mode === "signin"
            ? t("auth.descriptions.signIn", "Better Auth is active on this app via /api/auth.")
            : mode === "signup-owner"
              ? t(
                  "auth.descriptions.signUpOwner",
                  "Create the first owner account to initialize this admin instance.",
                )
              : mode === "signup-user"
                ? t("auth.descriptions.signUpUser", "Self-registration is enabled for admin users.")
                : t(
                    "auth.descriptions.signUpDisabled",
                    "Self-registration is currently turned off by an administrator.",
                  )}
        </p>
      </div>

      {mode === "signin" ? (
        <form
          onSubmit={handleSignIn}
          className="mt-8 space-y-4 rounded-xl border border-neutral-200 p-6"
        >
          <div className="space-y-1">
            <label className="text-sm font-medium" htmlFor="email">
              {t("auth.fields.emailOrUsername", "Email or username")}
            </label>
            <input
              id="email"
              type="text"
              required
              value={email}
              onChange={(event) => setEmail(event.target.value)}
              className="w-full rounded-md border border-neutral-300 px-3 py-2 text-sm"
            />
          </div>

          <div className="space-y-1">
            <label className="text-sm font-medium" htmlFor="password">
              {t("auth.fields.password", "Password")}
            </label>
            <input
              id="password"
              type="password"
              minLength={8}
              required
              value={password}
              onChange={(event) => setPassword(event.target.value)}
              className="w-full rounded-md border border-neutral-300 px-3 py-2 text-sm"
            />
          </div>

          <button
            type="submit"
            disabled={isBusy}
            className="w-full rounded-md bg-neutral-900 px-4 py-2 text-sm font-medium text-white disabled:opacity-60"
          >
            {isBusy
              ? t("auth.actions.signInBusy", "Signing in...")
              : t("auth.actions.signInIdle", "Sign in")}
          </button>

          <p className="text-xs text-neutral-600">
            {t("auth.links.needAccount", "Need an account?")}{" "}
            <Link href={`/register?next=${encodeURIComponent(nextPath)}`} className="underline">
              {t("auth.links.register", "Register")}
            </Link>
          </p>

          {error ? <p className="text-sm text-red-600">{error}</p> : null}
        </form>
      ) : canSubmitSignUp ? (
        <form
          onSubmit={handleSignUp}
          className="mt-8 space-y-4 rounded-xl border border-neutral-200 p-6"
        >
          <div className="space-y-1">
            <label className="text-sm font-medium" htmlFor="name">
              {t("auth.fields.name", "Name")}
            </label>
            <input
              id="name"
              type="text"
              value={name}
              onChange={(event) => setName(event.target.value)}
              className="w-full rounded-md border border-neutral-300 px-3 py-2 text-sm"
            />
          </div>

          <div className="space-y-1">
            <label className="text-sm font-medium" htmlFor="email">
              {t("auth.fields.email", "Email")}
            </label>
            <input
              id="email"
              type="email"
              required
              value={email}
              onChange={(event) => setEmail(event.target.value)}
              className="w-full rounded-md border border-neutral-300 px-3 py-2 text-sm"
            />
          </div>

          <div className="space-y-1">
            <label className="text-sm font-medium" htmlFor="username">
              {t("auth.fields.username", "Username (optional)")}
            </label>
            <input
              id="username"
              type="text"
              value={username}
              onChange={(event) => setUsername(event.target.value)}
              className="w-full rounded-md border border-neutral-300 px-3 py-2 text-sm"
            />
          </div>

          <div className="space-y-1">
            <label className="text-sm font-medium" htmlFor="password">
              {t("auth.fields.password", "Password")}
            </label>
            <input
              id="password"
              type="password"
              minLength={8}
              required
              value={password}
              onChange={(event) => setPassword(event.target.value)}
              className="w-full rounded-md border border-neutral-300 px-3 py-2 text-sm"
            />
          </div>

          <button
            type="submit"
            disabled={isBusy}
            className="w-full rounded-md bg-neutral-900 px-4 py-2 text-sm font-medium text-white disabled:opacity-60"
          >
            {isBusy
              ? t("auth.actions.signUpBusy", "Creating account...")
              : mode === "signup-owner"
                ? t("auth.actions.signUpOwnerIdle", "Create owner account")
                : t("auth.actions.signUpUserIdle", "Create account")}
          </button>

          <p className="text-xs text-neutral-600">
            {t("auth.links.alreadyHaveAccount", "Already have an account?")}{" "}
            <Link href={`/login?next=${encodeURIComponent(nextPath)}`} className="underline">
              {t("auth.links.goToSignIn", "Go to sign in")}
            </Link>
          </p>

          {error ? <p className="text-sm text-red-600">{error}</p> : null}
          {success ? <p className="text-sm text-green-700">{success}</p> : null}
        </form>
      ) : (
        <section className="mt-8 space-y-4 rounded-xl border border-neutral-200 p-6">
          <p className="text-sm text-neutral-700">
            {t(
              "auth.messages.registrationDisabled",
              "Registration is disabled for this admin instance. Ask an administrator to create an account or enable self-registration.",
            )}
          </p>
          <p className="text-xs text-neutral-600">
            <Link href={`/login?next=${encodeURIComponent(nextPath)}`} className="underline">
              {t("auth.links.goToSignIn", "Go to sign in")}
            </Link>
          </p>
        </section>
      )}
    </main>
  )
}