"use client";

import { useState, useTransition } from "react";
import { signIn } from "next-auth/react";
import { useRouter } from "next/navigation";
import { Eye, EyeOff, Languages, LockKeyhole, Mail, Moon, ShieldCheck, Sun } from "lucide-react";
import { usePreferences } from "@/components/providers/app-providers";

export function LoginForm({ callbackUrl }: { callbackUrl: string }) {
  const router = useRouter();
  const { dictionary: t, theme, toggleLocale, toggleTheme } = usePreferences();
  const [showPassword, setShowPassword] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [pending, startTransition] = useTransition();

  function handleSubmit(formData: FormData) {
    setError(null);
    startTransition(async () => {
      try {
        const result = await signIn("credentials", {
          email: String(formData.get("email") ?? ""),
          password: String(formData.get("password") ?? ""),
          redirect: false,
        });
        if (result?.error) {
          setError(t.auth.invalid);
          return;
        }
        router.replace(callbackUrl);
        router.refresh();
      } catch {
        setError(t.auth.unexpected);
      }
    });
  }

  return (
    <section className="login-card">
      <div className="login-toolbar">
        <button className="icon-button" onClick={toggleLocale} type="button" aria-label={t.dashboard.header.language}>
          <Languages size={18} />
        </button>
        <button className="icon-button" onClick={toggleTheme} type="button" aria-label={t.dashboard.header.theme}>
          {theme === "dark" ? <Sun size={18} /> : <Moon size={18} />}
        </button>
      </div>

      <div className="login-brand">
        <span className="brand-shield"><ShieldCheck size={30} strokeWidth={1.8} /></span>
        <div>
          <div className="brand-title-row">
            <strong>{t.dashboard.brand}</strong>
            <span className="enterprise-badge">{t.dashboard.badge}</span>
          </div>
          <p>{t.dashboard.subtitle}</p>
        </div>
      </div>

      <div className="login-copy">
        <p className="eyebrow">{t.auth.eyebrow}</p>
        <h1>{t.auth.title}</h1>
        <p>{t.auth.description}</p>
      </div>

      <form action={handleSubmit} className="login-form">
        <label>
          <span>{t.auth.email}</span>
          <span className="input-shell">
            <Mail size={18} aria-hidden="true" />
            <input
              autoComplete="email"
              inputMode="email"
              name="email"
              placeholder={t.auth.emailPlaceholder}
              required
              type="email"
            />
          </span>
        </label>
        <label>
          <span>{t.auth.password}</span>
          <span className="input-shell">
            <LockKeyhole size={18} aria-hidden="true" />
            <input
              autoComplete="current-password"
              name="password"
              placeholder={t.auth.passwordPlaceholder}
              required
              type={showPassword ? "text" : "password"}
            />
            <button
              className="password-toggle"
              onClick={() => setShowPassword((current) => !current)}
              type="button"
              aria-label={t.auth.password}
            >
              {showPassword ? <EyeOff size={17} /> : <Eye size={17} />}
            </button>
          </span>
        </label>

        {error ? <p className="form-error" role="alert">{error}</p> : null}

        <button className="primary-button login-submit" disabled={pending} type="submit">
          <ShieldCheck size={18} />
          {pending ? t.auth.submitting : t.auth.submit}
        </button>
      </form>

      <p className="login-security"><span />{t.auth.security}</p>
    </section>
  );
}