"use client";

import { useEffect, useState } from "react";
import { signIn } from "next-auth/react";
import { useSearchParams } from "next/navigation";
import { useTranslations } from "next-intl";
import { Loader2 } from "lucide-react";
import { z } from "zod";
import { Link, useRouter } from "@/i18n/navigation";
import { isDemoLoginEnabled, sanitizeCallbackUrl } from "@/lib/auth-utils";
import { toastError, toastPromise, toastSuccess } from "@/lib/toast";
import AuthLayout from "@/components/auth/AuthLayout";
import Input from "@/components/ui/Input";
import PasswordInput from "@/components/auth/PasswordInput";
import Button from "@/components/ui/Button";
import { useBrand } from "@/components/providers/BrandProvider";

const DEMO_ACCOUNTS = [
  { email: "admin@cuppa.dev", pass: "Admin@123", roleKey: "superAdmin" as const },
  { email: "manager@cuppa.dev", pass: "Manager@123", roleKey: "manager" as const },
  { email: "user@cuppa.dev", pass: "User@123", roleKey: "user" as const },
];

export default function LoginForm() {
  const router = useRouter();
  const t = useTranslations("auth");
  const brand = useBrand();
  const searchParams = useSearchParams();

  const callbackUrl = sanitizeCallbackUrl(searchParams.get("callbackUrl"));
  const registered = searchParams.get("registered") === "true";
  const passwordReset = searchParams.get("reset") === "true";
  const authError = searchParams.get("error");
  const showDemo = isDemoLoginEnabled();

  const [form, setForm] = useState({ email: "", password: "" });
  const [fieldErrors, setFieldErrors] = useState<{ email?: string; password?: string }>({});
  const [loading, setLoading] = useState(false);

  const loginSchema = z.object({
    email: z.string().min(1, t("emailRequired")).email(t("emailInvalid")),
    password: z.string().min(1, t("passwordRequired")).min(6, t("passwordMinLength")),
  });

  useEffect(() => {
    if (passwordReset) toastSuccess(t("passwordResetSuccess"));
    if (registered) toastSuccess(t("accountCreated"));
    if (authError === "SessionRequired" || authError === "CredentialsSignin") {
      toastError(t("invalidCredentials"));
    } else if (authError) {
      toastError(t("sessionExpired"));
    }
  }, [passwordReset, registered, authError, t]);

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    setFieldErrors({});

    const parsed = loginSchema.safeParse(form);
    if (!parsed.success) {
      const errors: { email?: string; password?: string } = {};
      for (const issue of parsed.error.issues) {
        const key = issue.path[0] as "email" | "password";
        if (!errors[key]) errors[key] = issue.message;
      }
      setFieldErrors(errors);
      const first = parsed.error.issues[0]?.message;
      if (first) toastError(first);
      return;
    }

    setLoading(true);
    try {
      await toastPromise(
        (async () => {
          const result = await signIn("credentials", {
            email: parsed.data.email.trim().toLowerCase(),
            password: parsed.data.password,
            redirect: false,
          });

          if (result?.error) {
            throw new Error(t("invalidCredentials"));
          }

          router.push(callbackUrl);
          router.refresh();
        })(),
        {
          loading: t("signingIn"),
          success: t("signIn"),
          error: (err) =>
            err instanceof Error ? err.message : t("networkError"),
        }
      );
    } catch {
      // toastPromise already surfaced the error
    } finally {
      setLoading(false);
    }
  }

  function fillDemo(email: string, pass: string) {
    setForm({ email, password: pass });
    setFieldErrors({});
  }

  return (
    <AuthLayout title={t("signIn")} subtitle={t("signInSubtitle", { appName: brand.name })}>
      <form onSubmit={handleSubmit} className="space-y-5" noValidate>
        <Input
          label={t("email")}
          type="email"
          name="email"
          value={form.email}
          onChange={(e) => setForm({ ...form, email: e.target.value })}
          placeholder={t("emailPlaceholder")}
          autoComplete="email"
          autoFocus
          disabled={loading}
          error={fieldErrors.email}
          aria-invalid={fieldErrors.email ? true : undefined}
        />
        <PasswordInput
          label={t("password")}
          name="password"
          value={form.password}
          onChange={(e) => setForm({ ...form, password: e.target.value })}
          placeholder={t("passwordPlaceholder")}
          disabled={loading}
          error={fieldErrors.password}
        />

        <div className="flex justify-end">
          <Link
            href="/forgot-password"
            className="cursor-pointer text-sm font-medium text-[var(--accent)] transition-colors hover:text-[var(--accent-hover)]"
          >
            {t("forgotPasswordLink")}
          </Link>
        </div>

        <Button type="submit" disabled={loading} className="w-full" size="lg">
          {loading ? (
            <>
              <Loader2 className="w-4 h-4 animate-spin" aria-hidden />
              {t("signingIn")}
            </>
          ) : (
            t("signIn")
          )}
        </Button>
      </form>

      <p className="text-center text-sm text-[var(--text-muted)] mt-6">
        {t("noAccount")}{" "}
        <Link
          href="/register"
          className="cursor-pointer text-[var(--accent)] hover:text-[var(--accent-hover)] font-medium transition-colors focus:outline-none focus-visible:underline"
        >
          {t("registerLink")}
        </Link>
      </p>

      {showDemo && (
        <div className="mt-8 pt-6 border-t border-[var(--border)]">
          <p className="text-xs font-medium text-[var(--text-faint)] uppercase tracking-wider mb-3">
            {t("quickDemo")}
          </p>
          <div className="space-y-2">
            {DEMO_ACCOUNTS.map((acc) => (
              <button
                key={acc.email}
                type="button"
                disabled={loading}
                onClick={() => fillDemo(acc.email, acc.pass)}
                className="group flex w-full cursor-pointer items-center justify-between rounded-lg border border-[var(--border)] bg-[var(--bg-elevated)] px-3.5 py-2.5 text-start transition-all hover:border-[var(--accent)]/30 hover:bg-[var(--bg-surface)] disabled:cursor-not-allowed disabled:opacity-50"
              >
                <div>
                  <p className="text-sm text-[var(--text)] group-hover:text-[var(--accent)] transition-colors">
                    {acc.email}
                  </p>
                  <p className="text-xs text-[var(--text-faint)]">{t(`roles.${acc.roleKey}`)}</p>
                </div>
                <span className="text-xs text-[var(--text-faint)] group-hover:text-[var(--accent)] transition-colors">
                  {t("use")} →
                </span>
              </button>
            ))}
          </div>
        </div>
      )}
    </AuthLayout>
  );
}