'use client';

import React, { useState } from 'react';
import { useAuth } from '../../contexts/AuthContext';
import { Button } from '../ui/Button';
import { X, Mail, Lock, Eye, EyeOff } from 'lucide-react';

interface LoginModalProps {
  isOpen: boolean;
  onClose: () => void;
  onSwitchToSignup: () => void;
}

export function LoginModal({ isOpen, onClose, onSwitchToSignup }: LoginModalProps) {
  const { login, loginWithGoogle, loading, error } = useAuth();
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [showPassword, setShowPassword] = useState(false);
  const [formError, setFormError] = useState('');

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setFormError('');

    if (!email || !password) {
      setFormError('Wypełnij wszystkie pola');
      return;
    }

    try {
      await login({ email, password });
      onClose();
    } catch (err: any) {
      setFormError(err.message);
    }
  };

  const handleGoogleLogin = async () => {
    try {
      await loginWithGoogle();
      onClose();
    } catch (err: any) {
      setFormError(err.message);
    }
  };

  if (!isOpen) return null;

  return (
    <div 
      className="fixed inset-0 bg-red-500 bg-opacity-30 flex items-center justify-center z-[9999] p-4"
      style={{
        position: 'fixed',
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        zIndex: 9999
      }}
      onClick={onClose}
    >
      <div
        className="bg-yellow-300 border-4 border-red-500 rounded-2xl p-6 w-full max-w-md relative"
        style={{
          position: 'relative',
          backgroundColor: 'yellow',
          border: '4px solid red'
        }}
        onClick={(e) => e.stopPropagation()}
      >
        <div className="bg-white rounded-xl p-4">
        <button
          onClick={onClose}
          className="absolute top-4 right-4 p-2 rounded-full hover:bg-neutral-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary transition-colors cursor-pointer z-10"
          aria-label="Zamknij modal"
          type="button"
        >
          <X size={20} className="pointer-events-none" />
        </button>

        <div className="text-center mb-6">
          <h2 className="font-display text-2xl font-bold text-primary mb-2">Witaj ponownie</h2>
          <p className="text-neutral-600">Zaloguj się do swojego konta</p>
        </div>

        <form onSubmit={handleSubmit} className="space-y-4">
          <div>
            <label htmlFor="email" className="block text-sm font-medium text-neutral-700 mb-1">
              Email
            </label>
            <div className="relative">
              <Mail className="absolute left-3 top-1/2 transform -translate-y-1/2 text-neutral-400" size={18} />
              <input
                id="email"
                type="email"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                className="w-full pl-10 pr-4 py-2 border border-neutral-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-colors"
                placeholder="twoj@email.com"
                required
              />
            </div>
          </div>

          <div>
            <label htmlFor="password" className="block text-sm font-medium text-neutral-700 mb-1">
              Hasło
            </label>
            <div className="relative">
              <Lock className="absolute left-3 top-1/2 transform -translate-y-1/2 text-neutral-400" size={18} />
              <input
                id="password"
                type={showPassword ? 'text' : 'password'}
                value={password}
                onChange={(e) => setPassword(e.target.value)}
                className="w-full pl-10 pr-12 py-2 border border-neutral-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-colors"
                placeholder="••••••••"
                required
              />
              <button
                type="button"
                onClick={() => setShowPassword(!showPassword)}
                className="absolute right-3 top-1/2 transform -translate-y-1/2 text-neutral-400 hover:text-neutral-600 transition-colors"
                aria-label={showPassword ? 'Ukryj hasło' : 'Pokaż hasło'}
              >
                {showPassword ? <EyeOff size={18} /> : <Eye size={18} />}
              </button>
            </div>
          </div>

          {(formError || error) && (
            <div className="text-accent text-sm bg-accent/10 p-3 rounded-lg animate-fade-in">
              {formError || error}
            </div>
          )}

          <Button
            type="submit"
            variant="primary"
            className="w-full"
            disabled={loading}
          >
            {loading ? 'Logowanie...' : 'Zaloguj się'}
          </Button>
        </form>

        <div className="my-4 text-center">
          <span className="text-neutral-500">lub</span>
        </div>

        <Button
          onClick={handleGoogleLogin}
          variant="secondary"
          className="w-full"
          disabled={loading}
        >
          {loading ? 'Logowanie...' : 'Zaloguj się przez Google'}
        </Button>

        <div className="mt-6 text-center">
          <p className="text-neutral-600">
            Nie masz konta?{' '}
            <button
              onClick={onSwitchToSignup}
              className="text-primary hover:underline font-medium transition-colors"
            >
              Zarejestruj się
            </button>
          </p>
        </div>
        </div>
      </div>
    </div>
  );
}