'use client';

import { useState, useEffect } from 'react';
import Link from 'next/link';
import { usePathname, useSearchParams } from 'next/navigation';
import { useLanguage } from '@/context/LanguageContext';
import { useAuth } from '@/context/AuthContext';
import Card from '@/components/ui/Card';
import Button from '@/components/ui/Button';
import Input from '@/components/ui/Input';
import GoogleSignInButton from '@/components/GoogleSignInButton';
import { authApi } from '@/lib/api';
import { XMarkIcon } from '@heroicons/react/24/outline';
import toast from 'react-hot-toast';

interface LoginModalProps {
  open: boolean;
  onClose: () => void;
  /** Called after a successful password login (Google logins reload the page). */
  onSuccess?: () => void;
  /** Optional context line shown under the title (e.g. why login is needed). */
  message?: string;
}

/**
 * Reusable login pop-up: same capabilities as /login (password,
 * magic link, Google) but inline, so the visitor stays on the page —
 * used by gated photo galleries.
 */
export default function LoginModal({ open, onClose, onSuccess, message }: LoginModalProps) {
  const { t, locale } = useLanguage();
  const es = locale === 'es';
  const { login } = useAuth();
  const pathname = usePathname();
  const searchParams = useSearchParams();

  const [mode, setMode] = useState<'password' | 'magic-link'>('password');
  const [magicLinkSent, setMagicLinkSent] = useState(false);
  const [loading, setLoading] = useState(false);
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  // Google logins hard-reload; send them back to exactly where they are
  // (including a ?token= share link).
  const query = searchParams.toString();
  const currentUrl = query ? `${pathname}?${query}` : pathname;

  useEffect(() => {
    if (!open) return;
    const onKey = (e: KeyboardEvent) => {
      if (e.key === 'Escape') onClose();
    };
    window.addEventListener('keydown', onKey);
    document.body.style.overflow = 'hidden';
    return () => {
      window.removeEventListener('keydown', onKey);
      document.body.style.overflow = '';
    };
  }, [open, onClose]);

  if (!open) return null;

  const handlePasswordLogin = async (e: React.FormEvent) => {
    e.preventDefault();
    setLoading(true);
    try {
      await login(email, password);
      toast.success(es ? '¡Bienvenido!' : 'Welcome back!');
      onClose();
      onSuccess?.();
    } catch (error) {
      toast.error(error instanceof Error ? error.message : t('auth.errors.invalidCredentials'));
    } finally {
      setLoading(false);
    }
  };

  const handleMagicLink = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!email) {
      toast.error(es ? 'Ingresa tu email' : 'Please enter your email');
      return;
    }
    setLoading(true);
    try {
      await authApi.requestMagicLink(email);
      setMagicLinkSent(true);
      toast.success(es ? 'Revisa tu correo para el enlace de acceso' : 'Check your email for the login link');
    } catch (error) {
      toast.error(error instanceof Error ? error.message : es ? 'Error' : 'Failed');
    } finally {
      setLoading(false);
    }
  };

  return (
    <div
      className="fixed inset-0 bg-black/60 z-50 flex items-center justify-center p-4"
      onClick={onClose}
      role="dialog"
      aria-modal="true"
    >
      <Card className="w-full max-w-md p-6 md:p-8" onClick={(e) => e.stopPropagation()}>
        <div className="flex items-start justify-between mb-1">
          <h2 className="text-xl font-bold text-primary-dark">{t('auth.login.title')}</h2>
          <button onClick={onClose} className="text-gray-400 hover:text-gray-600 p-1 -m-1" aria-label="Close">
            <XMarkIcon className="w-6 h-6" />
          </button>
        </div>
        {message && <p className="text-sm text-gray-600 mb-4">{message}</p>}

        <div className="mt-4">
          <GoogleSignInButton redirectTo={currentUrl} />
        </div>

        <div className="flex items-center gap-3 my-5">
          <div className="flex-1 h-px bg-secondary-light-gray" />
          <span className="text-xs text-gray-500">{es ? 'o' : 'or'}</span>
          <div className="flex-1 h-px bg-secondary-light-gray" />
        </div>

        {mode === 'password' ? (
          <form onSubmit={handlePasswordLogin} className="space-y-4">
            <Input
              id="login-modal-email"
              label={t('auth.login.email')}
              type="email"
              required
              value={email}
              onChange={(e) => setEmail(e.target.value)}
            />
            <Input
              id="login-modal-password"
              label={t('auth.login.password')}
              type="password"
              required
              value={password}
              onChange={(e) => setPassword(e.target.value)}
            />
            <Button type="submit" className="w-full" isLoading={loading}>
              {t('auth.login.submit')}
            </Button>
          </form>
        ) : magicLinkSent ? (
          <p className="text-sm text-gray-600 text-center py-4">
            {es
              ? 'Te enviamos un enlace de acceso. Abre tu correo y vuelve a esta página.'
              : 'We sent you a login link. Open your email and come back to this page.'}
          </p>
        ) : (
          <form onSubmit={handleMagicLink} className="space-y-4">
            <Input
              id="login-modal-magic-email"
              label={t('auth.login.email')}
              type="email"
              required
              value={email}
              onChange={(e) => setEmail(e.target.value)}
            />
            <Button type="submit" className="w-full" isLoading={loading}>
              {es ? 'Enviarme un enlace de acceso' : 'Email me a login link'}
            </Button>
          </form>
        )}

        <div className="mt-4 flex items-center justify-between text-sm">
          <button
            type="button"
            onClick={() => {
              setMode(mode === 'password' ? 'magic-link' : 'password');
              setMagicLinkSent(false);
            }}
            className="text-secondary-blue hover:underline"
          >
            {mode === 'password'
              ? es
                ? 'Entrar con enlace por correo'
                : 'Log in with an email link'
              : es
                ? 'Entrar con contraseña'
                : 'Log in with a password'}
          </button>
          <Link href="/register" className="text-secondary-blue hover:underline" onClick={onClose}>
            {es ? 'Crear cuenta' : 'Create account'}
          </Link>
        </div>
      </Card>
    </div>
  );
}