'use client';

import { useActionState, useRef, useState, Suspense } from 'react';
import { useFormStatus } from 'react-dom';
import { authenticate } from '@/app/actions/auth';
import Link from 'next/link';
import { useSearchParams } from 'next/navigation';
import { Mail, Lock, ArrowRight, Sparkles } from 'lucide-react';
import { useLanguage } from '@/lib/i18n';
import { GoogleSignInButton } from '@/components/google-sign-in-button';
import { resendSignupVerification } from '@/app/actions/auth-verify';
import { toast } from 'sonner';

function AuthDivider({ label }: { label: string }) {
  return (
    <div className="relative flex items-center py-2">
      <div className="flex-grow border-t border-[var(--border)]" />
      <span className="mx-4 text-[10px] uppercase tracking-widest text-[var(--muted-foreground)] font-bold">
        {label}
      </span>
      <div className="flex-grow border-t border-[var(--border)]" />
    </div>
  );
}

function LoginButton() {
  const { pending } = useFormStatus();
  const { t } = useLanguage();
  return (
    <button
      type="submit"
      disabled={pending}
      className="w-full bg-[var(--foreground)] text-[var(--background)] py-4 rounded-2xl font-bold uppercase tracking-[0.2em] text-[10px] flex items-center justify-center gap-3 transition-all hover:shadow-xl hover:shadow-black/10 active:scale-[0.98] disabled:opacity-50 mt-4"
    >
      {pending ? (
        <Sparkles size={16} className="animate-spin" />
      ) : (
        <>
          {t('auth.signIn')}
          <ArrowRight size={14} />
        </>
      )}
    </button>
  );
}

function LoginFormInner({
  allowRegister = true,
  googleAuthEnabled = false,
  authError,
}: {
  allowRegister?: boolean;
  googleAuthEnabled?: boolean;
  authError?: string;
}) {
  const [errorMessage, dispatch] = useActionState(authenticate, undefined);
  const { t, language } = useLanguage();
  const searchParams = useSearchParams();
  const emailRef = useRef<HTMLInputElement>(null);
  const [resending, setResending] = useState(false);
  const verified = searchParams.get('verified') === '1';
  const oauthError =
    authError === 'SessionRequired'
      ? t('auth.sessionExpired')
      : authError === 'OAuthAccountNotLinked'
        ? t('auth.oauthAccountNotLinked')
        : authError ?? null;

  const showUnverified = errorMessage === 'EMAIL_NOT_VERIFIED';

  const handleResend = async () => {
    const email = emailRef.current?.value?.trim() ?? '';
    if (!email) {
      toast.error(t('auth.verifyMissingEmail'));
      return;
    }
    setResending(true);
    const result = await resendSignupVerification(email, language);
    setResending(false);
    if (result.success) toast.success(t('auth.verifyResent'));
    else toast.error(t('auth.verifyResendFailed'));
  };

  return (
    <div className="bg-white dark:bg-[var(--background)]/50 border border-[var(--border)] p-8 md:p-10 rounded-[48px] shadow-2xl">
      <div className="space-y-8">
        <div className="text-center space-y-2">
          <h1 className="text-2xl md:text-3xl font-serif font-bold">
            {t('auth.welcomeBack')}
          </h1>
          <p className="text-[var(--muted-foreground)] text-sm font-light">
            {t('auth.welcomeBackSubtitle')}
          </p>
        </div>

        {verified && (
          <p className="text-sm text-emerald-600 dark:text-emerald-400 text-center px-2" role="status">
            {t('auth.emailVerifiedBanner')}
          </p>
        )}

        {oauthError && (
          <p className="text-sm text-red-500 text-center px-2" role="alert">
            {oauthError}
          </p>
        )}

        {googleAuthEnabled && (
          <>
            <GoogleSignInButton label={t('auth.continueWithGoogle')} />
            <AuthDivider label={t('auth.orContinueWith')} />
          </>
        )}

        <form action={dispatch} className="space-y-4">
          <div className="space-y-1.5">
            <label htmlFor="email" className="text-[10px] uppercase tracking-widest font-bold text-[var(--muted-foreground)] px-4">
              {t('auth.email')}
            </label>
            <div className="relative group">
              <div className="absolute left-4 top-1/2 -translate-y-1/2 text-[var(--muted-foreground)] group-focus-within:text-[var(--color-brand-accent)] transition-colors">
                <Mail size={16} />
              </div>
              <input
                ref={emailRef}
                className="w-full bg-slate-50 dark:bg-white/5 border border-[var(--border)] rounded-2xl py-4 pl-12 pr-4 text-sm outline-none focus:border-[var(--color-brand-accent)] focus:ring-4 ring-[var(--color-brand-accent)]/5 transition-all"
                id="email"
                type="email"
                name="email"
                autoComplete="email"
                placeholder={t('auth.emailPlaceholder')}
                required
              />
            </div>
          </div>

          <div className="space-y-1.5">
            <div className="flex justify-between items-center px-4">
              <label htmlFor="password" className="text-[10px] uppercase tracking-widest font-bold text-[var(--muted-foreground)]">
                {t('auth.password')}
              </label>
              <Link
                href="/forgot-password"
                className="text-[10px] text-[var(--color-brand-accent)] font-bold uppercase tracking-widest hover:underline"
              >
                {t('auth.forgot')}
              </Link>
            </div>
            <div className="relative group">
              <div className="absolute left-4 top-1/2 -translate-y-1/2 text-[var(--muted-foreground)] group-focus-within:text-[var(--color-brand-accent)] transition-colors">
                <Lock size={16} />
              </div>
              <input
                className="w-full bg-slate-50 dark:bg-white/5 border border-[var(--border)] rounded-2xl py-4 pl-12 pr-4 text-sm outline-none focus:border-[var(--color-brand-accent)] focus:ring-4 ring-[var(--color-brand-accent)]/5 transition-all"
                id="password"
                type="password"
                name="password"
                autoComplete="current-password"
                placeholder="••••••••"
                required
                minLength={6}
              />
            </div>
          </div>

          <LoginButton />

          <div className="space-y-2" aria-live="polite" aria-atomic="true">
            {showUnverified && (
              <div className="rounded-2xl border border-amber-500/30 bg-amber-500/10 px-4 py-3 space-y-2">
                <p className="text-sm text-amber-800 dark:text-amber-200">{t('auth.emailNotVerified')}</p>
                <button
                  type="button"
                  onClick={handleResend}
                  disabled={resending}
                  className="text-[11px] font-bold uppercase tracking-widest text-[var(--color-brand-accent)] hover:underline disabled:opacity-50"
                >
                  {resending ? t('auth.sending') : t('auth.resendVerification')}
                </button>
              </div>
            )}
            {errorMessage && !showUnverified && (
              <p className="text-sm text-red-500">
                {errorMessage === 'Invalid credentials.'
                  ? t('auth.invalidCredentials')
                  : errorMessage}
              </p>
            )}
          </div>
        </form>

        {allowRegister && (
          <div className="text-center pt-2">
            <p className="text-xs text-[var(--muted-foreground)]">
              {t('auth.noAccount')}{' '}
              <Link
                href="/register"
                className="text-[var(--color-brand-accent)] font-bold hover:underline"
              >
                {t('auth.signUp')}
              </Link>
            </p>
          </div>
        )}
      </div>
    </div>
  );
}

export function LoginForm(props: {
  allowRegister?: boolean;
  googleAuthEnabled?: boolean;
  authError?: string;
}) {
  return (
    <Suspense fallback={<div className="p-10 text-center text-sm text-muted-foreground">…</div>}>
      <LoginFormInner {...props} />
    </Suspense>
  );
}