"use client";

import Link from "next/link";
import { useRef, useState } from "react";
import { useRouter } from "next/navigation";
import { signIn } from "next-auth/react";
import { Eye, EyeOff, ChevronRight, Mail, Sparkles, Loader2 } from "lucide-react";
import { toast } from "sonner";

import { Input } from "@/shared/components/ui/input";
import { Label } from "@/shared/components/ui/label";
import { loginSchema } from "@/modules/auth/dtos/login-schema";
import loginHero from "@/shared/assets/login-hero.jpg";

type FieldName = "email" | "password";

const FORM_ERROR_ID = "login-form-error";

export function LoginView() {
  const router = useRouter();
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [showPassword, setShowPassword] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [errorField, setErrorField] = useState<FieldName | null>(null);
  const [isSubmitting, setIsSubmitting] = useState(false);

  const emailInputRef = useRef<HTMLInputElement>(null);
  const passwordInputRef = useRef<HTMLInputElement>(null);
  const fieldRefs = { email: emailInputRef, password: passwordInputRef } as const;

  async function handleSubmit(event: React.FormEvent) {
    event.preventDefault();
    setError(null);
    setErrorField(null);

    const parsed = loginSchema.safeParse({ email, password });
    if (!parsed.success) {
      const issue = parsed.error.issues[0];
      const field = issue?.path[0] as FieldName | undefined;
      const errorMsg = issue?.message ?? "Dados inválidos";
      setError(errorMsg);
      setErrorField(field ?? null);
      toast.error(errorMsg);
      if (field) fieldRefs[field].current?.focus();
      return;
    }

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

    if (result?.error) {
      setIsSubmitting(false);
      const errorMsg = "E-mail ou senha inválidos";
      setError(errorMsg);
      toast.error(errorMsg);
      emailInputRef.current?.focus();
      return;
    }

    toast.success("Login realizado com sucesso!");
    window.location.replace("/");
  }

  return (
    <div className="min-h-screen w-full flex flex-col md:flex-row bg-white text-zinc-900 font-sans antialiased overflow-x-hidden selection:bg-purple-500/20 selection:text-purple-900">
      {/* Visual Left Hero Section (Image background) */}
      <div className="hidden md:block flex-1 relative overflow-hidden bg-zinc-900 select-none min-h-screen">
        {/* eslint-disable-next-line @next/next/no-img-element */}
        <img
          src={loginHero.src}
          alt="Acesse sua conta Newsletter"
          className="absolute inset-0 w-full h-full object-cover object-center"
        />
        <div className="absolute inset-0 bg-black/10 pointer-events-none" />
      </div>

      {/* Right Form Container Section (Light Mode) */}
      <div className="w-full md:w-[560px] lg:w-[640px] shrink-0 bg-white border-l border-zinc-200/80 p-8 sm:p-12 md:p-16 flex flex-col justify-between min-h-screen">
        {/* Header / Brand Logo */}
        <div className="flex items-center justify-between pt-2 pb-8">
          <div className="flex items-center gap-2.5">
            <div className="w-9 h-9 rounded-lg bg-[#8257e5] flex items-center justify-center shadow-sm shadow-purple-500/20">
              <Mail className="h-5 w-5 text-white" />
            </div>
            <span className="font-bold text-lg tracking-wider text-zinc-900">
              NEWSLETTER
            </span>
          </div>
        </div>

        {/* Form Body */}
        <div className="my-auto py-6">
          <h1 className="text-2xl sm:text-3xl font-bold text-zinc-900 tracking-tight mb-8">
            Acesse sua conta
          </h1>

          <form onSubmit={handleSubmit} className="flex flex-col gap-5" noValidate>
            {/* E-mail Field */}
            <div className="flex flex-col gap-1.5">
              <Label htmlFor="email" className="text-xs font-semibold text-zinc-700">
                E-mail
              </Label>
              <Input
                id="email"
                ref={emailInputRef}
                type="email"
                autoComplete="email"
                placeholder="Seu e-mail"
                value={email}
                onChange={(event) => setEmail(event.target.value)}
                aria-invalid={errorField === "email"}
                aria-describedby={errorField === "email" ? FORM_ERROR_ID : undefined}
                className="h-11 bg-zinc-50/80 border-zinc-200 text-zinc-900 placeholder:text-zinc-400 focus-visible:border-purple-600 focus-visible:ring-1 focus-visible:ring-purple-600 text-sm transition-all rounded-md px-3.5"
                required
              />
            </div>

            {/* Password Field */}
            <div className="flex flex-col gap-1.5">
              <Label htmlFor="password" className="text-xs font-semibold text-zinc-700">
                Senha
              </Label>
              <div className="relative">
                <Input
                  id="password"
                  ref={passwordInputRef}
                  type={showPassword ? "text" : "password"}
                  autoComplete="current-password"
                  placeholder="Sua senha"
                  value={password}
                  onChange={(event) => setPassword(event.target.value)}
                  className="h-11 pr-11 bg-zinc-50/80 border-zinc-200 text-zinc-900 placeholder:text-zinc-400 focus-visible:border-purple-600 focus-visible:ring-1 focus-visible:ring-purple-600 text-sm transition-all rounded-md px-3.5"
                  aria-invalid={errorField === "password"}
                  aria-describedby={errorField === "password" ? FORM_ERROR_ID : undefined}
                  required
                />
                <button
                  type="button"
                  onClick={() => setShowPassword(!showPassword)}
                  className="absolute right-3.5 top-1/2 -translate-y-1/2 text-zinc-400 hover:text-zinc-600 focus-visible:outline-none focus-visible:text-purple-600 transition-colors p-1"
                  aria-label={showPassword ? "Ocultar senha" : "Exibir senha"}
                  aria-pressed={showPassword}
                >
                  {showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
                </button>
              </div>
              <div className="mt-1">
                <Link
                  href="#"
                  onClick={(e) => e.preventDefault()}
                  className="text-xs font-medium text-[#8257e5] hover:text-purple-700 hover:underline transition-colors"
                >
                  Esqueci minha senha
                </Link>
              </div>
            </div>

            {/* Error Banner */}
            {error && (
              <div
                id={FORM_ERROR_ID}
                role="alert"
                className="text-sm text-red-600 bg-red-50 border border-red-200 rounded-md p-3"
              >
                {error}
              </div>
            )}

            <button
              type="submit"
              disabled={isSubmitting}
              aria-busy={isSubmitting}
              className="w-full h-11 mt-2 bg-[#8257e5] hover:bg-[#7143d4] active:bg-[#6035b8] text-white font-semibold rounded-md transition-all duration-150 text-sm shadow-md shadow-purple-500/20 flex items-center justify-center cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed"
            >
              {isSubmitting ? (
                <>
                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                  Entrando...
                </>
              ) : (
                "Entrar"
              )}
            </button>
          </form>

          {/* Divider */}
          <div className="border-t border-zinc-200/80 my-8" />

          {/* Register Callout Card */}
          <Link
            href="/register"
            className="group flex items-center justify-between p-4 rounded-lg bg-zinc-50/80 hover:bg-zinc-100/80 border border-zinc-200/80 transition-all duration-150 cursor-pointer"
          >
            <div className="flex items-center gap-3.5">
              <div className="p-2.5 rounded-lg bg-purple-100 text-[#8257e5] group-hover:bg-purple-200/60 transition-colors">
                <Sparkles className="h-5 w-5" />
              </div>
              <div>
                <span className="block text-xs text-zinc-500">Não tem uma conta?</span>
                <span className="block text-sm font-semibold text-[#8257e5] group-hover:text-purple-700 transition-colors">
                  Crie sua conta grátis
                </span>
              </div>
            </div>
            <ChevronRight className="h-4 w-4 text-zinc-400 group-hover:text-zinc-600 group-hover:translate-x-0.5 transition-all" />
          </Link>
        </div>

        {/* Footer info / copyright */}
        <div className="text-xs text-zinc-400 pt-4">
          &copy; {new Date().getFullYear()} Newsletter Platform. Todos os direitos reservados.
        </div>
      </div>
    </div>
  );
}