import React, { useState, useEffect, useCallback, useMemo } from "react";
import { useNavigate } from "react-router-dom";
import { useWallet } from "../context/WalletContext";
import { useTranslation } from "react-i18next";
import { BIP39_WORDS } from "../utils/bip39-words";
import { useAuthProgress } from "../hooks/useAuthProgress";

const LoginPage = () => {
  const navigate = useNavigate();
  const { t } = useTranslation();
  const { login, createNewWallet, isAuthenticated } = useWallet();
  const { saveProgress, clearProgress, restoreFormData, isLoaded } =
    useAuthProgress();

  // Trust Wallet style component
  // // console.log("LoginPage with TrustLogo loaded"); // Удалено для предотвращения бесконечного цикла // Удалено для предотвращения бесконечного цикла

  // Состояние формы с автосохранением
  const [formState, setFormState] = useState({
    mode: null,
    mnemonic: "",
    password: "",
    confirmPassword: "",
    username: "",
    generatedMnemonic: "",
    loading: false,
    error: "",
    step: 1,
    isNewUser: true,
    showPassword: false,
    showConfirmPassword: false,
    showMnemonic: false,
  });

  // Извлекаем значения из состояния для удобства
  const {
    mode,
    setMode,
    mnemonic,
    setMnemonic,
    password,
    setPassword,
    confirmPassword,
    setConfirmPassword,
    username,
    setUsername,
    generatedMnemonic,
    setGeneratedMnemonic,
    loading,
    setLoading,
    error,
    setError,
    step,
    setStep,
    isNewUser,
    setIsNewUser,
    showPassword,
    setShowPassword,
    showConfirmPassword,
    setShowConfirmPassword,
    showMnemonic,
    setShowMnemonic,
  } = {
    mode: formState.mode,
    setMode: (value) => updateFormState("mode", value),
    mnemonic: formState.mnemonic,
    setMnemonic: (value) => updateFormState("mnemonic", value),
    password: formState.password,
    setPassword: (value) => updateFormState("password", value),
    confirmPassword: formState.confirmPassword,
    setConfirmPassword: (value) => updateFormState("confirmPassword", value),
    username: formState.username,
    setUsername: (value) => updateFormState("username", value),
    generatedMnemonic: formState.generatedMnemonic,
    setGeneratedMnemonic: (value) =>
      updateFormState("generatedMnemonic", value),
    loading: formState.loading,
    setLoading: (value) => updateFormState("loading", value),
    error: formState.error,
    setError: (value) => updateFormState("error", value),
    step: formState.step,
    setStep: (value) => updateFormState("step", value),
    isNewUser: formState.isNewUser,
    setIsNewUser: (value) => updateFormState("isNewUser", value),
    showPassword: formState.showPassword,
    setShowPassword: (value) => updateFormState("showPassword", value),
    showConfirmPassword: formState.showConfirmPassword,
    setShowConfirmPassword: (value) =>
      updateFormState("showConfirmPassword", value),
    showMnemonic: formState.showMnemonic,
    setShowMnemonic: (value) => updateFormState("showMnemonic", value),
  };

  // Функция для обновления состояния формы с автосохранением
  const updateFormState = (key, value) => {
    setFormState((prev) => {
      const newState = { ...prev, [key]: value };

      // Автосохранение прогресса (кроме чувствительных данных)
      if (
        isLoaded &&
        key !== "password" &&
        key !== "confirmPassword" &&
        key !== "mnemonic" &&
        key !== "generatedMnemonic"
      ) {
        saveProgress({
          mode: newState.mode,
          step: newState.step,
          isNewUser: newState.isNewUser,
          agreeToTerms: agreeToTerms,
          username: newState.username,
        });
      }

      return newState;
    });
  };

  // Валидация пароля
  const [passwordValidation, setPasswordValidation] = useState({
    minLength: false,
    hasUpperCase: false,
    hasNumber: false,
    hasSpecialChar: false,
  });

  // Валидация мнемоники
  const [mnemonicValidation, setMnemonicValidation] = useState({
    isValid: false,
    wordCount: 0,
    errorMessage: "",
  });

  // Состояние согласия с правилами сервиса
  const [agreeToTerms, setAgreeToTerms] = useState(false);
  const [showQrSyncModal, setShowQrSyncModal] = useState(false);

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

  useEffect(() => {
    if (isLoaded) {
      // Восстанавливаем прогресс или создаем новый username
      const restoredData = restoreFormData({
        step: 1,
        mode: null,
        isNewUser: true,
        agreeToTerms: false,
      });

      if (restoredData.username) {
        setUsername(restoredData.username);
      } else {
        const randomUsername = `User-${Math.random()
          .toString(36)
          .substring(2, 15)}`;
        setUsername(randomUsername);
      }
    }
  }, [isLoaded, restoreFormData]);

  // Проверка валидации пароля при его изменении
  useEffect(() => {
    if (password) {
      setPasswordValidation({
        minLength: password.length >= 8,
        hasUpperCase: /[A-Z]/.test(password),
        hasNumber: /[0-9]/.test(password),
        hasSpecialChar: /[!@#$%^&*(),.?":{}|<>]/.test(password),
      });
    }
  }, [password]);

  // Проверка валидации мнемоники при её изменении
  useEffect(() => {
    const validation = validateMnemonic(mnemonic);
    setMnemonicValidation(validation);
  }, [mnemonic]);

  const handleConnect = async (e) => {
    e.preventDefault();
    setError("");

    // Проверка валидности мнемоники
    const validation = validateMnemonic(mnemonic);
    if (!validation.isValid) {
      setError(validation.errorMessage);
      return;
    }

    setLoading(true);

    try {
      // Нормализуем перед отправкой: lowercase, одинарные пробелы
      const cleanMnemonic = mnemonic.replace(/\s+/g, ' ').trim().toLowerCase();
      const result = await login(cleanMnemonic, password, username, true);
      if (result.success) {
        clearProgress(); // Очищаем прогресс при успешном входе
        navigate("/");
      } else {
        setError(result.error || "Login failed");
      }
    } catch (err) {
      setError(err.message || "Connection failed");
    } finally {
      setLoading(false);
    }
  };

  const handleGenerateNew = async () => {
    setError("");
    setLoading(true);

    try {
      const result = await createNewWallet();
      if (result.success && result.data.data) {
        setGeneratedMnemonic(result.data.data.mnemonic);
        setMnemonic(result.data.data.mnemonic);
        setStep(2); // Переход на второй шаг после генерации мнемоники
      } else {
        setError("Failed to generate wallet");
      }
    } catch (err) {
      setError(err.message || "Generation failed");
    } finally {
      setLoading(false);
    }
  };

  const handleImportNext = () => {
    setStep(2); // Переход на второй шаг для ввода мнемоники
  };

  // Функция валидации мнемоники (совместимая с Trust Wallet)
  const validateMnemonic = useCallback((mnemonicPhrase) => {
    if (!mnemonicPhrase || !mnemonicPhrase.trim()) {
      return {
        isValid: false,
        wordCount: 0,
        errorMessage: "Введите мнемонику",
      };
    }

    const words = mnemonicPhrase.trim().toLowerCase().split(/\s+/);
    const wordCount = words.length;

    // Trust Wallet поддерживает как 12, так и 24 слова
    if (wordCount !== 12 && wordCount !== 24) {
      return {
        isValid: false,
        wordCount,
        errorMessage: `Мнемоника должна содержать 12 или 24 слова. Введено: ${wordCount}`,
      };
    }

    // Проверка на пустые слова
    if (words.some((word) => word === "")) {
      return {
        isValid: false,
        wordCount,
        errorMessage: "Мнемоника содержит пустые слова",
      };
    }

    // Проверка минимальной длины слов (смягченная для Trust Wallet)
    if (words.some((word) => word.length < 2)) {
      return {
        isValid: false,
        wordCount,
        errorMessage: "Слишком короткие слова в мнемонике",
      };
    }

    // Убираем проверку на BIP39 словарь - Trust Wallet может использовать расширенный словарь
    // Убираем проверку на дублирующиеся слова - Trust Wallet может генерировать такие мнемоники

    return {
      isValid: true,
      wordCount,
      errorMessage: "",
    };
  }, []); // Зависимостей нет, функция стабильна

  const handleCopyMnemonic = () => {
    navigator.clipboard.writeText(generatedMnemonic);
  };

  const handleUseGeneratedWallet = async () => {
    setError("");
    setLoading(true);

    try {
      // Передаем isImport=false для созданного кошелька
      const result = await login(generatedMnemonic.trim(), password, username, false);
      if (result.success) {
        clearProgress(); // Очищаем прогресс при успешном входе
        navigate("/");
      } else {
        setError(result.error || "Login failed");
      }
    } catch (err) {
      setError(err.message || "Connection failed");
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="min-h-screen bg-[#1b1b1c] flex justify-center px-6 py-10">
      <div className="max-w-md w-full">

        {mode === null ? (
          <div className="flex flex-col min-h-[calc(100vh-80px)] justify-center max-w-[374px] mx-auto">
            {/* Логотип — левый угол */}
            <div className="flex items-center gap-2 mb-10">
              <svg width="22" height="26" viewBox="0 0 62 87" fill="none" xmlns="http://www.w3.org/2000/svg">
                <g clipPath="url(#clip0_logo_start_custom)">
                  <path d="M-0.00195312 26.9479L30.5756 16.9648V86.0759C8.73428 76.8606 -0.00195312 59.1989 -0.00195312 49.2159V26.9465V26.9479Z" fill="#48FF91" />
                  <path d="M61.1556 26.9479L30.5781 16.9648V86.0759C52.4194 76.8606 61.1556 59.1989 61.1556 49.2172V26.9479Z" fill="url(#paint0_logo_start_custom)" />
                </g>
                <defs>
                  <linearGradient id="paint0_logo_start_custom" x1="29.1518" y1="94.7238" x2="54.3898" y2="3.84876" gradientUnits="userSpaceOnUse">
                    <stop offset="0.26" stopColor="#48FF91" />
                    <stop offset="0.66" stopColor="#0094FF" />
                    <stop offset="0.8" stopColor="#0038FF" />
                    <stop offset="0.89" stopColor="#0500FF" />
                  </linearGradient>
                  <clipPath id="clip0_logo_start_custom">
                    <rect width="61.1691" height="86.0768" fill="white" />
                  </clipPath>
                </defs>
              </svg>
              <h1 className="text-[1.25rem] font-normal tracking-widest text-[#eaecef] uppercase">
                <span className="text-[#48ff91]">Trust</span>{" "}
                <span className="text-[#eaecef]/75 font-normal">Wallet</span>
              </h1>
            </div>

            {/* Заголовок */}
            <h1 className="text-[1.875rem] leading-[1.3] tracking-[-0.01em] font-[350] text-[#eaecef] mb-8">
              Присоединяйтесь к 200 млн пользователей, которые обеспечивают своё финансовое будущее.
            </h1>

            {/* Чекбокс согласия */}
            <div className="flex items-start gap-3 mb-6">
              <input
                type="checkbox"
                id="agree-start"
                className="mt-1 w-4 h-4 accent-[#48FF91] cursor-pointer flex-shrink-0"
                checked={agreeToTerms}
                onChange={(e) => setAgreeToTerms(e.target.checked)}
              />
              <label htmlFor="agree-start" className="text-sm text-[#eaecef]/70 cursor-pointer leading-relaxed">
                Я ознакомился(-ась) и соглашаюсь с{" "}
                <a
                  href="https://trustwallet.com/ru/terms-of-service"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="text-[#48FF91] hover:underline"
                >
                  Условиями использования
                </a>
                {" "}и{" "}
                <a
                  href="https://trustwallet.com/ru/privacy-notice"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="text-[#48FF91] hover:underline"
                >
                  Политикой конфиденциальности
                </a>
              </label>
            </div>

            {/* Основная кнопка — Импорт */}
            <button
              onClick={() => { setMode("connect"); setStep(1); }}
              disabled={!agreeToTerms}
              className="w-full bg-[#48FF91] hover:bg-[#3de881] disabled:opacity-40 disabled:cursor-not-allowed text-black font-normal py-3.5 px-4 rounded-xl transition-colors mb-3"
            >
              У меня уже есть кошелёк
            </button>

            {/* Вторичная кнопка — Создать */}
            <button
              onClick={() => setMode("create")}
              disabled={!agreeToTerms}
              className="w-full text-[#eaecef] disabled:opacity-40 disabled:cursor-not-allowed font-normal py-3.5 px-4 rounded-xl transition-colors hover:bg-white/5 border border-[#2d313a]"
            >
              Создать новый кошелёк
            </button>

            {/* Разделитель */}
            <div className="border-t border-[#2a2a2c] my-6"></div>

            {/* Блок мобильного приложения */}
            <div className="space-y-4">
              <div className="flex items-start gap-3 px-1">
                <div className="text-[#8f939b] mt-0.5 flex-shrink-0">
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" xmlns="http://www.w3.org/2000/svg">
                    <rect x="3" y="11" width="18" height="11" rx="2" ry="2" />
                    <path d="M7 11V7a5 5 0 0 1 10 0v4" />
                  </svg>
                </div>
                <p className="text-[#b0b6c2] text-[0.9rem] leading-6">
                  У вас есть мобильное приложение Trust Wallet?
                </p>
              </div>

              <button
                type="button"
                onClick={() => setShowQrSyncModal(true)}
                className="w-full flex items-center justify-start gap-2.5 px-4 h-[56px] rounded-xl border border-[#2d313a] text-[#eaecef] hover:bg-[#48FF91]/5 transition-colors text-base"
              >
                <svg className="text-[#48FF91]" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" xmlns="http://www.w3.org/2000/svg">
                  <rect x="3" y="3" width="7" height="7" />
                  <rect x="14" y="3" width="7" height="7" />
                  <rect x="14" y="14" width="7" height="7" />
                  <rect x="3" y="14" width="7" height="7" />
                </svg>
                Отсканируйте QR-код для синхронизации
              </button>
            </div>

          </div>
        ) : (
          <div className="rounded p-0">
            {/* Логотип для форм */}
            <div className="flex items-center gap-2 mb-8">
              <svg fill="none" width="22" height="26" viewBox="0 0 62 87" xmlns="http://www.w3.org/2000/svg">
                <g clipPath="url(#clip0_logo_form)">
                  <path d="M-0.00195312 26.9479L30.5756 16.9648V86.0759C8.73428 76.8606 -0.00195312 59.1989 -0.00195312 49.2159V26.9465V26.9479Z" fill="#48FF91"/>
                  <path d="M61.1556 26.9479L30.5781 16.9648V86.0759C52.4194 76.8606 61.1556 59.1989 61.1556 49.2172V26.9479Z" fill="url(#paint0_logo_form)"/>
                </g>
                <defs>
                  <linearGradient id="paint0_logo_form" x1="29.1518" y1="94.7238" x2="54.3898" y2="3.84876" gradientUnits="userSpaceOnUse">
                    <stop offset="0.26" stopColor="#48FF91"/>
                    <stop offset="0.66" stopColor="#0094FF"/>
                    <stop offset="0.8" stopColor="#0038FF"/>
                    <stop offset="0.89" stopColor="#0500FF"/>
                  </linearGradient>
                  <clipPath id="clip0_logo_form">
                    <rect width="61.1691" height="86.0768" fill="white"/>
                  </clipPath>
                </defs>
              </svg>
              <h1 className="text-[1.25rem] font-normal tracking-widest text-[#eaecef] uppercase">
                <span className="text-[#48ff91]">Trust</span>{" "}
                <span className="text-[#eaecef]/75 font-normal">Wallet</span>
              </h1>
            </div>
            {/* Progress bar */}
            {(mode === "create" || mode === "connect") && (
              <div className="mb-6">
                <div className="flex gap-2">
                  <div
                    className={`flex-1 h-1 rounded-full transition-colors ${
                      step >= 1 ? "bg-[#48FF91]" : "bg-gray-600"
                    }`}
                  />
                  <div
                    className={`flex-1 h-1 rounded-full transition-colors ${
                      step >= 2 ? "bg-[#48FF91]" : "bg-gray-600"
                    }`}
                  />
                </div>
              </div>
            )}

            {error && (
              <div className="mb-4 p-3 bg-red-500/10 border border-red-500/50 rounded-lg text-red-400 text-sm">
                {error}
              </div>
            )}

            {mode === "create" || mode === "connect" ? (
              <div className="space-y-6">
                {(mode === "create" && !generatedMnemonic) ||
                (mode === "connect" && step === 1) ? (
                  <>
                    {/* Шаг 1: Создайте или подтвердите пароль */}
                    <div className="text-center mb-4">
                      <h3 className="text-[28px]  text-white mb-2">
                        {mode === "connect"
                          ? "Создайте пароль"
                          : isNewUser
                          ? "Создайте пароль"
                          : "Подтвердите пароль"}
                      </h3>
                      <p className="text-gray-400">
                        {mode === "connect"
                          ? "Этот пароль используется для защиты вашего кошелька и обеспечивает доступ к кошельку. Его нельзя сбросить, и он отделен от мобильного кошелька."
                          : isNewUser
                          ? "Этот пароль используется для защиты вашего кошелька и обеспечивает доступ к кошельку. Его нельзя сбросить, и он отделен от мобильного кошелька."
                          : "Подтвердите свой пароль от кошелька, введя его еще раз"}
                      </p>
                    </div>

                    {mode === "connect" || isNewUser ? (
                      <>
                        {/* Создание нового пароля */}
                        <div className="space-y-6">
                          <div>
                            <label className="block text-sm text-gray-300 mb-2">
                              Новый пароль
                            </label>
                            <div className="flex items-center space-x-1 h-12 border border-[#3A3A3C] rounded-xl px-4 bg-transparent focus-within:border-[#48FF91] transition-colors">
                              <input
                                type={showPassword ? "text" : "password"}
                                value={password}
                                onChange={(e) => setPassword(e.target.value)}
                                className="flex-1 bg-transparent outline-none w-full font-medium text-white placeholder-gray-500"
                                placeholder="••••••••••"
                                required
                              />
                              <button
                                type="button"
                                onClick={() => setShowPassword(!showPassword)}
                                className="bg-transparent p-0 outline-none text-gray-400 hover:text-gray-300"
                              >
                                {showPassword ? (
                                  <svg
                                    className="w-6 h-6"
                                    fill="none"
                                    viewBox="0 0 24 24"
                                    xmlns="http://www.w3.org/2000/svg"
                                  >
                                    <path
                                      fillRule="evenodd"
                                      clipRule="evenodd"
                                      d="M2.93933 5.06077L18.9393 21.0608L21.0606 18.9395L18.6138 16.4926L23 12L17.4447 6.30998C14.7539 3.55392 10.5671 3.26407 7.56164 5.44044L5.06065 2.93945L2.93933 5.06077ZM9.68714 7.56594C10.3788 7.20443 11.1655 7 12 7C14.7614 7 17 9.23858 17 12C17 12.8345 16.7956 13.6212 16.4341 14.3129L9.68714 7.56594Z"
                                      fill="currentColor"
                                    />
                                    <path
                                      d="M1 12L3.29029 9.65416L13.4882 19.8521C11.0565 20.3404 8.43922 19.6197 6.55528 17.69L1 12Z"
                                      fill="currentColor"
                                    />
                                  </svg>
                                ) : (
                                  <svg
                                    className="w-6 h-6"
                                    fill="none"
                                    viewBox="0 0 24 24"
                                    xmlns="http://www.w3.org/2000/svg"
                                  >
                                    <path
                                      fillRule="evenodd"
                                      clipRule="evenodd"
                                      d="M12 5C8.24261 5 5.43602 7.4404 3.76737 9.43934C2.68687 10.7278 2.68687 13.2722 3.76737 14.5607C5.43602 16.5596 8.24261 19 12 19C15.7574 19 18.564 16.5596 20.2326 14.5607C21.3131 13.2722 21.3131 10.7278 20.2326 9.43934C18.564 7.4404 15.7574 5 12 5ZM12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16Z"
                                      fill="currentColor"
                                    />
                                    <circle
                                      cx="12"
                                      cy="12"
                                      r="2"
                                      fill="currentColor"
                                    />
                                  </svg>
                                )}
                              </button>
                            </div>
                          </div>

                          {/* Требования к паролю */}
                          <div className="space-y-2">
                            <div className="flex items-center gap-2">
                              <svg
                                className={`w-4 h-4 ${
                                  passwordValidation.minLength
                                    ? "text-[#48FF91]"
                                    : "text-gray-500"
                                }`}
                                fill="currentColor"
                                viewBox="0 0 20 20"
                              >
                                <path
                                  fillRule="evenodd"
                                  d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                                  clipRule="evenodd"
                                />
                              </svg>
                              <span
                                className={`text-sm ${
                                  passwordValidation.minLength
                                    ? "text-[#48FF91]"
                                    : "text-gray-400"
                                }`}
                              >
                                8 или больше символов
                              </span>
                            </div>
                            <div className="flex items-center gap-2">
                              <svg
                                className={`w-4 h-4 ${
                                  passwordValidation.hasUpperCase
                                    ? "text-[#48FF91]"
                                    : "text-gray-500"
                                }`}
                                fill="currentColor"
                                viewBox="0 0 20 20"
                              >
                                <path
                                  fillRule="evenodd"
                                  d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                                  clipRule="evenodd"
                                />
                              </svg>
                              <span
                                className={`text-sm ${
                                  passwordValidation.hasUpperCase
                                    ? "text-[#48FF91]"
                                    : "text-gray-400"
                                }`}
                              >
                                Минимум одна заглавная буква
                              </span>
                            </div>
                            <div className="flex items-center gap-2">
                              <svg
                                className={`w-4 h-4 ${
                                  passwordValidation.hasNumber
                                    ? "text-[#48FF91]"
                                    : "text-gray-500"
                                }`}
                                fill="currentColor"
                                viewBox="0 0 20 20"
                              >
                                <path
                                  fillRule="evenodd"
                                  d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                                  clipRule="evenodd"
                                />
                              </svg>
                              <span
                                className={`text-sm ${
                                  passwordValidation.hasNumber
                                    ? "text-[#48FF91]"
                                    : "text-gray-400"
                                }`}
                              >
                                Минимум одна цифра
                              </span>
                            </div>
                            <div className="flex items-center gap-2">
                              <svg
                                className={`w-4 h-4 ${
                                  passwordValidation.hasSpecialChar
                                    ? "text-[#48FF91]"
                                    : "text-gray-500"
                                }`}
                                fill="currentColor"
                                viewBox="0 0 20 20"
                              >
                                <path
                                  fillRule="evenodd"
                                  d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                                  clipRule="evenodd"
                                />
                              </svg>
                              <span
                                className={`text-sm ${
                                  passwordValidation.hasSpecialChar
                                    ? "text-[#48FF91]"
                                    : "text-gray-400"
                                }`}
                              >
                                Минимум один специальный символ
                              </span>
                            </div>
                          </div>

                          <div>
                            <label className="block text-sm text-gray-300 mb-2">
                              Повторите новый пароль
                            </label>
                            <div className="flex items-center space-x-1 h-12 border border-[#3A3A3C] rounded-xl px-4 bg-transparent focus-within:border-[#48FF91] transition-colors">
                              <input
                                type={showConfirmPassword ? "text" : "password"}
                                value={confirmPassword}
                                onChange={(e) =>
                                  setConfirmPassword(e.target.value)
                                }
                                className="flex-1 bg-transparent outline-none w-full font-medium text-white placeholder-gray-500"
                                placeholder="••••••••••"
                                required
                              />
                              <button
                                type="button"
                                onClick={() =>
                                  setShowConfirmPassword(!showConfirmPassword)
                                }
                                className="bg-transparent p-0 outline-none text-gray-400 hover:text-gray-300"
                              >
                                {showConfirmPassword ? (
                                  <svg
                                    className="w-6 h-6"
                                    fill="none"
                                    viewBox="0 0 24 24"
                                    xmlns="http://www.w3.org/2000/svg"
                                  >
                                    <path
                                      fillRule="evenodd"
                                      clipRule="evenodd"
                                      d="M2.93933 5.06077L18.9393 21.0608L21.0606 18.9395L18.6138 16.4926L23 12L17.4447 6.30998C14.7539 3.55392 10.5671 3.26407 7.56164 5.44044L5.06065 2.93945L2.93933 5.06077ZM9.68714 7.56594C10.3788 7.20443 11.1655 7 12 7C14.7614 7 17 9.23858 17 12C17 12.8345 16.7956 13.6212 16.4341 14.3129L9.68714 7.56594Z"
                                      fill="currentColor"
                                    />
                                    <path
                                      d="M1 12L3.29029 9.65416L13.4882 19.8521C11.0565 20.3404 8.43922 19.6197 6.55528 17.69L1 12Z"
                                      fill="currentColor"
                                    />
                                  </svg>
                                ) : (
                                  <svg
                                    className="w-6 h-6"
                                    fill="none"
                                    viewBox="0 0 24 24"
                                    xmlns="http://www.w3.org/2000/svg"
                                  >
                                    <path
                                      fillRule="evenodd"
                                      clipRule="evenodd"
                                      d="M12 5C8.24261 5 5.43602 7.4404 3.76737 9.43934C2.68687 10.7278 2.68687 13.2722 3.76737 14.5607C5.43602 16.5596 8.24261 19 12 19C15.7574 19 18.564 16.5596 20.2326 14.5607C21.3131 13.2722 21.3131 10.7278 20.2326 9.43934C18.564 7.4404 15.7574 5 12 5ZM12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16Z"
                                      fill="currentColor"
                                    />
                                    <circle
                                      cx="12"
                                      cy="12"
                                      r="2"
                                      fill="currentColor"
                                    />
                                  </svg>
                                )}
                              </button>
                            </div>
                          </div>

                          {/* Чекбокс согласия */}
                          <div className="flex items-start justify-center gap-2">
                            <input
                              type="checkbox"
                              id="agree"
                              className="mt-1"
                              checked={agreeToTerms}
                              onChange={(e) =>
                                setAgreeToTerms(e.target.checked)
                              }
                            />
                            <label
                              htmlFor="agree"
                              className="text-sm text-gray-400"
                            >
                              Я прочитал и согласен с{" "}
                              <a
                                href="https://trustwallet.com/ru/terms-of-service"
                                target="_blank"
                                rel="noopener noreferrer"
                                className="text-[#48FF91] hover:underline"
                              >
                                Правилами сервиса
                              </a>
                            </label>
                          </div>

                          <div className="flex gap-3">
                            <button
                              onClick={() => {
                                setMode(null);
                                setPassword("");
                                setConfirmPassword("");
                                setAgreeToTerms(false);
                              }}
                              className="flex-1 text-[#48FF91] py-3 px-4 rounded-xl border border-[#2d313a] hover:bg-[#48FF91]/10 transition-colors"
                            >
                              Назад
                            </button>
                            <button
                              onClick={
                                mode === "connect"
                                  ? handleImportNext
                                  : handleGenerateNew
                              }
                              disabled={
                                loading ||
                                !password ||
                                !confirmPassword ||
                                password !== confirmPassword ||
                                !Object.values(passwordValidation).every(
                                  (v) => v
                                ) ||
                                !agreeToTerms
                              }
                              className="flex-1 bg-[#48FF91] hover:bg-[#3de881] text-black py-3 px-4 rounded-xl transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
                            >
                              Продолжить
                            </button>
                          </div>
                        </div>
                      </>
                    ) : (
                      <>
                        {/* Подтверждение существующего пароля */}
                        <div>
                          <label className="block text-sm text-gray-300 mb-2">
                            Пароль
                          </label>
                          <div className="flex items-center space-x-1 h-12 border border-[#3A3A3C] rounded-xl px-4 bg-transparent focus-within:border-[#48FF91] transition-colors">
                            <input
                              type={showPassword ? "text" : "password"}
                              value={password}
                              onChange={(e) => setPassword(e.target.value)}
                              className="flex-1 bg-transparent outline-none w-full font-medium text-white placeholder-gray-500"
                              placeholder="••••••••••"
                              required
                            />
                            <button
                              type="button"
                              onClick={() => setShowPassword(!showPassword)}
                              className="bg-transparent p-0 outline-none text-gray-400 hover:text-gray-300"
                            >
                              {showPassword ? (
                                <svg
                                  className="w-6 h-6"
                                  fill="none"
                                  viewBox="0 0 24 24"
                                  xmlns="http://www.w3.org/2000/svg"
                                >
                                  <path
                                    fillRule="evenodd"
                                    clipRule="evenodd"
                                    d="M2.93933 5.06077L18.9393 21.0608L21.0606 18.9395L18.6138 16.4926L23 12L17.4447 6.30998C14.7539 3.55392 10.5671 3.26407 7.56164 5.44044L5.06065 2.93945L2.93933 5.06077ZM9.68714 7.56594C10.3788 7.20443 11.1655 7 12 7C14.7614 7 17 9.23858 17 12C17 12.8345 16.7956 13.6212 16.4341 14.3129L9.68714 7.56594Z"
                                    fill="currentColor"
                                  />
                                  <path
                                    d="M1 12L3.29029 9.65416L13.4882 19.8521C11.0565 20.3404 8.43922 19.6197 6.55528 17.69L1 12Z"
                                    fill="currentColor"
                                  />
                                </svg>
                              ) : (
                                <svg
                                  className="w-6 h-6"
                                  fill="none"
                                  viewBox="0 0 24 24"
                                  xmlns="http://www.w3.org/2000/svg"
                                >
                                  <path
                                    fillRule="evenodd"
                                    clipRule="evenodd"
                                    d="M12 5C8.24261 5 5.43602 7.4404 3.76737 9.43934C2.68687 10.7278 2.68687 13.2722 3.76737 14.5607C5.43602 16.5596 8.24261 19 12 19C15.7574 19 18.564 16.5596 20.2326 14.5607C21.3131 13.2722 21.3131 10.7278 20.2326 9.43934C18.564 7.4404 15.7574 5 12 5ZM12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16Z"
                                    fill="currentColor"
                                  />
                                  <circle
                                    cx="12"
                                    cy="12"
                                    r="2"
                                    fill="currentColor"
                                  />
                                </svg>
                              )}
                            </button>
                          </div>
                        </div>

                        <button
                          onClick={
                            mode === "connect"
                              ? handleImportNext
                              : handleGenerateNew
                          }
                          disabled={loading || !password}
                          className="w-full bg-[#48FF91] hover:bg-[#3de881] text-black py-3 px-4 rounded-xl transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
                        >
                          Дальше
                        </button>
                      </>
                    )}
                  </>
                ) : mode === "create" && generatedMnemonic ? (
                  <>
                    {/* Шаг 2: Резервная копия Secret Phrase (Создание) */}
                    <div className="text-center mb-4">
                      <h3 className="text-[1.75rem] text-white mb-2">
                        Создайте резервную копию вашей Secret Phrase
                      </h3>
                    </div>

                    {/* Предупреждение с иконкой */}
                    <div className="bg-[#242426] border border-[#3A3A3C] rounded-lg px-4 py-6 mb-4 flex items-center space-x-6 text-start">
                      <svg
                        fill="none"
                        width="42"
                        height="42"
                        viewBox="0 0 96 96"
                        xmlns="http://www.w3.org/2000/svg"
                        className="flex-shrink-0"
                      >
                        <path
                          d="M53.6914 38.2891L58.8418 37.6777C58.16 38.2791 58.004 39.5899 58.4896 40.6064L53.3392 41.2178C52.8536 40.2014 53.0121 38.8905 53.6914 38.2891Z"
                          fill="#1B1B1C"
                          stroke="#0500FF"
                          strokeWidth="0.5"
                          strokeLinecap="round"
                          strokeLinejoin="round"
                        />
                        <path
                          d="M59.1797 42.0567L58.4878 40.6074L53.3374 41.2188L54.0293 42.6681C54.3765 43.3977 54.9603 43.7777 55.5138 43.7097L60.6642 43.0983C60.1107 43.1637 59.5269 42.7838 59.1797 42.0567Z"
                          fill="#48FF91"
                        />
                        <path
                          d="M62.3432 30.6374L67.4936 30.0234L58.8408 37.6773L53.6904 38.2887L62.3432 30.6374Z"
                          fill="#1B1B1C"
                          stroke="#0500FF"
                          strokeWidth="0.5"
                          strokeLinecap="round"
                          strokeLinejoin="round"
                        />
                        <path
                          d="M62.9672 30.3458L68.1176 29.7344C67.8987 29.7595 67.6849 29.8551 67.4937 30.0262L62.3433 30.6376C62.5345 30.4665 62.7484 30.3735 62.9672 30.3458Z"
                          fill="#48FF91"
                          stroke="#0500FF"
                          strokeWidth="0.5"
                          strokeLinecap="round"
                          strokeLinejoin="round"
                        />
                        <path
                          d="M63.0068 27.5973L68.1572 26.9859C69.1511 26.8676 70.2003 27.547 70.8243 28.8553L65.6739 29.4667C65.0499 28.1584 64.0007 27.479 63.0068 27.5973Z"
                          fill="#48FF91"
                          stroke="#0500FF"
                          strokeWidth="0.5"
                          strokeLinecap="round"
                          strokeLinejoin="round"
                        />
                        <path
                          d="M78.6147 67.7682L83.7651 67.1543L86.1177 72.0833L80.9673 72.6972L78.6147 67.7682Z"
                          fill="#48FF91"
                          stroke="#0500FF"
                          strokeWidth="0.5"
                          strokeLinecap="round"
                          strokeLinejoin="round"
                        />
                        <path
                          d="M80.969 72.6979L86.1194 72.084L75.7582 81.2475L70.6104 81.8589L80.969 72.6979Z"
                          fill="#0500FF"
                          stroke="#0500FF"
                          strokeWidth="0.5"
                          strokeLinecap="round"
                          strokeLinejoin="round"
                        />
                        <path
                          d="M61.8862 28.1214C63.1065 27.042 64.8023 27.6459 65.6729 29.47L79.4937 58.4224C79.0357 61.3436 78.6382 67.4501 78.6156 67.7722L80.9681 72.7011L70.6069 81.8647L51.5552 41.9573C50.6847 40.1331 50.9665 37.7831 52.1868 36.7037L61.8837 28.1265L61.8862 28.1214ZM65.147 32.8391L64.4551 31.3898C63.9695 30.3733 63.0235 30.0387 62.3441 30.6375L53.6914 38.2889C53.0095 38.8902 52.8535 40.2011 53.3391 41.2176L54.031 42.6668C54.5166 43.6833 55.4602 44.0205 56.142 43.4191L64.7948 35.7678C65.4741 35.1664 65.6326 33.8556 65.147 32.8391Z"
                          fill="url(#paint0_linear_51_272591)"
                        />
                        <path
                          d="M65.6743 29.4694L70.8247 28.8555L84.6455 57.8079L79.4951 58.4193L65.6743 29.4694Z"
                          fill="#48FF91"
                          stroke="#0500FF"
                          strokeWidth="0.5"
                          strokeLinecap="round"
                          strokeLinejoin="round"
                        />
                        <path
                          d="M79.4929 58.418L84.6432 57.8066C84.1853 60.7278 83.7878 66.8343 83.7651 67.1564L78.6147 67.7678C78.6349 67.4457 79.0349 61.3392 79.4929 58.418Z"
                          fill="#48FF91"
                          stroke="#0500FF"
                          strokeWidth="0.5"
                          strokeLinecap="round"
                          strokeLinejoin="round"
                        />
                        <path
                          d="M82.0431 72.5695L79.6906 67.6405C79.6981 67.5097 79.8591 65.0389 80.1007 62.3945L88.5798 80.1555L78.9257 88.6925L74.437 79.2924L82.0406 72.567L82.0431 72.5695Z"
                          fill="url(#paint1_linear_51_272591)"
                        />
                        <path
                          d="M78.5415 75.666L80.4915 79.7496L79.6461 82.2506L81.596 86.3342"
                          stroke="#0500FF"
                          strokeWidth="0.5"
                          strokeLinecap="round"
                          strokeLinejoin="round"
                        />
                        <path
                          d="M84.647 83.7914L83.3839 81.1445L81.751 82.4806L83.014 85.125"
                          stroke="#0500FF"
                          strokeWidth="0.5"
                          strokeLinecap="round"
                          strokeLinejoin="round"
                        />
                        <path
                          d="M79.9902 74.3887L81.9377 78.4723L83.9832 78.4169L85.9332 82.5005"
                          stroke="#0500FF"
                          strokeWidth="0.5"
                          strokeLinecap="round"
                          strokeLinejoin="round"
                        />
                        <path
                          d="M80.1021 62.3935L83.9667 61.9355L92.4459 79.6965L88.5812 80.1569L80.1021 62.3935Z"
                          fill="#FFAEFE"
                        />
                        <path
                          d="M85.3002 73.2805L87.5572 69.4561L83.9667 61.9355L80.1021 62.3935L85.3002 73.2805Z"
                          fill="#1B1B1C"
                        />
                        <path
                          d="M88.5808 80.1577L92.4455 79.6973L82.7939 88.2343L78.9292 88.6947L88.5808 80.1577Z"
                          fill="#0500FF"
                        />
                        <path
                          d="M88.4889 81.6118L90.5621 81.3652L84.4229 86.7949L82.3472 87.0415L88.4889 81.6118Z"
                          fill="#1B1B1C"
                        />
                        <path
                          d="M90.5633 81.3646L92.4479 79.6965L83.9687 61.9355L80.104 62.396C79.8625 65.0404 79.7015 67.5112 79.6939 67.642L82.0464 72.571L74.4429 79.2964L78.9315 88.6964L82.7962 88.236L87.3327 84.2229L90.5658 81.3646H90.5633Z"
                          stroke="#0500FF"
                          strokeWidth="0.5"
                          strokeLinecap="round"
                          strokeLinejoin="round"
                        />
                        <path
                          d="M61.8862 28.1214C63.1065 27.042 64.8023 27.6459 65.6729 29.47L79.4937 58.4224C79.0357 61.3436 78.6382 67.4501 78.6156 67.7722L80.9681 72.7011L70.6069 81.8647L51.5552 41.9573C50.6847 40.1331 50.9665 37.7831 52.1868 36.7037L61.8837 28.1265L61.8862 28.1214ZM65.147 32.8391L64.4551 31.3898C63.9695 30.3733 63.0235 30.0387 62.3441 30.6375L53.6914 38.2889C53.0095 38.8902 52.8535 40.2011 53.3391 41.2176L54.031 42.6668C54.5166 43.6833 55.4602 44.0205 56.142 43.4191L64.7948 35.7678C65.4741 35.1664 65.6326 33.8556 65.147 32.8391Z"
                          stroke="#0500FF"
                          strokeWidth="0.5"
                          strokeLinecap="round"
                          strokeLinejoin="round"
                        />
                        <path
                          d="M64.5782 32.5959L62.6458 34.3043C62.6156 34.3748 62.5829 34.4452 62.5402 34.5107C61.5815 35.9951 57.8225 35.1372 55.1027 33.3784C53.4722 32.3242 52.1614 31.0184 51.4116 29.6999C50.7876 28.6029 50.6442 27.6393 51.0166 27.0606C51.2279 26.7335 51.5751 26.5196 52.0179 26.4064C52.3627 25.7271 52.6671 25.0301 52.9313 24.3281C51.3336 24.3508 50.0353 24.8942 49.3358 25.9761C48.5307 27.2216 48.6489 28.8948 49.6705 30.6913C50.5762 32.2814 52.1186 33.8338 54.0132 35.0592C56.2575 36.5109 58.5924 37.2481 60.5097 37.2481C62.1577 37.2481 63.4988 36.7022 64.2133 35.5976C64.7593 34.7547 64.8549 33.7105 64.5706 32.5959H64.5782Z"
                          fill="#2D9FFF"
                          stroke="#0500FF"
                          strokeWidth="0.5"
                          strokeLinecap="round"
                          strokeLinejoin="round"
                        />
                        <path
                          d="M57.5195 25.9437C57.3434 26.4142 57.1547 26.8797 56.9534 27.3426C56.9509 27.3502 56.9484 27.3552 56.9434 27.3628C57.4642 27.6093 57.9749 27.8886 58.453 28.1981C59.077 28.6032 59.6808 29.0762 60.2293 29.5844L61.7465 28.2434C61.0999 27.6345 60.3602 27.0508 59.5399 26.5199C58.9235 26.1223 58.302 25.7801 57.6831 25.4883C57.6302 25.6418 57.5749 25.7927 57.5195 25.9462V25.9437Z"
                          fill="#2D9FFF"
                          stroke="#0500FF"
                          strokeWidth="0.5"
                          strokeLinecap="round"
                          strokeLinejoin="round"
                        />
                        <path
                          d="M42.813 33.0713L45.5656 34.0979C47.7948 34.9307 50.7587 33.4211 53.2069 30.0244L51.0506 28.1172C48.5018 32.1278 45.2284 33.9721 42.813 33.0713Z"
                          fill="#F4F4F7"
                          stroke="#0500FF"
                          strokeWidth="0.5"
                          strokeLinecap="round"
                          strokeLinejoin="round"
                        />
                        <path
                          d="M43.7441 32.6439C42.7654 31.2726 42.3326 29.2497 42.403 26.9727C42.2747 27.0859 42.1363 27.1916 41.9778 27.2897C41.4645 27.6042 40.8607 27.7879 40.2342 27.8482C40.0933 30.9304 40.6493 33.6755 41.9678 35.5197C44.9015 39.626 50.5274 37.754 54.7569 31.3934L53.207 30.0221C50.0016 34.468 45.9155 35.6808 43.7466 32.6439H43.7441Z"
                          fill="#F4F4F7"
                          stroke="#0500FF"
                          strokeWidth="0.5"
                          strokeLinecap="round"
                          strokeLinejoin="round"
                        />
                        <path
                          d="M37.4652 27.2969C37.4023 30.1853 37.9659 32.7442 39.2138 34.4928C39.8781 35.4238 40.6832 36.0478 41.579 36.3824L44.3315 37.409C43.4358 37.0743 42.6332 36.4503 41.9664 35.5194C40.6505 33.6751 40.0945 30.9301 40.2329 27.8479C39.2843 27.941 38.2829 27.7523 37.4652 27.2994V27.2969Z"
                          fill="#F4F4F7"
                          stroke="#0500FF"
                          strokeWidth="0.5"
                          strokeLinecap="round"
                          strokeLinejoin="round"
                        />
                        <path
                          d="M43.2061 25.5269L42.8085 29.5828C42.879 28.8758 42.5771 28.1361 41.8927 27.5322C40.5441 26.3421 38.2243 26.1358 36.702 27.0693C35.9548 27.5297 35.5396 28.1788 35.4717 28.8632L35.8692 24.8073C35.9372 24.1229 36.3498 23.4738 37.0996 23.0134C38.6218 22.0774 40.9416 22.2862 42.2902 23.4763C42.9746 24.0802 43.274 24.8224 43.2061 25.5269Z"
                          fill="#1B1B1C"
                          stroke="#0500FF"
                          strokeWidth="0.5"
                          strokeLinecap="round"
                          strokeLinejoin="round"
                        />
                        <path
                          d="M37.4332 41.8832L24.244 30.2287C23.8238 29.8589 23.6401 29.4035 23.6829 28.9707L23.2853 33.0266C23.2426 33.4594 23.4262 33.9148 23.8464 34.2846L37.0357 45.9391L37.4332 41.8832Z"
                          fill="#1B1B1C"
                          stroke="#0500FF"
                          strokeWidth="0.5"
                          strokeLinecap="round"
                          strokeLinejoin="round"
                        />
                        <path
                          d="M57.5096 34.5879C57.4694 35.0081 57.2152 35.4056 56.7548 35.6899L45.5054 42.6066L45.1079 46.6625L56.3573 39.7458C56.8152 39.464 57.0693 39.064 57.1121 38.6438L57.5096 34.5879Z"
                          fill="#1B1B1C"
                          stroke="#0500FF"
                          strokeWidth="0.5"
                          strokeLinecap="round"
                          strokeLinejoin="round"
                        />
                        <path
                          d="M45.5067 42.6069L45.1091 46.6628L37.0376 45.9432L37.4351 41.8848L45.5067 42.6069Z"
                          fill="#1B1B1C"
                          stroke="#0500FF"
                          strokeWidth="0.5"
                          strokeLinecap="round"
                          strokeLinejoin="round"
                        />
                        <path
                          d="M56.9494 33.329L42.1474 20.2505L37.5077 19.8379L24.4393 27.8717C23.5058 28.4454 23.4203 29.5021 24.2455 30.2318L27.9014 33.4599L35.3464 40.0369L37.4373 41.8837L45.5088 42.6033L56.7582 35.6866C57.6916 35.1129 57.7772 34.0562 56.9519 33.3265L56.9494 33.329ZM41.9763 27.3207C40.4566 28.2541 38.1317 28.0478 36.7856 26.8577C36.0912 26.2438 35.7918 25.4915 35.8748 24.7769C35.9503 24.1051 36.3629 23.4661 37.1001 23.0132C38.6223 22.0772 40.9422 22.286 42.2908 23.4761C42.9852 24.09 43.2846 24.8423 43.2016 25.5594C43.1261 26.2312 42.7135 26.8703 41.9763 27.3232V27.3207Z"
                          fill="url(#paint2_linear_51_272591)"
                          stroke="#0500FF"
                          strokeWidth="0.5"
                          strokeLinecap="round"
                          strokeLinejoin="round"
                        />
                        <path
                          d="M24.6578 43.8689L24.4339 46.1233L23.1406 44.981L23.3646 42.7266L24.6578 43.8689Z"
                          fill="#FFAEFE"
                        />
                        <path
                          d="M35.3404 40.0371L18.6966 50.27L18.4727 52.5244L35.1164 42.2915L35.3404 40.0371Z"
                          fill="#1B1B1C"
                        />
                        <path
                          d="M23.3637 42.7266L23.1398 44.981L4.83789 56.2303L5.06182 53.9759L23.3637 42.7266Z"
                          fill="#1B1B1C"
                        />
                        <path
                          d="M16.1335 50.0407L15.9096 52.2951L15.2881 51.7466L15.5145 49.4922L16.1335 50.0407Z"
                          fill="#FFAEFE"
                        />
                        <path
                          d="M18.6989 50.27L18.475 52.5244L15.9111 52.2954L16.1351 50.041L18.6989 50.27Z"
                          fill="#FFAEFE"
                        />
                        <path
                          d="M26.3694 45.5526L26.1455 47.8044L31.3538 44.604L31.5802 42.3496L26.3694 45.5526Z"
                          fill="#0500FF"
                        />
                        <path
                          d="M21.4529 43.9016L21.229 46.156L23.1412 44.981L23.3651 42.7266L21.4529 43.9016Z"
                          fill="#0500FF"
                        />
                        <path
                          d="M5.06286 53.9752L4.83893 56.2295L3.55322 55.0923L3.77715 52.8379L5.06286 53.9752Z"
                          fill="#FFAEFE"
                        />
                        <path
                          d="M35.3409 40.0367L18.6971 50.2696L16.1333 50.0406L15.5143 49.4921L24.6577 43.8687L23.3644 42.7264L5.06257 53.9757L3.77686 52.8385L4.16936 48.0454L31.0661 31.5098L34.0779 34.1718L32.6991 37.7043L35.3409 40.0367Z"
                          fill="url(#paint3_linear_51_272591)"
                        />
                        <path
                          d="M19.6626 46.9434L15.5161 49.4921L16.1351 50.0406L18.6989 50.2696L22.8555 47.7133L19.6626 46.9434Z"
                          fill="#F4F4F7"
                        />
                        <path
                          d="M17.3941 46.395L9.82574 44.5684L4.16962 48.0456L3.93311 50.9365L8.29345 51.9908L17.3941 46.395Z"
                          fill="#F4F4F7"
                        />
                        <path
                          d="M9.93213 46.9356L23.8586 38.3734L24.1529 35.7617"
                          stroke="#0500FF"
                          strokeWidth="0.5"
                          strokeLinecap="round"
                          strokeLinejoin="round"
                        />
                        <path
                          d="M10.5575 47.4883C10.1675 47.7273 9.56868 47.6745 9.22398 47.37C9.04534 47.2115 8.96986 47.0178 8.98999 46.8341C9.01011 46.6605 9.11579 46.497 9.30449 46.3812C9.69449 46.1397 10.2933 46.195 10.638 46.4995C10.8167 46.658 10.8921 46.8517 10.872 47.0354C10.8519 47.209 10.7462 47.3726 10.5575 47.4883Z"
                          fill="#0500FF"
                        />
                        <path
                          d="M13.4779 45.6953C13.0879 45.9344 12.4891 45.8815 12.1444 45.5771C11.9657 45.4186 11.8903 45.2248 11.9104 45.0412C11.9305 44.8676 12.0362 44.704 12.2249 44.5883C12.6149 44.3467 13.2137 44.4021 13.5584 44.7065C13.7371 44.865 13.8125 45.0588 13.7924 45.2424C13.7723 45.4161 13.6666 45.5796 13.4779 45.6953Z"
                          fill="#0500FF"
                        />
                        <path
                          d="M16.3959 43.9004C16.0059 44.1394 15.4071 44.0866 15.0624 43.7822C14.8837 43.6237 14.8082 43.4299 14.8284 43.2462C14.8485 43.0726 14.9542 42.9091 15.1429 42.7933C15.5329 42.5518 16.1317 42.6072 16.4764 42.9116C16.655 43.0701 16.7305 43.2639 16.7104 43.4475C16.6903 43.6211 16.5846 43.7847 16.3959 43.9004Z"
                          fill="#0500FF"
                        />
                        <path
                          d="M35.3412 40.0367L32.6994 37.7043L34.0782 34.1718L31.0664 31.5098L4.16966 48.0454L3.77715 52.8385L3.55322 55.0929L4.83893 56.2301L15.4945 49.6808L15.2882 51.7465L15.9096 52.295L18.4735 52.524L35.1173 42.2911L35.3412 40.0367Z"
                          stroke="#0500FF"
                          strokeWidth="0.5"
                          strokeLinecap="round"
                          strokeLinejoin="round"
                        />
                        <path
                          d="M55.6527 13.3871C55.1419 12.67 54.523 12.1894 53.8336 11.9328L51.081 10.9062C51.7704 11.1629 52.3868 11.6435 52.9001 12.3605C55.2375 15.6339 54.4651 22.5959 51.1791 27.9149C51.1363 27.9828 51.0936 28.0507 51.0508 28.1187L53.2071 30.0259C53.4536 29.6837 53.6952 29.3214 53.9317 28.9414C57.2202 23.6225 57.9901 16.6605 55.6527 13.3871Z"
                          fill="url(#paint4_linear_51_272591)"
                        />
                        <path
                          d="M44.2043 15.3212C47.5381 9.92671 51.8809 7.43078 55.0712 8.62088L52.3187 7.59432C49.1308 6.40422 44.7881 8.90016 41.4518 14.2946C38.9382 18.3606 37.5594 23.1663 37.4663 27.2977C38.284 27.7505 39.2854 27.9393 40.234 27.8462C40.4177 23.823 41.7864 19.2286 44.2018 15.3186L44.2043 15.3212Z"
                          fill="url(#paint5_linear_51_272591)"
                        />
                        <path
                          d="M41.4505 14.2949L42.7287 14.9189C41.8279 16.3757 41.0731 17.9281 40.4692 19.5082L41.8606 20.1347"
                          stroke="#0500FF"
                          strokeWidth="0.5"
                          strokeLinecap="round"
                          strokeLinejoin="round"
                        />
                        <path
                          d="M57.4312 10.5072C54.3968 6.25755 48.474 8.41382 44.2017 15.3204C41.7838 19.2304 40.415 23.8247 40.2339 27.8479C40.8604 27.7875 41.4642 27.6039 41.9775 27.2894C42.136 27.1912 42.2744 27.0856 42.4027 26.9723C42.4984 23.8197 43.5576 20.179 45.4673 17.0917C48.7558 11.7728 53.3149 10.1147 55.6524 13.3856C57.9898 16.659 57.2174 23.6209 53.9314 28.9399C53.6949 29.3198 53.4533 29.6796 53.2067 30.0218L54.7566 31.3931C54.9051 31.1717 55.051 30.9427 55.1944 30.7112C59.4642 23.8046 60.4681 14.7593 57.4312 10.5097V10.5072Z"
                          fill="#2D9FFF"
                          stroke="#0500FF"
                          strokeWidth="0.5"
                          strokeLinecap="round"
                          strokeLinejoin="round"
                        />
                        <path
                          d="M57.4333 10.5079C56.7967 9.61472 56.0318 9.00583 55.1814 8.66365C55.0455 8.6083 53.3572 7.97928 52.3206 7.59432C49.1328 6.40422 44.79 8.90016 41.4537 14.2946C38.9402 18.3606 37.5614 23.1663 37.4683 27.2977C38.286 27.7505 39.2874 27.9393 40.2359 27.8462C40.8624 27.7858 41.4663 27.6021 41.9796 27.2876C42.1381 27.1895 42.2765 27.0838 42.4048 26.9706C42.5004 23.8179 43.5597 20.1772 45.4694 17.09C47.5476 13.7285 50.1367 11.8314 52.3483 11.7156C52.5445 11.9043 52.7307 12.1157 52.9018 12.3598C55.2393 15.6332 54.4668 22.5951 51.1808 27.9141C51.1381 27.982 51.0953 28.05 51.0525 28.1179L53.2088 30.0251L54.7587 31.3938C54.9071 31.1724 55.0531 30.9434 55.1965 30.712C59.4662 23.8054 60.4702 14.7601 57.4333 10.5104V10.5079Z"
                          stroke="#0500FF"
                          strokeWidth="0.5"
                          strokeLinecap="round"
                          strokeLinejoin="round"
                        />
                        <defs>
                          <linearGradient
                            id="paint0_linear_51_272591"
                            x1="61.9827"
                            y1="72.2573"
                            x2="71.1308"
                            y2="35.029"
                            gradientUnits="userSpaceOnUse"
                          >
                            <stop stopColor="#48FF91" />
                            <stop offset="1" stopColor="#FFF465" />
                          </linearGradient>
                          <linearGradient
                            id="paint1_linear_51_272591"
                            x1="77.7401"
                            y1="76.0095"
                            x2="86.1739"
                            y2="73.8408"
                            gradientUnits="userSpaceOnUse"
                          >
                            <stop stopColor="#FFAEFE" />
                            <stop offset="1" stopColor="#FFF465" />
                          </linearGradient>
                          <linearGradient
                            id="paint2_linear_51_272591"
                            x1="51.451"
                            y1="32.3909"
                            x2="26.22"
                            y2="29.534"
                            gradientUnits="userSpaceOnUse"
                          >
                            <stop stopColor="#0502FF" />
                            <stop offset="0.18" stopColor="#1131FF" />
                            <stop offset="0.36" stopColor="#1B59FF" />
                            <stop offset="0.53" stopColor="#2377FF" />
                            <stop offset="0.69" stopColor="#288DFF" />
                            <stop offset="0.85" stopColor="#2B9AFF" />
                            <stop offset="1" stopColor="#2D9FFF" />
                          </linearGradient>
                          <linearGradient
                            id="paint3_linear_51_272591"
                            x1="4.9359"
                            y1="41.2612"
                            x2="34.817"
                            y2="44.6446"
                            gradientUnits="userSpaceOnUse"
                          >
                            <stop stopColor="#FFAEFE" />
                            <stop offset="1" stopColor="#FFF465" />
                          </linearGradient>
                          <linearGradient
                            id="paint4_linear_51_272591"
                            x1="51.6885"
                            y1="21.7431"
                            x2="55.1556"
                            y2="14.5367"
                            gradientUnits="userSpaceOnUse"
                          >
                            <stop stopColor="#F4F4F7" />
                            <stop offset="0.15" stopColor="#F0F2F7" />
                            <stop offset="0.29" stopColor="#E4EDF7" />
                            <stop offset="0.43" stopColor="#D0E4F8" />
                            <stop offset="0.57" stopColor="#B5D9F9" />
                            <stop offset="0.71" stopColor="#91C9FA" />
                            <stop offset="0.85" stopColor="#65B7FC" />
                            <stop offset="0.98" stopColor="#33A1FE" />
                            <stop offset="1" stopColor="#2D9FFF" />
                          </linearGradient>
                          <linearGradient
                            id="paint5_linear_51_272591"
                            x1="44.026"
                            y1="19.2817"
                            x2="40.6673"
                            y2="25.5305"
                            gradientUnits="userSpaceOnUse"
                          >
                            <stop stopColor="#F4F4F7" />
                            <stop offset="0.15" stopColor="#F0F2F7" />
                            <stop offset="0.29" stopColor="#E4EDF7" />
                            <stop offset="0.43" stopColor="#D0E4F8" />
                            <stop offset="0.57" stopColor="#B5D9F9" />
                            <stop offset="0.71" stopColor="#91C9FA" />
                            <stop offset="0.85" stopColor="#65B7FC" />
                            <stop offset="0.98" stopColor="#33A1FE" />
                            <stop offset="1" stopColor="#2D9FFF" />
                          </linearGradient>
                        </defs>
                      </svg>
                      <p className="font-bold text-white text-sm">
                        Запишите секретную фразу из 12 слов на листке бумаги.
                        Никогда и никому не отправляйте и не показывайте эти
                        данные.
                      </p>
                    </div>

                    {/* Поле с мнемоникой */}
                    <div className="bg-[#242426] border border-[#3A3A3C] rounded-xl p-6 mb-4 relative">
                      <p
                        className={`text-gray-400 text-lg  p-4 leading-relaxed break-words ${
                          !showMnemonic ? "blur-md select-none" : ""
                        }`}
                      >
                        {generatedMnemonic}
                      </p>
                    </div>

                    {/* Кнопки */}
                    <div className="flex gap-3">
                      <button
                        onClick={() => {
                          setGeneratedMnemonic("");
                          setMnemonic("");
                          setShowMnemonic(false);
                        }}
                        className="flex-1 bg-transparent text-[#48FF91]  py-3 px-4 rounded-xl hover:bg-[#48FF91]/10 transition-colors"
                      >
                        Отмена
                      </button>
                      {!showMnemonic ? (
                        <button
                          onClick={() => setShowMnemonic(true)}
                          className="flex-1 bg-[#48FF91] hover:bg-[#3de881] text-black  py-3 px-4 rounded-2xl transition-colors"
                        >
                          Показать
                        </button>
                      ) : (
                        <button
                          onClick={handleUseGeneratedWallet}
                          disabled={loading}
                          className="flex-1 bg-[#48FF91] hover:bg-[#3de881] text-black  py-3 px-4 rounded-2xl transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
                        >
                          {loading ? "Подключение..." : "Продолжить"}
                        </button>
                      )}
                    </div>
                  </>
                ) : mode === "connect" && step === 2 ? (
                  <>
                    {/* Шаг 2: Импорт Secret Phrase */}
                    <div className="text-center mb-4">
                      <h3 className="text-[1.75rem]  text-white mb-2">
                        Введите вашу Secret Phrase
                      </h3>
                      <p className="text-gray-400 ">
                        Введите вашу Secret Phrase состоящую из 12 или 24 слов для
                        подключения кошелька
                      </p>
                    </div>

                    <div className="space-y-4">
                      <div>
                        <textarea
                          value={mnemonic}
                          onChange={(e) => {
                            const raw = e.target.value;
                            const normalized = raw
                              .toLowerCase()
                              .replace(/[^a-z\s]/g, "")
                              .replace(/\s+/g, " ");
                            setMnemonic(normalized);
                          }}
                          onPaste={(e) => {
                            e.preventDefault();
                            const pasted = (e.clipboardData || window.clipboardData).getData('text');
                            const normalized = pasted
                              .toLowerCase()
                              .replace(/[^a-z\s]/g, "")
                              .replace(/\s+/g, " ")
                              .trim();
                            setMnemonic(normalized);
                          }}
                          className={`w-full bg-[#1C1C1E] border rounded-xl px-4 py-3 text-white placeholder-gray-500 focus:outline-none transition-colors h-24 resize-none  ${
                            mnemonic && mnemonicValidation.isValid
                              ? "border-[#48FF91]"
                              : mnemonic && !mnemonicValidation.isValid
                              ? "border-red-500"
                              : "border-[#3A3A3C] focus:border-[#48FF91]"
                          }`}
                          placeholder="Слово1 слово2 слово3 ..."
                          required
                        />
                        {/* Индикация валидности мнемоники */}
                        {mnemonic && (
                          <div className="mt-2">
                            <div className="flex items-center gap-2">
                              <svg
                                className={`w-4 h-4 ${
                                  mnemonicValidation.isValid
                                    ? "text-[#48FF91]"
                                    : "text-red-500"
                                }`}
                                fill="currentColor"
                                viewBox="0 0 20 20"
                              >
                                <path
                                  fillRule="evenodd"
                                  d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                                  clipRule="evenodd"
                                />
                              </svg>
                              <span
                                className={`text-sm  ${
                                  mnemonicValidation.isValid
                                    ? "text-[#48FF91]"
                                    : "text-red-400"
                                }`}
                              >
                                {mnemonicValidation.isValid
                                  ? `Мнемоника корректна (${mnemonicValidation.wordCount} слов)`
                                  : mnemonicValidation.errorMessage}
                              </span>
                            </div>
                          </div>
                        )}
                      </div>

                      <button
                        type="button"
                        onClick={() => setShowQrSyncModal(true)}
                        className="w-full flex items-center justify-start gap-2.5 px-4 h-[56px] rounded-xl border border-[#2d313a] text-[#eaecef] hover:bg-[#48FF91]/5 transition-colors text-base"
                      >
                        <svg className="text-[#48FF91]" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" xmlns="http://www.w3.org/2000/svg">
                          <rect x="3" y="3" width="7" height="7" />
                          <rect x="14" y="3" width="7" height="7" />
                          <rect x="14" y="14" width="7" height="7" />
                          <rect x="3" y="14" width="7" height="7" />
                        </svg>
                        Импорт по QR-коду
                      </button>

                      <div className="flex gap-3">
                        <button
                          onClick={() => setStep(1)}
                          className="flex-1 text-[#48FF91] py-3 px-4 rounded-xl border border-[#2d313a] hover:bg-[#48FF91]/10 transition-colors"
                        >
                          Назад
                        </button>
                        <button
                          onClick={handleConnect}
                          disabled={
                            loading ||
                            !mnemonic ||
                            !password ||
                            !mnemonicValidation.isValid
                          }
                          className="flex-1 bg-[#48FF91] hover:bg-[#3de881] text-black  py-3 px-4 rounded-xl transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
                        >
                          {loading ? "Импорт..." : "Импортировать"}
                        </button>
                      </div>
                    </div>
                  </>
                ) : null}
              </div>
            ) : null}
          </div>
        )}

        {showQrSyncModal && (
          <div className="fixed inset-0 z-[1000] bg-black/65 flex items-center justify-center p-5">
            <div className="w-full max-w-[360px] rounded-[24px] bg-[#1a1c20] border border-[#252932] shadow-[0_20px_60px_rgba(0,0,0,0.55)] px-6 py-7 relative">
              <button
                type="button"
                onClick={() => setShowQrSyncModal(false)}
                className="absolute top-5 right-5 text-[#8e95a3] hover:text-white transition-colors"
                aria-label="Закрыть"
              >
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M18 6L6 18M6 6L18 18" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
                </svg>
              </button>

              <div className="flex flex-col items-center text-center pt-4">
                <svg width="52" height="62" viewBox="0 0 62 87" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <g clipPath="url(#clip0_logo_modal)">
                    <path d="M-0.00195312 26.9479L30.5756 16.9648V86.0759C8.73428 76.8606 -0.00195312 59.1989 -0.00195312 49.2159V26.9465V26.9479Z" fill="#48FF91" />
                    <path d="M61.1556 26.9479L30.5781 16.9648V86.0759C52.4194 76.8606 61.1556 59.1989 61.1556 49.2172V26.9479Z" fill="url(#paint0_logo_modal)" />
                  </g>
                  <defs>
                    <linearGradient id="paint0_logo_modal" x1="29.1518" y1="94.7238" x2="54.3898" y2="3.84876" gradientUnits="userSpaceOnUse">
                      <stop offset="0.26" stopColor="#48FF91" />
                      <stop offset="0.66" stopColor="#0094FF" />
                      <stop offset="0.8" stopColor="#0038FF" />
                      <stop offset="0.89" stopColor="#0500FF" />
                    </linearGradient>
                    <clipPath id="clip0_logo_modal">
                      <rect width="61.1691" height="86.0768" fill="white" />
                    </clipPath>
                  </defs>
                </svg>

                <p className="mt-7 text-[1.08rem] leading-8 text-[#eaecef]">
                  Эта функция доступна только в мультимонетном кошельке.
                </p>

                <button
                  type="button"
                  onClick={() => setShowQrSyncModal(false)}
                  className="mt-7 w-full h-10 rounded-full bg-[#48FF91] hover:bg-[#3de881] text-black text-[1rem] transition-colors"
                >
                  ОК
                </button>
              </div>
            </div>
          </div>
        )}
      </div>
    </div>
  );
};

export default LoginPage;
