import Image from "next/image";
import { redirect } from "next/navigation";
import { AuthError } from "next-auth";
import { signIn } from "@/lib/auth";
import { PasswordField } from "./PasswordField";

async function loginAction(formData: FormData) {
  "use server";
  try {
    await signIn("credentials", {
      email: formData.get("email") as string,
      password: formData.get("password") as string,
      redirectTo: "/agent/dashboard",
    });
  } catch (error) {
    // CRITICAL: Only catch AuthError. Everything else (including NEXT_REDIRECT) must re-throw.
    if (error instanceof AuthError) {
      redirect("/agent/login?error=invalid");
    }
    throw error; // Re-throws NEXT_REDIRECT — allows the redirect to fire
  }
}

interface LoginPageProps {
  searchParams: Promise<{ error?: string; signed_out?: string }>;
}

export default async function LoginPage({ searchParams }: LoginPageProps) {
  const params = await searchParams;
  const hasError = params.error === "invalid";
  const signedOut = params.signed_out === "1";

  return (
    <div className="min-h-screen flex">
      {/* Left side: branded photo panel — hidden on mobile */}
      <div className="hidden lg:flex lg:w-1/2 relative">
        <Image
          src="/red.jpg"
          alt="Teressa Copeland"
          fill
          className="object-cover"
          priority
        />
        {/* Dark gradient overlay */}
        <div className="absolute inset-0 bg-gradient-to-t from-[#1B2B4B]/80 via-[#1B2B4B]/30 to-transparent" />
        {/* Brand name text */}
        <div className="absolute bottom-10 left-8 right-8">
          <p className="text-[#C9A84C] text-sm font-semibold tracking-widest uppercase mb-2">
            Agent Portal
          </p>
          <h2 className="text-white text-3xl font-bold leading-tight">
            Teressa Copeland Homes
          </h2>
          <p className="text-white/70 text-sm mt-2">
            Utah real estate expertise
          </p>
        </div>
      </div>

      {/* Right side: login form */}
      <div
        className="flex-1 flex items-center justify-center px-6 py-12"
        style={{ backgroundColor: "#FAF9F7" }}
      >
        <div className="w-full max-w-md">
          {/* Mobile brand header */}
          <div className="lg:hidden text-center mb-8">
            <p
              className="text-sm font-semibold tracking-widest uppercase mb-1"
              style={{ color: "#C9A84C" }}
            >
              Teressa Copeland Homes
            </p>
          </div>

          {/* Card */}
          <div className="bg-white rounded-2xl shadow-lg px-8 py-10">
            <h1
              className="text-2xl font-bold mb-6"
              style={{ color: "#1B2B4B" }}
            >
              Agent Portal
            </h1>

            {/* Signed-out confirmation banner */}
            {signedOut && (
              <div
                className="mb-5 rounded-lg px-4 py-3 text-sm font-medium"
                style={{
                  backgroundColor: "#F0FDF4",
                  color: "#166534",
                  border: "1px solid #BBF7D0",
                }}
                role="alert"
              >
                You&apos;ve been signed out.
              </div>
            )}

            {/* Error banner */}
            {hasError && (
              <div
                className="mb-5 rounded-lg px-4 py-3 text-sm font-medium"
                style={{
                  backgroundColor: "#FEF2F2",
                  color: "#991B1B",
                  border: "1px solid #FECACA",
                }}
                role="alert"
              >
                Invalid email or password.
              </div>
            )}

            <form action={loginAction} className="space-y-5">
              {/* Email field */}
              <div>
                <label
                  htmlFor="email"
                  className="block text-sm font-medium mb-1.5"
                  style={{ color: "#1B2B4B" }}
                >
                  Email address
                </label>
                <input
                  id="email"
                  name="email"
                  type="email"
                  required
                  autoComplete="email"
                  className="block w-full rounded-lg border border-gray-300 px-3.5 py-2.5 text-sm text-gray-900 placeholder-gray-400 focus:outline-none focus:ring-2 focus:border-transparent transition"
                  style={
                    {
                      "--tw-ring-color": "#C9A84C",
                    } as React.CSSProperties
                  }
                  placeholder="you@example.com"
                />
              </div>

              {/* Password field — client component for show/hide toggle */}
              <PasswordField />

              {/* Submit button */}
              <button
                type="submit"
                className="w-full rounded-lg px-4 py-2.5 text-sm font-semibold text-white transition hover:brightness-110 focus:outline-none focus:ring-2 focus:ring-offset-2"
                style={{
                  backgroundColor: "#C9A84C",
                  // @ts-expect-error CSS custom property for focus ring
                  "--tw-ring-color": "#C9A84C",
                }}
              >
                Sign in
              </button>
            </form>
          </div>
        </div>
      </div>
    </div>
  );
}
