<!--
  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>
  <transition name="sidebar-slide">
    <div v-if="modelValue" class="wallet-sidebar">
      <div class="wallet-sidebar-content">
        <!-- Блок для неавторизованных пользователей -->
        <div v-if="!isAuthenticated">
          <div class="button-with-close">
            <button
              v-if="
                !telegramAuth?.showVerification &&
                !emailAuth?.showForm &&
                !emailAuth?.showVerification
              "
              class="auth-btn connect-wallet-btn"
              @click="handleWalletAuth"
            >
              Подключить кошелек
            </button>
            <button class="close-sidebar-btn" @click="closeSidebar">×</button>
          </div>
        </div>

        <!-- Блок для авторизованных пользователей -->
        <div v-if="isAuthenticated">
          <div class="button-with-close">
            <button class="auth-btn disconnect-wallet-btn" @click="disconnectWallet">
              Отключить
            </button>
            <button class="close-sidebar-btn" @click="closeSidebar">×</button>
          </div>
        </div>

        <!-- Навигационные кнопки -->
        <div class="navigation-buttons">
          <router-link to="/" class="nav-link-btn" active-class="active">
            <span>Чат</span>
          </router-link>
          <router-link to="/blog" class="nav-link-btn" active-class="active">
            <span>Блог</span>
          </router-link>
          <router-link to="/crm" class="nav-link-btn" active-class="active">
            <span>CRM</span>
          </router-link>
          <router-link to="/settings" class="nav-link-btn" active-class="active">
            <span>Настройки</span>
          </router-link>
          <a
            :href="giteaUrl"
            target="_blank"
            rel="noopener noreferrer"
            class="nav-link-btn"
            @click="closeSidebar"
          >
            <span>Репозитории</span>
          </a>
        </div>
        
        <!-- Блок информации о пользователе или формы подключения -->
        <template v-if="isAuthenticated">
          <div v-if="emailAuth && (emailAuth.showForm || emailAuth.showVerification)" class="auth-modal-panel">
            <EmailConnect @success="$emit('cancel-email-auth')">
              <template #actions>
                <button class="close-btn" @click="$emit('cancel-email-auth')">Отмена</button>
              </template>
            </EmailConnect>
          </div>
          <div v-else-if="telegramAuth && telegramAuth.showVerification" class="auth-modal-panel">
            <TelegramConnect
              :bot-link="telegramAuth?.botLink"
              :verification-code="telegramAuth?.verificationCode"
              :error="telegramAuth?.error"
              @cancel="$emit('cancel-telegram-auth')"
            />
          </div>
          <div v-else class="user-info-section sidebar-section">
            <h3>Ваши идентификаторы:</h3>
            <div class="user-info-item">
              <span class="user-info-label">Кошелек:</span>
              <span v-if="hasIdentityType('wallet')" class="user-info-value">
                {{ truncateAddress(getIdentityValue('wallet')) }}
                <button class="delete-identity-btn" @click="handleDeleteIdentity('wallet', getIdentityValue('wallet'))" title="Удалить">✕</button>
              </span>
              <span v-else class="user-info-value">
                Не подключен
                <button class="connect-btn" @click="handleWalletAuth">Подключить</button>
              </span>
            </div>
            <div class="user-info-item">
              <span class="user-info-label">Telegram:</span>
              <span v-if="hasIdentityType('telegram')" class="user-info-value">
                {{ getIdentityValue('telegram') }}
                <button class="delete-identity-btn" @click="handleDeleteIdentity('telegram', getIdentityValue('telegram'))" title="Удалить">✕</button>
              </span>
              <span v-else class="user-info-value">
                Не подключен
                <button class="connect-btn" @click="$emit('telegram-auth')">Подключить</button>
              </span>
            </div>
            <div class="user-info-item">
              <span class="user-info-label">Email:</span>
              <span v-if="hasIdentityType('email')" class="user-info-value">
                {{ getIdentityValue('email') }}
                <button class="delete-identity-btn" @click="handleDeleteIdentity('email', getIdentityValue('email'))" title="Удалить">✕</button>
              </span>
              <span v-else class="user-info-value">
                Не подключен
                <button class="connect-btn" @click="$emit('email-auth')">Подключить</button>
              </span>
            </div>
          </div>
        </template>

        <!-- Блок баланса токенов -->
        <div v-if="isAuthenticated" class="token-balances-section sidebar-section">
          <h3>Баланс токенов:</h3>
          <div v-if="isLoadingTokens" class="token-loading">
            Загрузка балансов...
          </div>
          <div v-else-if="!tokenBalances || tokenBalances.length === 0" class="token-no-data">
            Баланс не доступен (tokenBalances: {{ tokenBalances }}, length: {{ tokenBalances?.length }})
          </div>
          <div v-else>

            <div v-for="(token, index) in tokenBalances" :key="token.tokenAddress ? token.tokenAddress : 'token-' + index" class="token-balance-row" :class="{ 'token-error': token.error }">
              <span class="token-name">{{ token.tokenName }}</span>
              <span class="token-network">{{ token.network }}</span>
              <span v-if="token.error" class="token-error-message" :title="token.errorDetails">
                ❌ {{ token.error }}
              </span>
              <span v-else class="token-amount">{{ isNaN(Number(token.balance)) ? '—' : Number(token.balance).toLocaleString() }}</span>
            </div>
          </div>
        </div>

        <!-- Блок с информацией об авторских правах -->
        <div class="copyright-section sidebar-section">
          <h3>© Авторские права</h3>
          <div class="copyright-info">
            <p class="copyright-text">
              <strong>Тарабанов Александр Викторович</strong><br>
              2024-2026. Все права защищены.
            </p>
            <div class="copyright-links">
              <a href="https://github.com/VC-HB3-Accelerator" target="_blank" class="copyright-link" title="GitHub">
                GitHub
              </a>
            </div>
          </div>
        </div>

      </div>
    </div>
  </transition>
</template>

<script setup>
import { defineProps, defineEmits, ref, computed, onMounted, onBeforeUnmount, watch } from 'vue';
import { useRouter } from 'vue-router';
import eventBus from '../utils/eventBus';
import EmailConnect from './identity/EmailConnect.vue';
import TelegramConnect from './identity/TelegramConnect.vue';
import { useAuthContext } from '@/composables/useAuth';

const router = useRouter();
const props = defineProps({
  modelValue: Boolean,
  isAuthenticated: Boolean,
  telegramAuth: Object,
  emailAuth: Object,
  tokenBalances: Array,
  identities: Array,
  isLoadingTokens: Boolean,
  formattedLastUpdate: String
});

const emit = defineEmits(['update:modelValue', 'wallet-auth', 'disconnect-wallet', 'telegram-auth', 'email-auth', 'cancel-email-auth']);

const { deleteIdentity } = useAuthContext();

// URL страницы репозитория Docs (readme): локально — порт 3001; на продакшене — /gitea/
const giteaUrl = computed(() => {
  if (typeof window === 'undefined') return '#';
  const { hostname, protocol } = window.location;
  const path = 'VC-HB3-Accelerator/Docs#readme';
  const isLocal = hostname === 'localhost' || hostname === '127.0.0.1';
  if (isLocal) {
    const port = import.meta.env.VITE_GITEA_PORT || '3001';
    return `${protocol}//${hostname}:${port}/${path}`;
  }
  return `${protocol}//${hostname}/gitea/${path}`;
});

// Подписываемся на централизованные события очистки и обновления данных
onMounted(() => {
  window.addEventListener('clear-application-data', () => {
    console.log('[Sidebar] Clearing sidebar data');
    // Очищаем данные при выходе из системы
    // Sidebar не нуждается в очистке данных
  });
  
  window.addEventListener('refresh-application-data', () => {
    console.log('[Sidebar] Refreshing sidebar data');
    // Sidebar не нуждается в обновлении данных
  });
});

// Обработчики событий
const handleWalletAuth = () => {
  emit('wallet-auth');
};

const disconnectWallet = () => {
  emit('disconnect-wallet');
};

// Функция закрытия сайдбара
const closeSidebar = () => {
  emit('update:modelValue', false);
};

// Обработка события изменения авторизации
const handleAuthEvent = (event) => {
      // console.log('[Sidebar] Получено событие изменения авторизации:', event);
  // Здесь можно обновить данные, если нужно дополнительное обновление
};

// Подписка на события
let unsubscribe = null;
onMounted(() => {
  unsubscribe = eventBus.on('auth-state-changed', handleAuthEvent);
});

// Очистка при размонтировании
onBeforeUnmount(() => {
  if (unsubscribe) {
    unsubscribe();
  }
});

// Вспомогательные функции
const truncateAddress = (address) => {
  if (!address) return '';
  return `${address.substring(0, 6)}...${address.substring(address.length - 4)}`;
};

const hasIdentityType = (type) => {
  if (!props.identities) return false;
  return props.identities.some((identity) => identity.provider === type);
};

const getIdentityValue = (type) => {
  if (!props.identities) return null;
  const identity = props.identities.find((identity) => identity.provider === type);
  return identity ? identity.provider_id : null;
};

const handleDeleteIdentity = async (provider, providerId) => {
  if (confirm('Удалить идентификатор?')) {
    await deleteIdentity(provider, providerId);
  }
};

// Добавляем watch для отслеживания props
watch(() => props.tokenBalances, (newVal, oldVal) => {
  console.log('[Sidebar] tokenBalances prop changed:', JSON.stringify(newVal));
}, { deep: true });

watch(() => props.isLoadingTokens, (newVal, oldVal) => {
  console.log(`[Sidebar] isLoadingTokens prop changed: ${newVal}`);
});

// Добавляем отладочную информацию при монтировании
onMounted(() => {
  console.log('[Sidebar] Mounted with props:', {
    isAuthenticated: props.isAuthenticated,
    tokenBalances: props.tokenBalances,
    isLoadingTokens: props.isLoadingTokens
  });
});
</script>

<style scoped>
.wallet-sidebar {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-color: var(--color-white);
  z-index: 1000;
  overflow-y: auto;
  padding: var(--spacing-lg);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  transition: transform var(--transition-normal), opacity var(--transition-normal);
  box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
}

.wallet-sidebar-content {
  max-width: 600px;
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--spacing-md);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

/* Анимация появления и исчезновения правой панели */
.sidebar-slide-enter-active,
.sidebar-slide-leave-active {
  transition: all var(--transition-normal);
}

.sidebar-slide-enter-from,
.sidebar-slide-leave-to {
  transform: translateX(100%);
  opacity: 0;
}

.sidebar-slide-enter-to,
.sidebar-slide-leave-from {
  transform: translateX(0);
  opacity: 1;
}

.button-with-close {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 15px;
}

.connect-wallet-btn,
.disconnect-wallet-btn {
  flex: 1;
}

.close-sidebar-btn {
  width: 48px;
  height: 48px;
  min-width: 48px;
  background-color: var(--color-white);
  color: var(--color-dark);
  border: 1px solid var(--color-grey);
  border-radius: var(--radius-lg);
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  transition: all var(--transition-normal);
}

.close-sidebar-btn:hover {
  background-color: var(--color-grey-light);
  border-color: var(--color-dark);
}

/* Стили для навигационных кнопок */
.navigation-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}

.nav-link-btn {
  display: flex;
  align-items: center;
  height: 48px;
  background-color: var(--color-light);
  color: var(--color-dark);
  border: 1px solid var(--color-grey-light);
  border-radius: var(--radius-lg);
  padding: 0 15px;
  font-size: var(--font-size-md);
  text-decoration: none;
  transition: all var(--transition-normal);
  cursor: pointer;
  box-sizing: border-box;
}

.nav-link-btn.active {
  background-color: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
}

.nav-link-btn:hover:not(.active) {
  background-color: var(--color-grey-light);
}

/* Стили для общих кнопок аутентификации/действий в сайдбаре */
.auth-btn {
  width: 100%;
  height: 48px;
  border-radius: var(--radius-lg);
  background-color: var(--color-light);
  border: 1px solid rgba(0, 0, 0, 0.1);
  color: var(--color-dark);
  font-size: var(--font-size-md);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0 var(--spacing-md);
  box-sizing: border-box;
  transition: all var(--transition-normal);
  margin: 0;
  text-decoration: none;
}

.auth-btn:hover {
  background-color: var(--color-grey-light);
}

/* Новые стили для секций в сайдбаре */
.sidebar-section {
  background-color: var(--color-light);
  padding: var(--spacing-md);
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-lg);
}

h3 {
  color: var(--color-primary);
  margin-bottom: var(--spacing-md);
  font-size: var(--font-size-md);
}

.token-balance,
.user-info-item {
  display: flex;
  align-items: center;
  margin-bottom: var(--spacing-sm);
  font-size: var(--font-size-sm);
}

.token-name,
.user-info-label {
  font-weight: bold;
  width: 80px;
}

.token-amount {
  flex: 1;
}

.token-no-data,
.user-info-empty {
  color: var(--color-text-light);
  font-style: italic;
  font-size: var(--font-size-sm);
}

/* Добавляем стиль для индикатора загрузки */
.token-loading {
  color: var(--color-text-light);
  font-style: italic;
  font-size: var(--font-size-sm);
}

/* Стили для ошибок токенов */
.token-balance-row.token-error {
  background-color: rgba(255, 0, 0, 0.1);
  border: 1px solid rgba(255, 0, 0, 0.3);
  border-radius: var(--radius-sm);
  padding: var(--spacing-xs);
}

.token-error-message {
  color: var(--color-danger);
  font-size: var(--font-size-xs);
  font-weight: bold;
  flex: 1;
  cursor: help;
}

/* Медиа-запросы для адаптивности */
@media screen and (min-width: 1200px) {
  .wallet-sidebar {
    width: 420px;
    max-width: 420px;
  }
}

@media screen and (min-width: 769px) and (max-width: 1199px) {
  .wallet-sidebar {
    width: 350px;
    max-width: 350px;
  }
}

@media screen and (max-width: 768px) {
  /* На мобильных устройствах сайдбар по умолчанию занимает весь экран (width: 100%, height: 100%) */
  /* Поэтому дополнительные правила для переопределения положения/размера не нужны */
  /* Оставляем только adjustment for padding when needed */
  .wallet-sidebar {
    padding: var(--spacing-md);
    /* Убраны bottom, top, height, max-height, чтобы вернуться к full-screen поведению */
  }

  .wallet-sidebar-content {
    padding: 0;
    gap: var(--spacing-md);
  }
}

@media screen and (max-width: 480px) {
  .close-sidebar-btn {
    width: 42px;
    height: 42px;
    min-width: 42px;
    font-size: 20px;
  }
  
  .auth-btn {
    height: 42px;
    font-size: var(--font-size-sm);
  }
  
  .nav-link-btn {
    height: 42px;
    padding: 0 12px;
    font-size: var(--font-size-sm);
  }
}

@media screen and (max-width: 360px) {
  .close-sidebar-btn {
    width: 36px;
    height: 36px;
    min-width: 36px;
    font-size: 18px;
  }
  
  .auth-btn {
    height: 36px;
  }
  
  .nav-link-btn {
    height: 36px;
    padding: 0 10px;
  }
}

.token-balance-header {
  display: flex;
  font-weight: bold;
  color: var(--color-primary, #4caf50);
  gap: 10px;
  margin-bottom: 6px;
}
.token-balance-row {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 4px;
}
.token-name {
  min-width: 80px;
  font-weight: 500;
}
.token-network {
  min-width: 70px;
  color: var(--color-dark, #333);
}
.token-amount {
  min-width: 80px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.connect-btn {
  margin-left: 10px;
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 0.2rem 0.8rem;
  cursor: pointer;
  font-size: 0.95rem;
  transition: background 0.2s;
}
.connect-btn:hover {
  background: var(--color-primary-dark);
}

.auth-modal-panel {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 16px rgba(0,0,0,0.15);
  padding: 2rem 2.5rem;
  max-width: 400px;
  width: 100%;
  margin: 2rem auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.delete-identity-btn {
  margin-left: 8px;
  background: none;
  border: none;
  color: #d32f2f;
  font-size: 1.1rem;
  cursor: pointer;
  padding: 0 4px;
  border-radius: 3px;
  transition: background 0.15s;
}
.delete-identity-btn:hover {
  background: #ffeaea;
}

/* Стили для блока авторских прав */
.copyright-section {
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid #eee;
}

.copyright-info {
  padding: 1rem;
  background: #f8f9fa;
  border-radius: 8px;
  font-size: 0.85rem;
}

.copyright-text {
  margin: 0 0 0.5rem 0;
  line-height: 1.4;
  color: #333;
}

.copyright-status {
  margin: 0 0 1rem 0;
  color: var(--color-primary);
  font-weight: 500;
  font-size: 0.8rem;
}

.copyright-links {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.copyright-link {
  color: var(--color-primary);
  text-decoration: none;
  font-size: 0.8rem;
  padding: 0.3rem 0;
  transition: color 0.2s;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.copyright-link:hover {
  color: var(--color-primary-dark);
  text-decoration: underline;
}

@media screen and (max-width: 768px) {
  .copyright-section {
    margin-top: 1rem;
  }
  
  .copyright-info {
    padding: 0.8rem;
  }
  
  .copyright-links {
    flex-direction: row;
    justify-content: space-around;
    gap: 0.3rem;
  }
}
</style> 