<!--
  Copyright (c) 2024-2026 Тарабанов Александр Викторович
  All rights reserved.

  This software is proprietary and confidential.
  Unauthorized copying, modification, or distribution is prohibited.

  For licensing inquiries: info@hb3-accelerator.com
  Website: https://hb3-accelerator.com
  GitHub: https://github.com/VC-HB3-Accelerator
-->

<template>
  <BaseLayout
    :is-authenticated="props.isAuthenticated"
    :identities="props.identities"
    :token-balances="props.tokenBalances"
    :is-loading-tokens="props.isLoadingTokens"
    @auth-action-completed="$emit('auth-action-completed')"
  >
    <div class="transfer-tokens-page">
      <!-- Информация для неавторизованных пользователей -->
      <div style="margin-bottom: 20px; display: flex; justify-content: space-between; align-items: center;">
        <div v-if="selectedDle?.dleAddress" style="color: var(--color-grey-dark); font-size: 0.9rem;">
          {{ selectedDle.dleAddress }}
        </div>
        <div v-else-if="dleAddress" style="color: var(--color-grey-dark); font-size: 0.9rem;">
          {{ dleAddress }}
        </div>
        <div v-else-if="isLoadingDle" style="color: var(--color-grey-dark); font-size: 0.9rem;">
          Загрузка...
        </div>
        <button class="close-btn" @click="goBackToProposals">×</button>
      </div>
      <div v-if="!props.isAuthenticated" class="auth-notice">
        <div class="alert alert-info">
          <i class="fas fa-info-circle"></i>
          <strong>Для создания предложений необходимо авторизоваться в приложении</strong>
          <p class="mb-0 mt-2">Подключите кошелек в сайдбаре для создания новых предложений</p>
        </div>
      </div>

      <!-- Форма передачи токенов -->
      <div v-if="props.isAuthenticated" class="transfer-tokens-form">
        <form @submit.prevent="submitForm" class="form-container">
          <!-- Адрес отправителя -->
          <div class="form-group">
            <label for="sender" class="form-label">
              <i class="fas fa-paper-plane"></i>
              Адрес отправителя *
            </label>
            <input
              type="text"
              id="sender"
              v-model="formData.sender"
              class="form-input"
              readonly
              required
            />
            <small class="form-help">
              Ваш подключенный кошелек - токены будут отправлены с этого адреса
            </small>
          </div>

          <!-- Адрес получателя -->
          <div class="form-group">
            <label for="recipient" class="form-label">
              <i class="fas fa-user"></i>
              Адрес получателя *
            </label>
            <input
              type="text"
              id="recipient"
              v-model="formData.recipient"
              class="form-input"
              placeholder="0x..."
              required
            />
            <small class="form-help">
              Ethereum-адрес получателя токенов DLE
            </small>
          </div>

          <!-- Количество токенов -->
          <div class="form-group">
            <label for="amount" class="form-label">
              <i class="fas fa-coins"></i>
              Количество токенов *
            </label>
            <input
              type="number"
              id="amount"
              v-model.number="formData.amount"
              class="form-input"
              placeholder="1000000"
              min="1"
              step="1"
              required
            />
            <small class="form-help">
              Количество токенов для перевода (без decimals)
            </small>
            <div v-if="dleInfo?.totalSupply" class="balance-info">
              <i class="fas fa-info-circle"></i>
              Доступный баланс DLE: {{ formatTokenAmount(dleInfo.totalSupply) }} {{ dleInfo.symbol }}
            </div>
          </div>

          <!-- Описание предложения -->
          <div class="form-group">
            <label for="description" class="form-label">
              <i class="fas fa-file-alt"></i>
              Описание предложения *
            </label>
            <textarea
              id="description"
              v-model="formData.description"
              class="form-textarea"
              placeholder="Опишите цель перевода токенов..."
              rows="3"
              required
            ></textarea>
            <small class="form-help">
              Подробное описание предложения для голосования
            </small>
          </div>

          <!-- Время голосования -->
          <div class="form-group">
            <label for="votingDuration" class="form-label">
              <i class="fas fa-clock"></i>
              Время голосования *
            </label>
            <select
              id="votingDuration"
              v-model="formData.votingDuration"
              class="form-select"
              required
            >
              <option value="">Выберите время голосования</option>
              <option value="3600">1 час</option>
              <option value="86400">1 день</option>
              <option value="259200">3 дня</option>
              <option value="604800">7 дней</option>
              <option value="1209600">14 дней</option>
            </select>
            <small class="form-help">
              Время, в течение которого будет проходить голосование
            </small>
          </div>

          <!-- Информация о мульти-чейн развертывании -->
          <div v-if="dleInfo?.deployedNetworks && dleInfo.deployedNetworks.length > 1" class="multichain-info">
            <i class="fas fa-info-circle"></i>
            <strong>Мульти-чейн деплой:</strong> Предложение будет создано для {{ dleInfo.deployedNetworks.length }} сетей: {{
              dleInfo.deployedNetworks.map(net => getChainName(net.chainId)).join(', ')
            }}. Голосование и исполнение произойдет в каждой сети отдельно.
          </div>

          <!-- Кнопки -->
          <div class="form-actions">
            <button type="button" class="btn-secondary" @click="goBackToProposals">
              <i class="fas fa-arrow-left"></i>
              Назад
            </button>
            <button type="submit" class="btn-primary" :disabled="isSubmitting">
              <i class="fas fa-paper-plane" :class="{ 'fa-spin': isSubmitting }"></i>
              {{ isSubmitting ? 'Создание...' : 'Создать предложение' }}
            </button>
          </div>
        </form>

        <!-- Результат создания предложений -->
        <div v-if="proposalResult" class="proposal-result">
          <div class="alert" :class="proposalResult.success ? 'alert-success' : 'alert-danger'">
            <i :class="proposalResult.success ? 'fas fa-check-circle' : 'fas fa-exclamation-triangle'"></i>
            <strong>{{ proposalResult.success ? 'Успех!' : 'Ошибка!' }}</strong>
            <p class="mb-0 mt-2">{{ proposalResult.message }}</p>
          </div>

          <!-- Детализация по цепочкам -->
          <div v-if="proposalResult.results" class="chain-results">
            <h5>Результаты по цепочкам:</h5>
            <div class="chain-result-list">
              <div
                v-for="result in proposalResult.results"
                :key="result.chainId"
                class="chain-result-item"
                :class="{ success: result.success, error: !result.success }"
              >
                <div class="chain-header">
                  <span class="chain-name">{{ getChainName(result.chainId) }}</span>
                  <span class="chain-status">
                    <i :class="result.success ? 'fas fa-check' : 'fas fa-times'"></i>
                    {{ result.success ? 'Успешно' : 'Ошибка' }}
                  </span>
                </div>
                <div v-if="result.success && result.proposalId" class="proposal-info">
                  <small>ID предложения: {{ result.proposalId }}</small>
                  <br>
                  <small>Адрес контракта: {{ shortenAddress(result.contractAddress) }}</small>
                </div>
                <div v-if="!result.success" class="error-info">
                  <small>{{ result.error }}</small>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </BaseLayout>
</template>

<script setup>
import { defineProps, defineEmits, ref, onMounted, computed, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import BaseLayout from '../../components/BaseLayout.vue';
import api from '@/api/axios';
import { ethers } from 'ethers';
import { createProposal, switchToVotingNetwork } from '@/utils/dle-contract';
import { useAuthContext } from '../../composables/useAuth';

// Определяем props
const props = defineProps({
  isAuthenticated: { type: Boolean, default: false },
  identities: { type: Array, default: () => [] },
  tokenBalances: { type: Object, default: () => ({}) },
  isLoadingTokens: { type: Boolean, default: false }
});

// Определяем emits
const emit = defineEmits(['auth-action-completed']);

const router = useRouter();
const route = useRoute();

// Получаем контекст аутентификации
const { address: currentUserAddress } = useAuthContext();

// Реактивные данные
const dleAddress = ref(route.query.address || '');
const selectedDle = ref(null);
const isLoadingDle = ref(false);
const dleInfo = ref(null);
const supportedChains = ref([]);
const isSubmitting = ref(false);
const proposalResult = ref(null);

// Форма
const formData = ref({
  sender: '',
  recipient: '',
  amount: null,
  description: '',
  votingDuration: '',
  governanceChain: ''
});

// Загрузка информации о DLE
async function loadDleInfo() {
  if (!dleAddress.value) return;

  try {
    isLoadingDle.value = true;

    // Получаем информацию о DLE из API, который возвращает все развернутые сети
    const response = await api.get('/dle-v2');

    if (response.data.success) {
      const allDles = response.data.data || [];
      console.log('All DLEs from API:', allDles);
      
      // Ищем DLE по адресу (может быть в любой из сетей)
      let foundDle = null;
      for (const dle of allDles) {
        // Проверяем, есть ли этот адрес в deployedNetworks
        const networkMatch = dle.deployedNetworks?.find(net => 
          net.address?.toLowerCase() === dleAddress.value.toLowerCase()
        );
        if (networkMatch) {
          foundDle = dle;
          break;
        }
      }

      if (foundDle) {
        // Используем deployedNetworks из найденного DLE
        dleInfo.value = {
          ...foundDle,
          deployedNetworks: foundDle.deployedNetworks || []
        };
        console.log('DLE Info loaded:', dleInfo.value);
        console.log('Deployed networks count:', dleInfo.value?.deployedNetworks?.length || 0);
        console.log('Deployed networks:', dleInfo.value?.deployedNetworks);

        // Получаем поддерживаемые цепочки из данных DLE
        if (dleInfo.value.deployedNetworks && dleInfo.value.deployedNetworks.length > 0) {
          supportedChains.value = dleInfo.value.deployedNetworks.map(net => ({
            chainId: net.chainId,
            name: getChainName(net.chainId)
          }));
        } else {
          console.warn('No deployed networks found for DLE');
          supportedChains.value = [];
        }
      } else {
        console.warn('DLE not found in API response, trying blockchain read...');
        // Fallback: получаем информацию из блокчейна (только текущая сеть)
        const blockchainResponse = await api.post('/blockchain/read-dle-info', {
          dleAddress: dleAddress.value
        });

        if (blockchainResponse.data.success) {
          dleInfo.value = blockchainResponse.data.data;
          console.log('DLE Info loaded from blockchain:', dleInfo.value);
        }
      }
    }

  } catch (error) {
    console.error('Error loading DLE info:', error);
  } finally {
    isLoadingDle.value = false;
  }
}

// Валидация адреса Ethereum
function isValidAddress(address) {
  return /^0x[a-fA-F0-9]{40}$/.test(address);
}

// Форматирование количества токенов
function formatTokenAmount(amount) {
  if (!amount) return '0';
  const num = parseFloat(amount);
  if (num === 0) return '0';

  if (num < 1) {
    return num.toLocaleString('ru-RU', {
      minimumFractionDigits: 0,
      maximumFractionDigits: 18
    });
  }

  return num.toLocaleString('ru-RU', { maximumFractionDigits: 0 });
}

// Сокращение адреса
function shortenAddress(address) {
  if (!address) return '';
  return `${address.slice(0, 6)}...${address.slice(-4)}`;
}

// Получение имени цепочки
function getChainName(chainId) {
  const chainNames = {
    1: 'Ethereum',
    11155111: 'Sepolia',
    17000: 'Holesky',
    421614: 'Arbitrum Sepolia',
    84532: 'Base Sepolia',
    137: 'Polygon',
    56: 'BSC',
    42161: 'Arbitrum'
  };
  return chainNames[chainId] || `Chain ${chainId}`;
}

// Функция для проверки, является ли ошибка временной RPC ошибкой
function isRetryableRpcError(error) {
  if (!error) return false;
  
  const errorMessage = error.message?.toLowerCase() || '';
  const errorCode = error.code;
  
  // Проверяем на временные RPC ошибки
  const retryablePatterns = [
    'internal json-rpc error',
    'json-rpc error',
    'rpc error',
    'network error',
    'timeout',
    'connection',
    'econnrefused',
    'etimedout',
    'could not coalesce error',
    'rate limit',
    'too many requests'
  ];
  
  // Коды ошибок, которые можно повторить
  const retryableCodes = [-32603, -32000, -32002, -32005];
  
  return retryablePatterns.some(pattern => errorMessage.includes(pattern)) ||
         retryableCodes.includes(errorCode);
}

// Функция retry с экспоненциальной задержкой
async function retryWithBackoff(fn, maxRetries = 3, initialDelay = 1000) {
  let lastError;
  
  for (let attempt = 1; attempt <= maxRetries; attempt++) {
    try {
      return await fn();
    } catch (error) {
      lastError = error;
      
      // Если это не временная RPC ошибка, не повторяем
      if (!isRetryableRpcError(error)) {
        console.log(`❌ [RETRY] Не повторяемая ошибка:`, error.message);
        throw error;
      }
      
      // Если это последняя попытка, выбрасываем ошибку
      if (attempt === maxRetries) {
        console.log(`❌ [RETRY] Исчерпаны все попытки (${maxRetries})`);
        throw error;
      }
      
      // Вычисляем задержку с экспоненциальным backoff
      const delay = initialDelay * Math.pow(2, attempt - 1);
      console.log(`🔄 [RETRY] Попытка ${attempt}/${maxRetries} не удалась, повтор через ${delay}ms...`);
      console.log(`🔄 [RETRY] Ошибка:`, error.message);
      
      await new Promise(resolve => setTimeout(resolve, delay));
    }
  }
  
  throw lastError;
}

// Создание encoded call data для _transferTokens
// КРИТИЧЕСКИ ВАЖНО: используйте правильную сигнатуру _transferTokens(address,address,uint256)
// и конвертируйте amount в wei
function encodeTransferTokensCall(sender, recipient, amount) {
  const functionSignature = '_transferTokens(address,address,uint256)';
  const iface = new ethers.Interface([`function ${functionSignature}`]);
  
  // КРИТИЧЕСКИ ВАЖНО: конвертируем amount в wei (1 токен = 10^18 wei)
  const amountInWei = ethers.parseUnits(amount.toString(), 18);
  
  // Кодирование операции с тремя параметрами: sender, recipient, amountInWei
  const encodedCall = iface.encodeFunctionData('_transferTokens', [
    sender,        // адрес инициатора (обязательно!)
    recipient,     // адрес получателя
    amountInWei    // количество в wei (обязательно!)
  ]);

  return encodedCall;
}

// Отправка формы
async function submitForm() {
  try {
    isSubmitting.value = true;
    proposalResult.value = null;

    // Валидация
    if (!isValidAddress(formData.value.sender)) {
      throw new Error('Некорректный адрес отправителя');
    }

    // Проверяем, что адрес отправителя совпадает с адресом пользователя (case-insensitive)
    if (formData.value.sender.toLowerCase() !== currentUserAddress.value?.toLowerCase()) {
      throw new Error('Адрес отправителя должен совпадать с вашим подключенным кошельком');
    }

    if (!isValidAddress(formData.value.recipient)) {
      throw new Error('Некорректный адрес получателя');
    }

    // Проверяем, что получатель не является zero address
    if (formData.value.recipient.toLowerCase() === '0x0000000000000000000000000000000000000000') {
      throw new Error('Адрес получателя не может быть нулевым адресом');
    }

    // Проверяем, что отправитель и получатель не совпадают
    if (formData.value.sender.toLowerCase() === formData.value.recipient.toLowerCase()) {
      throw new Error('Адрес отправителя и получателя не могут совпадать');
    }

    if (!formData.value.amount || formData.value.amount <= 0) {
      throw new Error('Некорректное количество токенов');
    }

    if (!formData.value.description.trim()) {
      throw new Error('Описание предложения обязательно');
    }

    if (!formData.value.votingDuration) {
      throw new Error('Выберите время голосования');
    }

    // Получаем все поддерживаемые цепочки из DLE информации
    console.log('DLE Info for proposal creation:', dleInfo.value);
    console.log('Deployed networks:', dleInfo.value?.deployedNetworks);

    if (!dleInfo.value?.deployedNetworks || dleInfo.value.deployedNetworks.length === 0) {
      throw new Error('Не найдены развернутые сети для DLE контракта');
    }

    const allChains = dleInfo.value.deployedNetworks.map(net => {
      console.log('Network info:', { chainId: net.chainId, address: net.address, name: net.networkName });
      return net.chainId;
    });

    console.log('Creating proposals in chains:', allChains);
    console.log('Number of chains:', allChains.length);

    if (allChains.length === 0) {
      throw new Error('Не найдено ни одной цепочки для создания предложений');
    }

    // Создаем предложения последовательно во всех цепочках с переключением сети
    console.log(`🚀 Starting to create ${allChains.length} proposals sequentially...`);

    const results = [];
    
    for (let index = 0; index < allChains.length; index++) {
      const chainId = allChains[index];
      console.log(`📝 [${index + 1}/${allChains.length}] Starting proposal creation for chain ${chainId}`);

      try {
        // Переключаемся на нужную сеть перед созданием предложения
        console.log(`🔄 [${index + 1}/${allChains.length}] Switching to network ${chainId}...`);
        const networkSwitched = await switchToVotingNetwork(chainId);
        console.log(`🔄 [${index + 1}/${allChains.length}] Network switch result:`, networkSwitched);
        
        if (!networkSwitched) {
          throw new Error(`Не удалось переключиться на сеть ${chainId}`);
        }

        // Проверяем текущую сеть после переключения
        const currentChainId = await window.ethereum.request({ method: 'eth_chainId' });
        console.log(`🔍 [${index + 1}/${allChains.length}] Current chain after switch:`, currentChainId, `Expected: 0x${chainId.toString(16)}`);

        // Небольшая задержка после переключения сети
        console.log(`⏳ [${index + 1}/${allChains.length}] Waiting 1 second after network switch...`);
        await new Promise(resolve => setTimeout(resolve, 1000));

        // КРИТИЧЕСКИ ВАЖНО: Получаем адрес signer для текущей сети
        // Это гарантирует, что sender в операции совпадает с инициатором предложения
        const provider = new ethers.BrowserProvider(window.ethereum);
        const signer = await provider.getSigner();
        const senderAddress = await signer.getAddress();
        console.log(`🔑 [${index + 1}/${allChains.length}] Sender address for chain ${chainId}:`, senderAddress);

        // Проверяем, что адрес signer совпадает с адресом из формы
        if (senderAddress.toLowerCase() !== formData.value.sender.toLowerCase()) {
          throw new Error(`Адрес signer (${senderAddress}) не совпадает с адресом отправителя из формы (${formData.value.sender})`);
        }

        // Кодируем операцию перевода токенов для текущей сети
        // Используем адрес signer, чтобы гарантировать совпадение с инициатором предложения
        const transferCallData = encodeTransferTokensCall(
          senderAddress,
          formData.value.recipient,
          formData.value.amount
        );

        const proposalData = {
          description: formData.value.description,
          duration: parseInt(formData.value.votingDuration),
          operation: transferCallData,
          targetChains: [chainId], // Операция выполняется в той же цепочке
          timelockDelay: 0
        };

        console.log(`📋 [${index + 1}/${allChains.length}] Proposal data for chain ${chainId}:`, proposalData);

        // Получаем адрес контракта для этой цепочки
        const networkInfo = dleInfo.value?.deployedNetworks?.find(net => net.chainId === chainId);
        const contractAddress = networkInfo?.address || dleAddress.value;

        console.log(`🔄 [${index + 1}/${allChains.length}] Calling createProposal for chain ${chainId}, contract: ${contractAddress}`);
        
        // Используем retry для временных RPC ошибок
        const result = await retryWithBackoff(
          async () => {
            return await createProposal(contractAddress, proposalData);
          },
          3, // Максимум 3 попытки
          2000 // Начальная задержка 2 секунды
        );
        
        console.log(`✅ [${index + 1}/${allChains.length}] Proposal created successfully in chain ${chainId}:`, result);

        // Дополнительная задержка после подтверждения транзакции
        // чтобы MetaMask успел обработать транзакцию перед переходом к следующей цепочке
        // Для Base Sepolia увеличиваем задержку, так как уведомления могут приходить медленнее
        if (result.success && result.txHash) {
          const delay = chainId === 84532 ? 5000 : 3000; // 5 секунд для Base Sepolia, 3 для остальных
          console.log(`⏳ [${index + 1}/${allChains.length}] Waiting ${delay/1000} seconds for MetaMask to process transaction in ${getChainName(chainId)}...`);
          await new Promise(resolve => setTimeout(resolve, delay));
        }

        results.push({
          chainId,
          success: result.success,
          proposalId: result.proposalId,
          txHash: result.txHash,
          error: result.error,
          contractAddress
        });
      } catch (error) {
        console.error(`❌ [${index + 1}/${allChains.length}] Error creating proposal in chain ${chainId}:`, error);
        console.error(`❌ [${index + 1}/${allChains.length}] Error details:`, {
          message: error.message,
          stack: error.stack,
          name: error.name
        });
        results.push({
          chainId,
          success: false,
          error: error.message || 'Неизвестная ошибка',
          contractAddress: dleInfo.value?.deployedNetworks?.find(net => net.chainId === chainId)?.address || dleAddress.value
        });
      }
    }

    console.log(`📊 Всего обработано цепочек: ${results.length} из ${allChains.length}`);
    console.log(`📊 Результаты создания предложений:`, results);

    // Проверяем результаты
    const successful = results.filter(r => r.success);
    const failed = results.filter(r => !r.success);

    console.log(`✅ Успешно создано в ${successful.length} цепочках`);
    console.log(`❌ Ошибок в ${failed.length} цепочках`);

    if (successful.length > 0) {
      proposalResult.value = {
        success: true,
        message: `Предложения созданы в ${successful.length} из ${allChains.length} цепочек!`,
        results: results,
        successfulChains: successful,
        failedChains: failed
      };

      // Автоматический переход на страницу предложений
      console.log('🔄 Переход на страницу предложений...');
      router.push(`/management/proposals?address=${dleAddress.value}`);

      // Очистка формы только при полном успехе
      if (failed.length === 0) {
        formData.value = {
          sender: '',
          recipient: '',
          amount: null,
          description: '',
          votingDuration: '',
          governanceChain: ''
        };
      }
    } else {
      throw new Error('Не удалось создать предложения ни в одной цепочке');
    }

  } catch (error) {
    console.error('Error creating transfer proposals:', error);
    proposalResult.value = {
      success: false,
      message: error.message || 'Произошла ошибка при создании предложений'
    };
  } finally {
    isSubmitting.value = false;
  }
}

// Навигация
function goBackToProposals() {
  if (dleAddress.value) {
    router.push(`/management/create-proposal?address=${dleAddress.value}`);
  } else {
    router.push('/management/create-proposal');
  }
}

// Инициализация
// Watcher для автоматического обновления адреса отправителя
watch(currentUserAddress, (newAddress) => {
  formData.value.sender = newAddress;
});

onMounted(() => {
  console.log('[TransferTokensFormView] currentUserAddress:', currentUserAddress.value);
  // Автоматически устанавливаем адрес отправителя
  formData.value.sender = currentUserAddress.value;
  console.log('[TransferTokensFormView] formData.sender set to:', formData.value.sender);
  loadDleInfo();
});
</script>

<style scoped>
.transfer-tokens-page {
  padding: 20px;
  background-color: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  margin-top: 20px;
  margin-bottom: 20px;
}

.transfer-tokens-form {
  margin-top: 2rem;
}

.form-container {
  background: white;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-label {
  display: block;
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
}

.form-label i {
  margin-right: 0.5rem;
}

.form-input,
.form-textarea,
.form-select {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 0.9rem;
  transition: border-color 0.2s;
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

.form-textarea {
  resize: vertical;
  min-height: 80px;
}

.form-help {
  display: block;
  color: #6c757d;
  font-size: 0.8rem;
  margin-top: 0.25rem;
}

.balance-info {
  margin-top: 0.5rem;
  padding: 0.5rem;
  background: #f8f9fa;
  border-radius: 4px;
  font-size: 0.85rem;
  color: #495057;
}

.balance-info i {
  margin-right: 0.5rem;
  color: #17a2b8;
}

.multichain-info {
  margin-top: 0.5rem;
  padding: 0.75rem;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: 6px;
  font-size: 0.85rem;
  border: 2px solid rgba(255, 255, 255, 0.2);
}

.multichain-info i {
  margin-right: 0.5rem;
  color: #fff;
}

.multichain-info strong {
  color: #fff;
}

.form-actions {
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid #e9ecef;
}

.btn-primary,
.btn-secondary {
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.9rem;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.btn-primary {
  background: var(--color-primary);
  color: white;
}

.btn-primary:hover:not(:disabled) {
  background: var(--color-primary-dark);
  transform: translateY(-1px);
}

.btn-secondary {
  background: #6c757d;
  color: white;
}

.btn-secondary:hover {
  background: #5a6268;
  transform: translateY(-1px);
}

.btn-primary:disabled,
.btn-secondary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.proposal-result {
  margin-top: 2rem;
}

.alert {
  padding: 1rem;
  border-radius: 6px;
  border: 1px solid transparent;
}

.alert-success {
  background: #d4edda;
  border-color: #c3e6cb;
  color: #155724;
}

.alert-danger {
  background: #f8d7da;
  border-color: #f5c6cb;
  color: #721c24;
}

.alert i {
  margin-right: 0.5rem;
}

.chain-results {
  margin-top: 1.5rem;
}

.chain-results h5 {
  margin-bottom: 1rem;
  color: var(--color-primary);
  font-size: 1rem;
}

.chain-result-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.chain-result-item {
  padding: 0.75rem;
  border-radius: 6px;
  border: 1px solid #e9ecef;
  background: white;
}

.chain-result-item.success {
  border-color: #d4edda;
  background: #f8fff9;
}

.chain-result-item.error {
  border-color: #f5c6cb;
  background: #fff8f8;
}

.chain-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.chain-name {
  font-weight: 600;
  color: var(--color-primary);
}

.chain-status {
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.chain-status i {
  font-size: 0.75rem;
}

.proposal-info {
  color: #6c757d;
  font-size: 0.8rem;
}

.error-info {
  color: #dc3545;
  font-size: 0.8rem;
}

.close-btn {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: #666;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.2s;
}

.close-btn:hover {
  background: #f0f0f0;
  color: #333;
}

.auth-notice {
  margin-top: 2rem;
}

/* Адаптивность */
@media (max-width: 768px) {
  .transfer-tokens-page {
    padding: 15px;
  }

  .form-container {
    padding: 1.5rem;
  }

  .form-actions {
    flex-direction: column;
  }

  .btn-primary,
  .btn-secondary {
    width: 100%;
    justify-content: center;
  }
}
</style>
