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

const RegisterPage: React.FC = () => {
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  const [confirmPassword, setConfirmPassword] = useState("");
  const [isLoading, setIsLoading] = useState(false);
  const navigate = useNavigate();
  const dispatch = useAppDispatch();
  const { showNotification } = useNotification();
  const isAuthenticated = useAppSelector((state) => state.auth.isAuthenticated);

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

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

    // Клиентская валидация
    if (!username.trim() || !password || !confirmPassword) {
      showNotification("Все поля обязательны", "error");
      return;
    }

    if (username.length < 3) {
      showNotification("Логин должен быть не менее 3 символов", "error");
      return;
    }

    if (password.length < 6) {
      showNotification("Пароль должен быть не менее 6 символов", "error");
      return;
    }

    if (password !== confirmPassword) {
      showNotification("Пароли не совпадают", "error");
      return;
    }

    setIsLoading(true);

    try {
      console.log("Attempting registration...");
      const data = await authApi.register(username, password, confirmPassword);
      console.log("Register response:", data);

      if (data.success) {
        // Получаем информацию о пользователе
        const authStatus = await authApi.checkStatus();
        const newUserId = authStatus.userId!;
        
        // При регистрации нового пользователя всегда очищаем IndexedDB
        // (на случай, если в базе остались данные предыдущего пользователя)
        await dbManager.clearAll();
        
        dispatch(
          setAuth({
            userId: newUserId,
            username: authStatus.username!,
          })
        );
        showNotification("Регистрация успешна!", "success");
        navigate("/notes");
      } else {
        showNotification(data.error || "Ошибка регистрации", "error");
      }
    } catch (error: any) {
      console.error("Register error details:", error);
      console.error("Error response:", error.response);
      console.error("Error message:", error.message);

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

      if (error.response) {
        // Сервер ответил, но с ошибкой
        errorMsg =
          error.response.data?.error || `Ошибка ${error.response.status}`;
      } else if (error.request) {
        // Запрос был отправлен, но ответа нет
        errorMsg =
          "Сервер не отвечает. Проверьте, запущен ли backend на порту 3000";
      } else {
        // Ошибка при настройке запроса
        errorMsg = error.message || "Ошибка соединения с сервером";
      }

      showNotification(errorMsg, "error");
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <div className="container">
      <header>
        <div
          style={{
            display: "flex",
            alignItems: "center",
            justifyContent: "space-between",
          }}
        >
          <span>
            <Icon icon="mdi:account-plus" /> Регистрация
          </span>
          <ThemeToggle />
        </div>
      </header>
      <div className="login-form">
        <form id="registerForm" 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="Введите ваш логин (мин. 3 символа)"
            />
          </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="Введите пароль (мин. 6 символов)"
            />
          </div>
          <div className="form-group">
            <label htmlFor="confirmPassword">Подтвердите пароль:</label>
            <input
              type="password"
              id="confirmPassword"
              name="confirmPassword"
              value={confirmPassword}
              onChange={(e) => setConfirmPassword(e.target.value)}
              required
              placeholder="Подтвердите пароль"
            />
          </div>
          <button type="submit" className="btnSave" disabled={isLoading}>
            {isLoading ? "Регистрация..." : "Зарегистрироваться"}
          </button>
        </form>
        <p className="auth-link">
          Уже есть аккаунт? <Link to="/">Войдите</Link>
        </p>
      </div>
    </div>
  );
};

export default RegisterPage;
