import React, { useState, useEffect } from "react";
import { useNavigate, useSearchParams, Link } from "react-router-dom";
import { useAppDispatch, useAppSelector } from "../store/hooks";
import { setAuth } from "../store/slices/authSlice";
import { authApi } from "../api/authApi";
import { userApi } from "../api/userApi";
import { useNotification } from "../hooks/useNotification";
import { ThemeToggle } from "../components/common/ThemeToggle";
import { Icon } from "@iconify/react";
import { dbManager } from "../utils/indexedDB";

const LoginPage: React.FC = () => {
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  const [twoFactorCode, setTwoFactorCode] = useState("");
  const [isLoading, setIsLoading] = useState(false);
  const [requires2FA, setRequires2FA] = useState(false);
  const navigate = useNavigate();
  const dispatch = useAppDispatch();
  const { showNotification } = useNotification();
  const isAuthenticated = useAppSelector((state) => state.auth.isAuthenticated);
  const currentUserId = useAppSelector((state) => state.auth.userId);
  const [searchParams] = useSearchParams();

  useEffect(() => {
    if (isAuthenticated) {
      navigate("/notes");
    }
  }, [isAuthenticated, navigate]);

  useEffect(() => {
    // Проверяем наличие ошибки в URL
    if (searchParams.get("error") === "invalid_password") {
      showNotification("Неверный пароль!", "error");
    }
  }, [searchParams, showNotification]);

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

    if (!username.trim() || !password) {
      showNotification("Логин и пароль обязательны", "error");
      return;
    }

    setIsLoading(true);

    try {
      console.log("Attempting login...");
      const data = await authApi.login(username, password);
      console.log("Login response:", data);

      // Проверяем, требуется ли 2FA
      if (data.requires2FA) {
        setRequires2FA(true);
        showNotification("Введите код двухфакторной аутентификации", "info");
        setIsLoading(false);
        return;
      }

      // Если 2FA не требуется и аутентификация успешна, продолжаем как обычно
      if (data.authenticated) {
        await completeLogin();
      } else {
        showNotification(data.message || "Ошибка входа", "error");
      }
    } catch (error: any) {
      console.error("Login error details:", error);
      console.error("Error response:", error.response);
      console.error("Error response data:", error.response?.data);

      let errorMsg = "Ошибка соединения с сервером";

      if (error.response) {
        // Сервер ответил, но с ошибкой (например, 401 для неверного пароля)
        const responseData = error.response.data;
        console.log("Response data:", responseData);
        
        // Если это ошибка авторизации (401), показываем сообщение от сервера
        if (error.response.status === 401) {
          errorMsg = responseData?.error || "Неверный логин или пароль";
          console.log("401 error message:", errorMsg);
        } else {
          // Для других ошибок показываем общее сообщение
          errorMsg = responseData?.error || `Ошибка ${error.response.status}`;
        }
      } else if (error.request) {
        // Запрос был отправлен, но ответа нет
        console.error("No response from server");
        errorMsg =
          "Сервер не отвечает. Проверьте, запущен ли backend на порту 3001";
      } else {
        // Ошибка при настройке запроса
        console.error("Request setup error:", error.message);
        errorMsg = error.message || "Ошибка соединения с сервером";
      }

      console.log("Showing error notification:", errorMsg);
      showNotification(errorMsg, "error");
    } finally {
      setIsLoading(false);
    }
  };

  const completeLogin = async () => {
    try {
      // Получаем информацию о пользователе
      const authStatus = await authApi.checkStatus();
      const newUserId = authStatus.userId!;

      // Если пользователь изменился, очищаем IndexedDB
      if (currentUserId && currentUserId !== newUserId) {
        console.log(
          `[Login] User changed from ${currentUserId} to ${newUserId}, clearing IndexedDB`
        );
        await dbManager.clearAll();
      }

      dispatch(
        setAuth({
          userId: newUserId,
          username: authStatus.username!,
        })
      );
      showNotification("Успешный вход!", "success");
      navigate("/notes");
    } catch (error) {
      console.error("Ошибка завершения входа:", error);
      showNotification("Ошибка завершения входа", "error");
    }
  };

  const handle2FAVerify = async (e: React.FormEvent) => {
    e.preventDefault();

    if (!twoFactorCode.trim()) {
      showNotification("Введите код двухфакторной аутентификации", "warning");
      return;
    }

    setIsLoading(true);

    try {
      const data = await userApi.verify2FA(username, twoFactorCode.trim());

      if (data.success) {
        if (data.backupCodeUsed) {
          showNotification("Вход выполнен с использованием резервного кода", "info");
        }
        await completeLogin();
      } else {
        showNotification(data.message || "Неверный код", "error");
      }
    } catch (error: any) {
      console.error("Ошибка проверки 2FA:", error);
      const errorMsg =
        error.response?.data?.error || "Ошибка проверки кода";
      showNotification(errorMsg, "error");
    } finally {
      setIsLoading(false);
    }
  };

  const handleBack = () => {
    setRequires2FA(false);
    setTwoFactorCode("");
    setPassword("");
  };

  return (
    <div className="container">
      <header>
        <div
          style={{
            display: "flex",
            alignItems: "center",
            justifyContent: "space-between",
          }}
        >
          <span>
            <Icon icon="mdi:login" /> Вход в систему
          </span>
          <ThemeToggle />
        </div>
      </header>
      <div className="login-form">
        {!requires2FA ? (
          <form id="loginForm" onSubmit={handleSubmit}>
            <div className="form-group">
              <label htmlFor="username">Логин:</label>
              <input
                type="text"
                id="username"
                name="username"
                value={username}
                onChange={(e) => setUsername(e.target.value)}
                required
                placeholder="Введите ваш логин"
                disabled={isLoading}
              />
            </div>
            <div className="form-group">
              <label htmlFor="password">Пароль:</label>
              <input
                type="password"
                id="password"
                name="password"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
                required
                placeholder="Введите пароль"
                disabled={isLoading}
              />
            </div>
            <button type="submit" className="btnSave" disabled={isLoading}>
              {isLoading ? "Вход..." : "Войти"}
            </button>
          </form>
        ) : (
          <form id="2faForm" onSubmit={handle2FAVerify}>
            <div
              style={{
                backgroundColor: "var(--card-bg)",
                border: "1px solid var(--border-color)",
                borderRadius: "8px",
                padding: "20px",
                marginBottom: "20px",
              }}
            >
              <div
                style={{
                  display: "flex",
                  alignItems: "center",
                  gap: "10px",
                  marginBottom: "15px",
                }}
              >
                <Icon
                  icon="mdi:shield-lock"
                  style={{ fontSize: "24px", color: "var(--accent-color)" }}
                />
                <h3 style={{ margin: 0 }}>Двухфакторная аутентификация</h3>
              </div>
              <p style={{ color: "#666", fontSize: "14px", marginBottom: "20px" }}>
                Введите 6-значный код из приложения-аутентификатора или
                резервный код:
              </p>
              <div className="form-group">
                <label htmlFor="twoFactorCode">Код:</label>
                <input
                  type="text"
                  id="twoFactorCode"
                  name="twoFactorCode"
                  value={twoFactorCode}
                  onChange={(e) => {
                    // Разрешаем цифры и заглавные буквы (для резервных кодов)
                    const value = e.target.value
                      .toUpperCase() // Преобразуем в заглавные буквы
                      .replace(/[^A-Z0-9]/g, "") // Удаляем все кроме букв и цифр
                      .slice(0, 10); // Ограничиваем длину
                    setTwoFactorCode(value);
                  }}
                  required
                  placeholder="000000 или резервный код"
                  disabled={isLoading}
                  autoFocus
                  style={{
                    textAlign: "center",
                    fontSize: "20px",
                    letterSpacing: "4px",
                    fontFamily: "monospace",
                  }}
                />
              </div>
              <div style={{ display: "flex", gap: "10px" }}>
                <button
                  type="submit"
                  className="btnSave"
                  disabled={isLoading || !twoFactorCode.trim()}
                >
                  {isLoading ? "Проверка..." : "Продолжить"}
                </button>
                <button
                  type="button"
                  className="btn-danger"
                  onClick={handleBack}
                  disabled={isLoading}
                >
                  Назад
                </button>
              </div>
            </div>
          </form>
        )}
        {!requires2FA && (
          <p className="auth-link">
            Нет аккаунта? <Link to="/register">Зарегистрируйтесь</Link>
          </p>
        )}
      </div>
    </div>
  );
};

export default LoginPage;
