<template>
  <div class="blocked-devices">
    <div class="blocked-devices-header">
      <h2>Заблокированные устройства</h2>
      <div class="filters">
        <select v-model="filters.isActive" @change="loadBlockedDevices">
          <option value="true">Активные блокировки</option>
          <option value="false">Разблокированные устройства</option>
          <option value="">Все устройства</option>
        </select>
        <input 
          type="text" 
          v-model="filters.search" 
          placeholder="Поиск по пользователю или причине..."
          @input="debounceSearch"
          class="search-input"
        >
        <button @click="showBlockDeviceModal = true" class="btn btn-danger">
          Заблокировать устройство
        </button>
      </div>
    </div>

    <div v-if="loading" class="loading">
      <div class="spinner"></div>
      <p>Загрузка заблокированных устройств...</p>
    </div>

    <div v-else-if="error" class="error">
      <p>{{ error }}</p>
      <button @click="loadBlockedDevices" class="btn btn-primary">Повторить</button>
    </div>

    <div v-else class="devices-list">
      <div v-if="devices.length === 0" class="no-devices">
        <p>Заблокированные устройства не найдены</p>
      </div>

      <div v-for="device in devices" :key="device._id" class="device-card">
        <div class="device-header">
          <div class="device-info">
            <h3>Устройство #{{ device._id.slice(-8) }}</h3>
            <span class="device-status" :class="device.isActive ? 'active' : 'inactive'">
              {{ device.isActive ? 'Заблокировано' : 'Разблокировано' }}
            </span>
          </div>
          <div class="device-actions">
            <button 
              @click="viewDeviceDetails(device)" 
              class="btn btn-secondary btn-sm"
            >
              Подробности
            </button>
            <button 
              v-if="device.isActive" 
              @click="unblockDevice(device)" 
              class="btn btn-success btn-sm"
            >
              Разблокировать
            </button>
          </div>
        </div>

        <div class="device-details">
          <div class="detail-row">
            <strong>Пользователь:</strong>
            <span v-if="device.blockedUserId">
              {{ device.blockedUserId.name }} ({{ device.blockedUserId.email }})
            </span>
            <span v-else class="text-muted">Неизвестен</span>
          </div>

          <div class="detail-row">
            <strong>Fingerprint:</strong>
            <code class="fingerprint">{{ device.deviceFingerprint.substring(0, 32) }}...</code>
          </div>

          <div class="detail-row">
            <strong>Причина блокировки:</strong>
            <span>{{ device.reason }}</span>
          </div>

          <div class="detail-row">
            <strong>Заблокировано:</strong>
            <span>{{ formatDate(device.blockedAt) }}</span>
            <span v-if="device.blockedBy" class="text-muted">
              ({{ device.blockedBy.name }})
            </span>
          </div>

          <div v-if="!device.isActive && device.unblockedAt" class="detail-row">
            <strong>Разблокировано:</strong>
            <span>{{ formatDate(device.unblockedAt) }}</span>
          </div>

          <div v-if="device.bypassAttempts && device.bypassAttempts.length > 0" class="detail-row">
            <strong>Попытки обхода:</strong>
            <span class="badge badge-warning">{{ device.bypassAttempts.length }}</span>
          </div>

          <div v-if="device.deviceInfo" class="device-tech-info">
            <strong>Информация об устройстве:</strong>
            <div class="tech-details">
              <span v-if="device.deviceInfo.userAgent">
                <strong>User Agent:</strong> {{ device.deviceInfo.userAgent.substring(0, 60) }}...
              </span>
              <span v-if="device.deviceInfo.platform">
                <strong>Платформа:</strong> {{ device.deviceInfo.platform }}
              </span>
              <span v-if="device.deviceInfo.screen">
                <strong>Экран:</strong> {{ device.deviceInfo.screen.width }}x{{ device.deviceInfo.screen.height }}
              </span>
            </div>
          </div>
        </div>
      </div>

      <!-- Пагинация -->
      <div v-if="pagination.totalPages > 1" class="pagination">
        <button 
          @click="changePage(pagination.currentPage - 1)"
          :disabled="pagination.currentPage <= 1"
          class="btn btn-secondary"
        >
          Предыдущая
        </button>
        
        <span class="page-info">
          Страница {{ pagination.currentPage }} из {{ pagination.totalPages }}
          ({{ pagination.totalItems }} устройств)
        </span>
        
        <button 
          @click="changePage(pagination.currentPage + 1)"
          :disabled="pagination.currentPage >= pagination.totalPages"
          class="btn btn-secondary"
        >
          Следующая
        </button>
      </div>
    </div>

    <!-- Модальное окно для блокировки устройства -->
    <div v-if="showBlockDeviceModal" class="modal-overlay" @click="closeBlockModal">
      <div class="modal" @click.stop>
        <div class="modal-header">
          <h3>Заблокировать устройство</h3>
          <button @click="closeBlockModal" class="btn-close">&times;</button>
        </div>
        
        <div class="modal-body">
          <form @submit.prevent="submitBlockDevice">
            <div class="form-group">
              <label for="userId">ID пользователя:</label>
              <input 
                type="text" 
                id="userId" 
                v-model="blockForm.userId" 
                required
                placeholder="Введите ID пользователя"
              >
            </div>
            
            <div class="form-group">
              <label for="deviceFingerprint">Device Fingerprint:</label>
              <textarea 
                id="deviceFingerprint" 
                v-model="blockForm.deviceFingerprint" 
                required
                placeholder="Введите device fingerprint устройства"
                rows="3"
              ></textarea>
            </div>
            
            <div class="form-group">
              <label for="reason">Причина блокировки:</label>
              <textarea 
                id="reason" 
                v-model="blockForm.reason" 
                required
                placeholder="Укажите причину блокировки устройства"
                rows="3"
              ></textarea>
            </div>
          </form>
        </div>
        
        <div class="modal-footer">
          <button @click="closeBlockModal" class="btn btn-secondary">Отмена</button>
          <button 
            @click="submitBlockDevice" 
            :disabled="blockLoading"
            class="btn btn-danger"
          >
            {{ blockLoading ? 'Блокировка...' : 'Заблокировать' }}
          </button>
        </div>
      </div>
    </div>

    <!-- Модальное окно с деталями устройства -->
    <div v-if="showDetailsModal" class="modal-overlay" @click="closeDetailsModal">
      <div class="modal modal-large" @click.stop>
        <div class="modal-header">
          <h3>Детали устройства #{{ selectedDevice?._id?.slice(-8) }}</h3>
          <button @click="closeDetailsModal" class="btn-close">&times;</button>
        </div>
        
        <div class="modal-body">
          <div v-if="selectedDevice" class="device-full-details">
            <!-- Основная информация -->
            <section class="details-section">
              <h4>Основная информация</h4>
              <div class="info-grid">
                <div class="info-item">
                  <strong>ID устройства:</strong>
                  <code>{{ selectedDevice._id }}</code>
                </div>
                <div class="info-item">
                  <strong>Device Fingerprint:</strong>
                  <code class="fingerprint-full">{{ selectedDevice.deviceFingerprint }}</code>
                </div>
                <div class="info-item">
                  <strong>Статус:</strong>
                  <span class="device-status" :class="selectedDevice.isActive ? 'active' : 'inactive'">
                    {{ selectedDevice.isActive ? 'Заблокировано' : 'Разблокировано' }}
                  </span>
                </div>
                <div class="info-item">
                  <strong>Причина:</strong>
                  <span>{{ selectedDevice.reason }}</span>
                </div>
              </div>
            </section>

            <!-- Информация о пользователе -->
            <section v-if="selectedDevice.blockedUserId" class="details-section">
              <h4>Заблокированный пользователь</h4>
              <div class="info-grid">
                <div class="info-item">
                  <strong>Имя:</strong>
                  <span>{{ selectedDevice.blockedUserId.name }}</span>
                </div>
                <div class="info-item">
                  <strong>Email:</strong>
                  <span>{{ selectedDevice.blockedUserId.email }}</span>
                </div>
                <div class="info-item">
                  <strong>ID:</strong>
                  <code>{{ selectedDevice.blockedUserId._id }}</code>
                </div>
              </div>
            </section>

            <!-- Техническая информация -->
            <section v-if="selectedDevice.deviceInfo" class="details-section">
              <h4>Техническая информация</h4>
              <div class="tech-info">
                <div v-if="selectedDevice.deviceInfo.userAgent" class="info-item">
                  <strong>User Agent:</strong>
                  <code>{{ selectedDevice.deviceInfo.userAgent }}</code>
                </div>
                <div v-if="selectedDevice.deviceInfo.platform" class="info-item">
                  <strong>Платформа:</strong>
                  <span>{{ selectedDevice.deviceInfo.platform }}</span>
                </div>
                <div v-if="selectedDevice.deviceInfo.screen" class="info-item">
                  <strong>Разрешение экрана:</strong>
                  <span>{{ selectedDevice.deviceInfo.screen.width }}x{{ selectedDevice.deviceInfo.screen.height }}</span>
                </div>
                <div v-if="selectedDevice.deviceInfo.timezone" class="info-item">
                  <strong>Часовой пояс:</strong>
                  <span>{{ selectedDevice.deviceInfo.timezone }}</span>
                </div>
                <div v-if="selectedDevice.deviceInfo.language" class="info-item">
                  <strong>Язык:</strong>
                  <span>{{ selectedDevice.deviceInfo.language }}</span>
                </div>
              </div>
            </section>

            <!-- Попытки обхода -->
            <section v-if="selectedDevice.bypassAttempts && selectedDevice.bypassAttempts.length > 0" class="details-section">
              <h4>Попытки обхода блокировки ({{ selectedDevice.bypassAttempts.length }})</h4>
              <div class="bypass-attempts">
                <div 
                  v-for="(attempt, index) in selectedDevice.bypassAttempts" 
                  :key="index"
                  class="attempt-item"
                >
                  <div class="attempt-header">
                    <strong>{{ formatDate(attempt.timestamp) }}</strong>
                    <span class="attempt-type badge">{{ attempt.type }}</span>
                  </div>
                  <div class="attempt-details">
                    <div v-if="attempt.ipAddress">
                      <strong>IP:</strong> {{ attempt.ipAddress }}
                    </div>
                    <div v-if="attempt.userAgent">
                      <strong>User Agent:</strong> {{ attempt.userAgent }}
                    </div>
                  </div>
                </div>
              </div>
            </section>

            <!-- Временные метки -->
            <section class="details-section">
              <h4>Временные метки</h4>
              <div class="info-grid">
                <div class="info-item">
                  <strong>Заблокировано:</strong>
                  <span>{{ formatDate(selectedDevice.blockedAt) }}</span>
                </div>
                <div v-if="selectedDevice.blockedBy" class="info-item">
                  <strong>Заблокировал:</strong>
                  <span>{{ selectedDevice.blockedBy.name }} ({{ selectedDevice.blockedBy.email }})</span>
                </div>
                <div v-if="!selectedDevice.isActive && selectedDevice.unblockedAt" class="info-item">
                  <strong>Разблокировано:</strong>
                  <span>{{ formatDate(selectedDevice.unblockedAt) }}</span>
                </div>
              </div>
            </section>
          </div>
        </div>
        
        <div class="modal-footer">
          <button @click="closeDetailsModal" class="btn btn-secondary">Закрыть</button>
          <button 
            v-if="selectedDevice?.isActive" 
            @click="unblockDevice(selectedDevice)"
            class="btn btn-success"
          >
            Разблокировать устройство
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, reactive, onMounted, computed } from 'vue';
import api from '@/services/api';

export default {
  name: 'BlockedDevices',
  setup() {
    const devices = ref([]);
    const loading = ref(false);
    const error = ref('');
    const showBlockDeviceModal = ref(false);
    const showDetailsModal = ref(false);
    const selectedDevice = ref(null);
    const blockLoading = ref(false);

    const filters = reactive({
      isActive: 'true',
      search: ''
    });

    const pagination = reactive({
      currentPage: 1,
      totalPages: 1,
      totalItems: 0,
      limit: 10
    });

    const blockForm = reactive({
      userId: '',
      deviceFingerprint: '',
      reason: ''
    });

    let searchTimeout = null;

    // Загрузка заблокированных устройств
    const loadBlockedDevices = async () => {
      loading.value = true;
      error.value = '';

      try {
        const params = {
          page: pagination.currentPage,
          limit: pagination.limit,
          isActive: filters.isActive,
          search: filters.search.trim()
        };

        // Убираем пустые параметры
        Object.keys(params).forEach(key => {
          if (params[key] === '' || params[key] === null || params[key] === undefined) {
            delete params[key];
          }
        });

        console.log('[BlockedDevices] Загрузка устройств с параметрами:', params);

        const response = await api.getBlockedDevices(params);
        
        devices.value = response.data.data || [];
        
        if (response.data.pagination) {
          Object.assign(pagination, response.data.pagination);
        }

        console.log('[BlockedDevices] Загружено устройств:', devices.value.length);

      } catch (err) {
        console.error('[BlockedDevices] Ошибка загрузки:', err);
        error.value = err.response?.data?.message || 'Ошибка загрузки заблокированных устройств';
      } finally {
        loading.value = false;
      }
    };

    // Дебаунс для поиска
    const debounceSearch = () => {
      clearTimeout(searchTimeout);
      searchTimeout = setTimeout(() => {
        pagination.currentPage = 1;
        loadBlockedDevices();
      }, 500);
    };

    // Смена страницы
    const changePage = (page) => {
      if (page >= 1 && page <= pagination.totalPages) {
        pagination.currentPage = page;
        loadBlockedDevices();
      }
    };

    // Просмотр деталей устройства
    const viewDeviceDetails = async (device) => {
      try {
        console.log('[BlockedDevices] Загрузка деталей устройства:', device._id);
        const response = await api.getBlockedDeviceDetails(device._id);
        selectedDevice.value = response.data.data;
        showDetailsModal.value = true;
      } catch (err) {
        console.error('[BlockedDevices] Ошибка загрузки деталей:', err);
        alert('Ошибка загрузки деталей устройства');
      }
    };

    // Блокировка устройства
    const submitBlockDevice = async () => {
      if (!blockForm.userId || !blockForm.deviceFingerprint || !blockForm.reason) {
        alert('Пожалуйста, заполните все поля');
        return;
      }

      blockLoading.value = true;

      try {
        console.log('[BlockedDevices] Блокировка устройства:', blockForm);
        
        await api.blockDevice({
          userId: blockForm.userId.trim(),
          deviceFingerprint: blockForm.deviceFingerprint.trim(),
          reason: blockForm.reason.trim()
        });

        alert('Устройство успешно заблокировано');
        closeBlockModal();
        loadBlockedDevices(); // Перезагружаем список

      } catch (err) {
        console.error('[BlockedDevices] Ошибка блокировки:', err);
        alert(err.response?.data?.message || 'Ошибка при блокировке устройства');
      } finally {
        blockLoading.value = false;
      }
    };

    // Разблокировка устройства
    const unblockDevice = async (device) => {
      const reason = prompt('Введите причину разблокировки:', 'Разблокировано администратором');
      if (!reason) return;

      try {
        console.log('[BlockedDevices] Разблокировка устройства:', device._id);
        
        await api.unblockDevice(device.deviceFingerprint, reason);
        
        alert('Устройство успешно разблокировано');
        
        // Закрываем модальное окно деталей, если оно открыто
        if (showDetailsModal.value) {
          closeDetailsModal();
        }
        
        loadBlockedDevices(); // Перезагружаем список

      } catch (err) {
        console.error('[BlockedDevices] Ошибка разблокировки:', err);
        alert(err.response?.data?.message || 'Ошибка при разблокировке устройства');
      }
    };

    // Закрытие модального окна блокировки
    const closeBlockModal = () => {
      showBlockDeviceModal.value = false;
      Object.assign(blockForm, {
        userId: '',
        deviceFingerprint: '',
        reason: ''
      });
    };

    // Закрытие модального окна деталей
    const closeDetailsModal = () => {
      showDetailsModal.value = false;
      selectedDevice.value = null;
    };

    // Форматирование даты
    const formatDate = (dateString) => {
      if (!dateString) return 'Неизвестно';
      
      try {
        return new Date(dateString).toLocaleString('ru-RU', {
          year: 'numeric',
          month: '2-digit',
          day: '2-digit',
          hour: '2-digit',
          minute: '2-digit'
        });
      } catch (err) {
        return 'Неверная дата';
      }
    };

    // Инициализация компонента
    onMounted(() => {
      loadBlockedDevices();
    });

    return {
      devices,
      loading,
      error,
      filters,
      pagination,
      showBlockDeviceModal,
      showDetailsModal,
      selectedDevice,
      blockForm,
      blockLoading,
      loadBlockedDevices,
      debounceSearch,
      changePage,
      viewDeviceDetails,
      submitBlockDevice,
      unblockDevice,
      closeBlockModal,
      closeDetailsModal,
      formatDate
    };
  }
};
</script>

<style scoped>
.blocked-devices {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.blocked-devices-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  flex-wrap: wrap;
  gap: 15px;
}

.blocked-devices-header h2 {
  margin: 0;
  color: #333;
}

.filters {
  display: flex;
  gap: 15px;
  align-items: center;
  flex-wrap: wrap;
}

.search-input {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  min-width: 250px;
}

.loading {
  text-align: center;
  padding: 40px;
}

.spinner {
  border: 4px solid #f3f3f3;
  border-top: 4px solid #007bff;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
  margin: 0 auto 15px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.error {
  text-align: center;
  padding: 40px;
  color: #dc3545;
}

.no-devices {
  text-align: center;
  padding: 40px;
  color: #666;
}

.device-card {
  background: white;
  border: 1px solid #ddd;
  border-radius: 8px;
  margin-bottom: 15px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.device-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.device-info h3 {
  margin: 0 0 5px 0;
  color: #333;
}

.device-status {
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
}

.device-status.active {
  background: #dc3545;
  color: white;
}

.device-status.inactive {
  background: #28a745;
  color: white;
}

.device-actions {
  display: flex;
  gap: 10px;
}

.device-details {
  border-top: 1px solid #eee;
  padding-top: 15px;
}

.detail-row {
  display: flex;
  margin-bottom: 10px;
  flex-wrap: wrap;
  gap: 10px;
}

.detail-row strong {
  min-width: 150px;
  color: #555;
}

.fingerprint {
  background: #f8f9fa;
  padding: 2px 6px;
  border-radius: 3px;
  font-family: monospace;
  font-size: 11px;
}

.fingerprint-full {
  background: #f8f9fa;
  padding: 8px;
  border-radius: 4px;
  font-family: monospace;
  font-size: 10px;
  display: block;
  word-break: break-all;
  margin-top: 5px;
}

.device-tech-info {
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid #f0f0f0;
}

.tech-details {
  margin-top: 10px;
}

.tech-details span {
  display: block;
  margin-bottom: 5px;
  font-size: 13px;
}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 30px;
  gap: 15px;
}

.page-info {
  color: #666;
  font-size: 14px;
}

/* Модальные окна */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal {
  background: white;
  border-radius: 8px;
  max-width: 500px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
}

.modal-large {
  max-width: 800px;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #eee;
}

.modal-header h3 {
  margin: 0;
}

.btn-close {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #999;
}

.modal-body {
  padding: 20px;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 20px;
  border-top: 1px solid #eee;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
  color: #333;
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-family: inherit;
}

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

/* Детали устройства */
.device-full-details {
  max-height: 60vh;
  overflow-y: auto;
}

.details-section {
  margin-bottom: 25px;
  padding-bottom: 20px;
  border-bottom: 1px solid #f0f0f0;
}

.details-section:last-child {
  border-bottom: none;
}

.details-section h4 {
  margin: 0 0 15px 0;
  color: #333;
  font-size: 16px;
}

.info-grid {
  display: grid;
  gap: 10px;
}

.info-item {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.info-item strong {
  color: #555;
  font-size: 14px;
}

.tech-info .info-item {
  margin-bottom: 10px;
}

.bypass-attempts {
  max-height: 200px;
  overflow-y: auto;
}

.attempt-item {
  background: #f8f9fa;
  padding: 10px;
  border-radius: 4px;
  margin-bottom: 10px;
}

.attempt-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.attempt-type {
  background: #17a2b8;
  color: white;
  padding: 2px 6px;
  border-radius: 10px;
  font-size: 11px;
}

.attempt-details {
  font-size: 12px;
  color: #666;
}

.attempt-details div {
  margin-bottom: 3px;
}

/* Общие стили кнопок */
.btn {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  text-decoration: none;
  display: inline-block;
  text-align: center;
  transition: background-color 0.2s;
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-primary {
  background: #007bff;
  color: white;
}

.btn-primary:hover:not(:disabled) {
  background: #0056b3;
}

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

.btn-secondary:hover:not(:disabled) {
  background: #545b62;
}

.btn-success {
  background: #28a745;
  color: white;
}

.btn-success:hover:not(:disabled) {
  background: #1e7e34;
}

.btn-danger {
  background: #dc3545;
  color: white;
}

.btn-danger:hover:not(:disabled) {
  background: #c82333;
}

.btn-sm {
  padding: 4px 8px;
  font-size: 12px;
}

.badge {
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: bold;
}

.badge-warning {
  background: #ffc107;
  color: #212529;
}

.text-muted {
  color: #6c757d;
}

/* Responsive */
@media (max-width: 768px) {
  .blocked-devices {
    padding: 10px;
  }
  
  .blocked-devices-header {
    flex-direction: column;
    align-items: stretch;
  }
  
  .filters {
    flex-direction: column;
  }
  
  .search-input {
    min-width: auto;
    width: 100%;
  }
  
  .device-header {
    flex-direction: column;
    align-items: stretch;
    gap: 15px;
  }
  
  .device-actions {
    justify-content: flex-end;
  }
  
  .detail-row {
    flex-direction: column;
    gap: 5px;
  }
  
  .detail-row strong {
    min-width: auto;
  }
  
  .modal {
    margin: 10px;
    width: calc(100% - 20px);
  }
  
  .modal-footer {
    flex-direction: column;
  }
  
  .pagination {
    flex-direction: column;
    gap: 10px;
  }
}
</style>