"use client";

import { getCsrfToken, signIn } from "next-auth/react";
import { useRouter, useSearchParams } from "next/navigation";
import { useEffect, useState, type FormEvent } from "react";
import { z } from "zod";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { SITE_NAME, TAGLINE } from "@/lib/constants";

const loginSchema = z.object({
  email: z.string().trim().min(1, "Email is required.").email("Enter a valid email address."),
  password: z.string().min(1, "Password is required.").min(8, "Password must be at least 8 characters."),
});

type LoginErrors = Partial<Record<keyof z.infer<typeof loginSchema>, string>>;

type AdminLoginFormProps = {
  initialCallbackUrl?: string;
  initialError?: string;
};

function getSafeCallbackUrl(value: string | null) {
  if (!value) {
    return "/admin";
  }

  if (value.startsWith("/admin") && !value.startsWith("/admin/login")) {
    return value;
  }

  try {
    if (typeof window === "undefined") {
      return "/admin";
    }

    const url = new URL(value, window.location.origin);

    if (url.origin !== window.location.origin || !url.pathname.startsWith("/admin")) {
      return "/admin";
    }

    if (url.pathname === "/admin/login") {
      return "/admin";
    }

    return `${url.pathname}${url.search}`;
  } catch {
    return "/admin";
  }
}

export function AdminLoginForm({
  initialCallbackUrl = "/admin",
  initialError = "",
}: AdminLoginFormProps) {
  const router = useRouter();
  const searchParams = useSearchParams();
  const [csrfToken, setCsrfToken] = useState("");
  const [error, setError] = useState(initialError);
  const [success, setSuccess] = useState("");
  const [fieldErrors, setFieldErrors] = useState<LoginErrors>({});
  const [loading, setLoading] = useState(false);

  const callbackUrl = getSafeCallbackUrl(searchParams.get("callbackUrl") ?? initialCallbackUrl);

  useEffect(() => {
    let active = true;

    getCsrfToken().then((token) => {
      if (active) {
        setCsrfToken(token ?? "");
      }
    });

    return () => {
      active = false;
    };
  }, []);

  useEffect(() => {
    const authError = searchParams.get("error");

    if (authError === "CredentialsSignin") {
      setError("Invalid email or password.");
      return;
    }

    if (authError === "FormSubmit") {
      setError("Login did not submit correctly. Please enter your credentials again.");
      return;
    }

    if (searchParams.has("email") || searchParams.has("password")) {
      const cleanUrl = callbackUrl === "/admin" ? "/admin/login?error=FormSubmit" : `/admin/login?callbackUrl=${encodeURIComponent(callbackUrl)}&error=FormSubmit`;

      setError("Login did not submit correctly. Please enter your credentials again.");
      router.replace(cleanUrl);
    }
  }, [callbackUrl, router, searchParams]);

  async function handleSubmit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    setError("");
    setSuccess("");
    setFieldErrors({});

    const form = event.currentTarget;
    const formData = new FormData(form);
    const parsed = loginSchema.safeParse({
      email: formData.get("email"),
      password: formData.get("password"),
    });

    if (!parsed.success) {
      const nextErrors: LoginErrors = {};
      parsed.error.issues.forEach((issue) => {
        const field = issue.path[0];
        if (field === "email" || field === "password") {
          nextErrors[field] = issue.message;
        }
      });
      setFieldErrors(nextErrors);
      setError("Please fix the highlighted fields.");
      return;
    }

    setLoading(true);

    try {
      const result = await signIn("credentials", {
        email: parsed.data.email.toLowerCase(),
        password: parsed.data.password,
        redirect: false,
        callbackUrl,
      });

      if (result?.error || !result?.ok) {
        setFieldErrors({ password: "Check your email and password." });
        setError("Invalid email or password.");
        return;
      }

      setSuccess("Login successful. Opening dashboard...");
      router.refresh();
      window.location.replace(callbackUrl);
    } catch {
      setError("Unable to login right now. Please try again.");
    } finally {
      setLoading(false);
    }
  }

  return (
    <form
      action="/api/auth/callback/credentials"
      className="soft-card w-full max-w-md p-6 md:p-8"
      method="post"
      noValidate
      onSubmit={handleSubmit}
    >
      <input name="csrfToken" type="hidden" value={csrfToken} readOnly />
      <input name="callbackUrl" type="hidden" value={callbackUrl} readOnly />
      <div className="text-center">
        <div className="mx-auto flex h-14 w-14 items-center justify-center rounded-2xl bg-ev text-2xl font-black text-white">
          B
        </div>
        <h1 className="mt-4 text-2xl font-bold text-navy-deep">{SITE_NAME}</h1>
        <p className="text-sm font-semibold uppercase tracking-[0.16em] text-primary">
          {TAGLINE}
        </p>
        <p className="mt-4 text-sm text-navy-muted">Admin dashboard login</p>
      </div>

      <div className="mt-7 space-y-4">
        <label className="block text-sm font-semibold text-navy-deep">
          Email
          <Input
            aria-describedby={fieldErrors.email ? "admin-email-error" : undefined}
            aria-invalid={Boolean(fieldErrors.email)}
            autoComplete="email"
            className="mt-2"
            name="email"
            placeholder="admin@bashistaauto.com"
            type="email"
          />
          {fieldErrors.email ? (
            <span id="admin-email-error" className="mt-1 block text-xs font-semibold text-red-600">
              {fieldErrors.email}
            </span>
          ) : null}
        </label>
        <label className="block text-sm font-semibold text-navy-deep">
          Password
          <Input
            aria-describedby={fieldErrors.password ? "admin-password-error" : undefined}
            aria-invalid={Boolean(fieldErrors.password)}
            autoComplete="current-password"
            className="mt-2"
            name="password"
            placeholder="Enter password"
            type="password"
          />
          {fieldErrors.password ? (
            <span id="admin-password-error" className="mt-1 block text-xs font-semibold text-red-600">
              {fieldErrors.password}
            </span>
          ) : null}
        </label>
      </div>

      {error ? (
        <p className="mt-4 rounded-xl bg-red-50 px-4 py-3 text-sm font-semibold text-red-700">
          {error}
        </p>
      ) : null}

      {success ? (
        <p className="mt-4 rounded-xl bg-ev-soft px-4 py-3 text-sm font-semibold text-ev-deep">
          {success}
        </p>
      ) : null}

      <Button className="mt-6 w-full" type="submit" variant="green" disabled={loading}>
        {loading ? "Signing in..." : "Login"}
      </Button>
    </form>
  );
}