// frontend/src/components/modal/Login.tsx
'use client';
import { useState, CSSProperties, useCallback, useEffect } from 'react';

// Улучшенные стили с градиентами и эффектами
const wrapper: CSSProperties = {
  position: 'fixed',
  inset: 0,
  background: 'rgba(0,0,0,.7)',
  backdropFilter: 'blur(12px)',
  display: 'flex',
  justifyContent: 'center',
  alignItems: 'center',
  zIndex: 1000,
  transition: 'all 0.3s ease',
};

const modal: CSSProperties = {
  position: 'relative',
  background: 'linear-gradient(145deg, #0a0a0a, #1a1a1a)',
  border: '1px solid #ff7f27',
  borderRadius: 24,
  padding: 40,
  minWidth: 400,
  maxWidth: '90vw',
  color: '#ff7f27',
  boxShadow: '0 8px 40px rgba(255,127,39,.25), 0 0 0 1px rgba(255,127,39,0.1)',
  transformOrigin: 'center',
  transition: 'transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275)',
  animation: 'loginCardAppear 0.4s forwards',
};

const closeBtn: CSSProperties = {
  position: 'absolute',
  top: 16,
  right: 16,
  background: 'rgba(0,0,0,0.4)',
  border: '1px solid rgba(255,127,39,0.3)',
  fontSize: 20,
  color: '#ff7f27',
  cursor: 'pointer',
  width: 36,
  height: 36,
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  borderRadius: '50%',
  transition: 'all 0.2s',
};

const input: CSSProperties = {
  width: '100%',
  padding: '12px 16px',
  margin: '8px 0 20px',
  border: '1px solid rgba(255,127,39,0.6)',
  borderRadius: 12,
  background: 'rgba(0,0,0,0.2)',
  color: '#fff',
  fontSize: 15,
  outline: 'none',
  transition: 'all 0.2s',
  boxShadow: 'inset 0 1px 3px rgba(0,0,0,0.2)',
};

const label: CSSProperties = { 
  fontSize: 14, 
  fontWeight: 'bold',
  color: 'rgba(255,255,255,0.9)',
  letterSpacing: '0.5px',
};

// Стили для капчи
const captchaContainer: CSSProperties = {
  marginBottom: 20,
  border: '1px solid rgba(255,127,39,0.3)',
  borderRadius: 12,
  padding: 15,
  background: 'rgba(255,127,39,0.05)',
};

const captchaCanvas: CSSProperties = {
  width: '100%',
  height: 80,
  marginBottom: 10,
  borderRadius: 8,
  background: 'rgba(0,0,0,0.3)',
  border: '1px solid rgba(255,127,39,0.3)',
};

const styles = `
@keyframes loginCardAppear {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes pulseGlow {
  0% {
    box-shadow: 0 0 5px rgba(255,127,39,0.3);
  }
  50% {
    box-shadow: 0 0 20px rgba(255,127,39,0.5);
  }
  100% {
    box-shadow: 0 0 5px rgba(255,127,39,0.3);
  }
}

input:focus {
  border-color: #ff7f27;
  box-shadow: 0 0 0 2px rgba(255,127,39,0.2), inset 0 1px 3px rgba(0,0,0,0.2);
}

button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
`;

interface Props {
  onSuccess: (u: { login: string; avatar: string }) => void;
  onClose: () => void;
  onRegisterClick?: () => void;  // Делаем необязательным
}

/* Исправленные вспомогательные функции */
const readCookie = (name: string) => {
  const value = document.cookie
    .split('; ')
    .find((c) => c.startsWith(`${name}=`))
    ?.split('=')[1];
  
  if (!value) return null;
  
  // Декодируем URL-закодированное значение
  try {
    return decodeURIComponent(value);
  } catch {
    return value; // Если не URL-кодированное значение, вернуть как есть
  }
};

const sanitizeAvatar = (v: string) => v.replace(/"/g, '').replace(/\\\\/g, '/');

export default function LoginModal({ onSuccess, onClose, onRegisterClick }: Props) {
  const [login, setLogin] = useState('');
  const [password, setPassword] = useState('');
  const [error, setError] = useState<string | null>(null);
  const [loading, setLoading] = useState(false);
  
  // Состояния для капчи
  const [captchaText, setCaptchaText] = useState('');
  const [userCaptcha, setUserCaptcha] = useState('');
  const [captchaValidated, setCaptchaValidated] = useState(false);
  
  // Генерация капчи при загрузке компонента
  useEffect(() => {
    generateCaptcha();
  }, []);
  
  // Функция генерации капчи
  const generateCaptcha = () => {
    const canvas = document.getElementById('captchaCanvasLogin') as HTMLCanvasElement;
    if (!canvas) return;
    
    const ctx = canvas.getContext('2d');
    if (!ctx) return;
    
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    
    // Установка фона
    ctx.fillStyle = 'rgba(0,0,0,0.7)';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    
    // Генерация случайного текста
    const chars = 'ABCDEFGHJKLMNPQRSTUVWXYZabcdefghjkmnpqrstuvwxyz23456789';
    let captchaString = '';
    
    for (let i = 0; i < 6; i++) {
      captchaString += chars.charAt(Math.floor(Math.random() * chars.length));
    }
    
    setCaptchaText(captchaString);
    
    // Отрисовка текста
    ctx.font = 'bold 28px Arial';
    ctx.fillStyle = '#ff7f27';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    
    // Добавляем искажения для защиты
    for (let i = 0; i < captchaString.length; i++) {
      const x = (canvas.width / (captchaString.length + 1)) * (i + 1);
      const y = canvas.height / 2 + Math.random() * 10 - 5;
      const angle = Math.random() * 0.4 - 0.2;
      
      ctx.save();
      ctx.translate(x, y);
      ctx.rotate(angle);
      ctx.fillText(captchaString[i], 0, 0);
      ctx.restore();
    }
    
    // Добавляем шум
    for (let i = 0; i < 100; i++) {
      ctx.fillStyle = `rgba(255,127,39,${Math.random() * 0.3})`;
      ctx.fillRect(Math.random() * canvas.width, Math.random() * canvas.height, 2, 2);
    }
    
    // Добавляем линии
    for (let i = 0; i < 4; i++) {
      ctx.beginPath();
      ctx.moveTo(Math.random() * canvas.width, Math.random() * canvas.height);
      ctx.lineTo(Math.random() * canvas.width, Math.random() * canvas.height);
      ctx.strokeStyle = `rgba(255,127,39,${Math.random() * 0.5})`;
      ctx.lineWidth = 1;
      ctx.stroke();
    }
    
    // Сбрасываем ввод пользователя
    setUserCaptcha('');
    setCaptchaValidated(false);
  };
  
  // Валидация капчи
  const validateCaptcha = () => {
    if (userCaptcha.toLowerCase() === captchaText.toLowerCase()) {
      setCaptchaValidated(true);
      return true;
    } else {
      setCaptchaValidated(false);
      setError('Неверный код с картинки. Попробуйте еще раз.');
      generateCaptcha();
      return false;
    }
  };

  const handleLogin = useCallback(async () => {
    if (!login || !password || loading) return;
    
    // Проверяем капчу
    if (!captchaValidated && !validateCaptcha()) {
      return;
    }
    
    setLoading(true);
    setError(null);

    try {
      const res = await fetch('http://localhost:8000/login', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ login, password }),
        credentials: 'include', // Важно для сохранения и отправки куки
      });

      const data = await res.json();
      if (!res.ok) throw new Error(data.detail || 'Ошибка авторизации');

      console.log("Ответ от сервера:", data);

      // Проверка, сохранился ли JWT в куки
      setTimeout(() => {
        const jwtCookie = document.cookie
          .split('; ')
          .find(c => c.startsWith('JWT_token='))
          ?.split('=')[1];

        console.log("JWT токен в куки:", jwtCookie ? `${jwtCookie.substring(0, 10)}...` : "отсутствует");

        // Если JWT нет в куках, но он есть в ответе, сохраним его вручную
        if (!jwtCookie && data.token) {
          console.log("Сохраняем JWT вручную");
          document.cookie = `JWT_token=${data.token}; path=/; max-age=${60*60*24*7}`;
        }

        const userLogin = readCookie('login') || data.login;
        const userAvatar = readCookie('avatar') || '/default-avatar.png';

        if (userLogin) {
          onSuccess({ 
            login: userLogin, 
            avatar: userAvatar ? sanitizeAvatar(userAvatar) : '/default-avatar.png'
          });
          onClose();
        } else {
          throw new Error('Не удалось получить данные пользователя');
        }
      }, 300);
      
    } catch (e: unknown) {
      if (e instanceof Error) {
        setError(e.message);
      } else {
        setError('Произошла неизвестная ошибка');
      }
    } finally {
      setLoading(false);
    }
  }, [login, password, loading, captchaValidated, onSuccess, onClose, validateCaptcha]);

  // Обработчик нажатия Enter
  const handleKeyDown = (e: React.KeyboardEvent) => {
    if (e.key === 'Enter') {
      e.preventDefault();
      handleLogin();
    }
  };

  // Обработчик клика на фоне
  const handleWrapperClick = (e: React.MouseEvent) => {
    if (e.target === e.currentTarget) {
      onClose();
    }
  };

  return (
    <div style={wrapper} onClick={handleWrapperClick}>
      <style>{styles}</style>
      <div style={modal}>
        <button 
          onClick={onClose} 
          style={closeBtn}
          aria-label="Закрыть"
          onMouseOver={(e) => {
            e.currentTarget.style.background = 'rgba(255,127,39,0.2)';
            e.currentTarget.style.transform = 'scale(1.1)';
          }}
          onMouseOut={(e) => {
            e.currentTarget.style.background = 'rgba(0,0,0,0.4)';
            e.currentTarget.style.transform = 'scale(1)';
          }}
        >
          ✕
        </button>

        <h2 style={{
          textAlign: 'center',
          fontSize: 28,
          marginBottom: 24,
          fontWeight: 'bold',
          textShadow: '0 2px 10px rgba(255,127,39,0.3)',
          background: 'linear-gradient(to right, #ff7f27, #ff5500)',
          WebkitBackgroundClip: 'text',
          WebkitTextFillColor: 'transparent',
        }}>
          Авторизация
        </h2>

        {error && (
          <div style={{
            color: '#ff3333',
            marginBottom: 20,
            padding: '8px 12px',
            borderRadius: 8,
            background: 'rgba(255,51,51,0.1)',
            border: '1px solid rgba(255,51,51,0.3)',
            animation: 'loginCardAppear 0.3s forwards',
          }}>
            {error}
          </div>
        )}

        <label style={label}>Логин</label>
        <input
          type="text"
          placeholder="Введите логин"
          style={input}
          value={login}
          onChange={(e) => setLogin(e.target.value)}
          onKeyDown={handleKeyDown}
        />

        <label style={label}>Пароль</label>
        <input
          type="password"
          placeholder="Введите пароль"
          style={input}
          value={password}
          onChange={(e) => setPassword(e.target.value)}
          onKeyDown={handleKeyDown}
        />

        {/* Капча вместо чекбокса "Я человек" */}
        <div style={captchaContainer}>
          
          <canvas 
            id="captchaCanvasLogin" 
            width="300" 
            height="80" 
            style={captchaCanvas}
          />
          
          <div style={{ display: 'flex', gap: 10 }}>
            <input
              type="text"
              placeholder="Введите текст с картинки"
              style={{...input, margin: 0, flex: 1}}
              value={userCaptcha}
              onChange={(e) => setUserCaptcha(e.target.value)}
            />
            <button 
              style={{
                background: 'transparent',
                border: '1px solid #ff7f27',
                borderRadius: 8,
                color: '#ff7f27',
                cursor: 'pointer',
                padding: '0 15px'
              }}
              onClick={generateCaptcha}
              type="button"
            >
              ↻
            </button>
            <button 
              style={{
                background: 'rgba(255,127,39,0.1)',
                border: '1px solid #ff7f27',
                borderRadius: 8,
                color: '#ff7f27',
                cursor: 'pointer',
                padding: '0 15px'
              }}
              onClick={validateCaptcha}
              type="button"
            >
              Проверить
            </button>
          </div>
          
          {captchaValidated && (
            <div style={{ 
              color: '#4caf50', 
              marginTop: 10, 
              fontSize: 14,
              display: 'flex',
              alignItems: 'center',
              gap: 5
            }}>
              <span style={{
                fontSize: 16,
                fontWeight: 'bold'
              }}>✓</span>
              Проверка пройдена
            </div>
          )}
        </div>

        <div style={{
          display: 'flex',
          justifyContent: 'flex-end',
          alignItems: 'center',
          margin: '0 0 24px',
        }}>
          <a 
            href="#" 
            style={{ 
              color: '#ff7f27',
              textDecoration: 'none',
              fontSize: 14,
              transition: 'all 0.2s'
            }}
            onMouseOver={e => { 
              e.currentTarget.style.textDecoration = 'underline';
              e.currentTarget.style.textShadow = '0 0 8px rgba(255,127,39,0.5)';
            }}
            onMouseOut={e => { 
              e.currentTarget.style.textDecoration = 'none';
              e.currentTarget.style.textShadow = 'none';
            }}
          >
            Восстановить пароль
          </a>
        </div>

        <HoverButton 
          label={loading ? "Входим..." : "Войти"} 
          filled 
          onClick={handleLogin}
          disabled={loading || !login || !password} 
        />
        
        <div style={{
          margin: '24px 0 8px',
          textAlign: 'center',
          fontSize: 14,
          color: 'rgba(255,255,255,0.6)',
          position: 'relative',
        }}>
          <span style={{
            background: 'linear-gradient(145deg, #0a0a0a, #1a1a1a)',
            padding: '0 10px',
            position: 'relative',
            zIndex: 1,
          }}>Нет аккаунта?</span>
          <div style={{
            position: 'absolute',
            top: '50%',
            left: 0,
            right: 0,
            height: 1,
            background: 'rgba(255,255,255,0.1)',
            zIndex: 0,
          }}></div>
        </div>
        
        <HoverButton 
          label="Зарегистрироваться" 
          onClick={() => {
            onClose();
            // Добавляем проверку, чтобы избежать ошибки
            if (typeof onRegisterClick === 'function') {
              onRegisterClick();
            }
          }}
        />
      </div>
    </div>
  );
}

type BtnProps = { label: string; filled?: boolean; onClick?: () => void; disabled?: boolean };

function HoverButton({ label, filled = false, onClick, disabled = false }: BtnProps) {
  const [state, set] = useState<'idle' | 'hover' | 'active'>('idle');

  const base: CSSProperties = {
    width: '100%',
    padding: 14,
    borderRadius: 12,
    fontWeight: 'bold',
    fontSize: 16,
    cursor: disabled ? 'default' : 'pointer',
    transition: 'all .3s',
    marginTop: 8,
  };

  const filledBg = state === 'active' 
    ? '#cc5e00' 
    : state === 'hover' 
      ? 'linear-gradient(145deg, #ff7f27, #e96c00)'
      : 'linear-gradient(145deg, #ff7f27, #ff5500)';

  const style: CSSProperties = filled
    ? {
        ...base,
        background: filledBg,
        color: '#000',
        border: 0,
        boxShadow: state === 'hover' ? '0 4px 15px rgba(255,127,39,0.4)' : '0 2px 10px rgba(255,127,39,0.3)',
        transform: state === 'hover' && !disabled ? 'translateY(-2px)' : 'translateY(0)',
      }
    : {
        ...base,
        background:
          state === 'active'
            ? 'rgba(255,127,39,.2)'
            : state === 'hover'
            ? 'rgba(255,127,39,.1)'
            : 'transparent',
        border: '1px solid #ff7f27',
        color: '#fff',
        transform: state === 'hover' && !disabled ? 'translateY(-1px)' : 'translateY(0)',
      };

  return (
    <button
      disabled={disabled}
      style={{ ...style, opacity: disabled ? 0.7 : 1 }}
      onMouseEnter={() => !disabled && set('hover')}
      onMouseLeave={() => !disabled && set('idle')}
      onMouseDown={() => !disabled && set('active')}
      onMouseUp={() => !disabled && set('hover')}
      onClick={disabled ? undefined : onClick}
    >
      {label}
    </button>
  );
}
