<template>
  <div class="blocked-devices-management">
    <div class="page-header">
      <h1>Управление заблокированными устройствами</h1>
      <div class="header-actions">
        <button @click="refreshData" class="btn btn-secondary" :disabled="loading">
          <span v-if="loading">⟳</span>
          <span v-else>🔄</span>
          Обновить
        </button>
        <button @click="showBlockDeviceModal = true" class="btn btn-danger">
          🚫 Заблокировать устройство
        </button>
      </div>
    </div>

    <!-- Статистика -->
    <div class="stats-grid">
      <div class="stat-card">
        <div class="stat-icon">🔒</div>
        <div class="stat-content">
          <div class="stat-value">{{ statistics.totalBlocked }}</div>
          <div class="stat-label">Заблокированных устройств</div>
        </div>
      </div>
      <div class="stat-card">
        <div class="stat-icon">⚠️</div>
        <div class="stat-content">
          <div class="stat-value">{{ statistics.todayBlocked }}</div>
          <div class="stat-label">Заблокировано сегодня</div>
        </div>
      </div>
      <div class="stat-card">
        <div class="stat-icon">🔓</div>
        <div class="stat-content">
          <div class="stat-value">{{ statistics.recentUnblocked }}</div>
          <div class="stat-label">Разблокировано за неделю</div>
        </div>
      </div>
      <div class="stat-card">
        <div class="stat-icon">🎯</div>
        <div class="stat-content">
          <div class="stat-value">{{ statistics.bypassAttempts }}</div>
          <div class="stat-label">Попыток обхода</div>
        </div>
      </div>
    </div>

    <!-- Фильтры -->
    <div class="filters-panel">
      <div class="filters-row">
        <div class="filter-group">
          <label>Статус:</label>
          <select v-model="filters.isActive" @change="applyFilters">
            <option value="">Все</option>
            <option value="true">Активные блокировки</option>
            <option value="false">Снятые блокировки</option>
          </select>
        </div>
        
        <div class="filter-group">
          <label>Пользователь:</label>
          <input 
            type="text" 
            v-model="filters.userId" 
            placeholder="ID пользователя"
            @input="debounceFilter"
          >
        </div>
        
        <div class="filter-group">
          <label>Сортировка:</label>
          <select v-model="filters.sortBy" @change="applyFilters">
            <option value="blockedAt">По дате блокировки</option>
            <option value="bypassAttempts">По попыткам обхода</option>
            <option value="reason">По причине</option>
          </select>
        </div>
        
        <div class="filter-group">
          <label>Порядок:</label>
          <select v-model="filters.sortOrder" @change="applyFilters">
            <option value="desc">По убыванию</option>
            <option value="asc">По возрастанию</option>
          </select>
        </div>
        
        <button @click="clearFilters" class="btn btn-outline">
          Очистить фильтры
        </button>
      </div>
    </div>

    <!-- Список заблокированных устройств -->
    <div class="devices-table-container">
      <div v-if="loading" class="loading-state">
        <div class="spinner"></div>
        <p>Загрузка заблокированных устройств...</p>
      </div>
      
      <div v-else-if="error" class="error-state">
        <p>{{ error }}</p>
        <button @click="loadBlockedDevices" class="btn btn-primary">Попробовать снова</button>
      </div>
      
      <div v-else-if="devices.length === 0" class="empty-state">
        <p>Заблокированных устройств не найдено</p>
      </div>
      
      <table v-else class="devices-table">
        <thead>
          <tr>
            <th>Устройство</th>
            <th>Пользователь</th>
            <th>Причина</th>
            <th>Дата блокировки</th>
            <th>Статус</th>
            <th>Попытки обхода</th>
            <th>Действия</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="device in devices" :key="device._id" :class="{ 'inactive': !device.isActive }">
            <td>
              <div class="device-info">
                <code class="device-fingerprint">{{ formatFingerprint(device.deviceFingerprint) }}</code>
                <div class="device-meta">
                  <span v-if="device.deviceInfo?.userAgent" class="user-agent">
                    {{ formatUserAgent(device.deviceInfo.userAgent) }}
                  </span>
                  <span v-if="device.deviceInfo?.platform" class="platform">
                    {{ device.deviceInfo.platform }}
                  </span>
                </div>
              </div>
            </td>
            
            <td>
              <div class="user-info">
                <span class="user-name">{{ device.blockedUserId?.name || 'Неизвестно' }}</span>
                <span class="user-email">{{ device.blockedUserId?.email || 'Нет email' }}</span>
              </div>
            </td>
            
            <td>
              <div class="reason-cell">
                <span class="reason-text">{{ device.reason }}</span>
                <span v-if="device.autoBlocked" class="auto-blocked-badge">Авто</span>
              </div>
            </td>
            
            <td>
              <div class="date-info">
                <span class="date">{{ formatDate(device.blockedAt) }}</span>
                <span class="blocked-by">{{ device.blockedBy?.name || 'Система' }}</span>
              </div>
            </td>
            
            <td>
              <span class="status-badge" :class="device.isActive ? 'active' : 'inactive'">
                {{ device.isActive ? 'Активна' : 'Снята' }}
              </span>
            </td>
            
            <td>
              <div class="bypass-info">
                <span class="bypass-count">{{ device.bypassAttempts?.length || 0 }}</span>
                <button 
                  v-if="device.bypassAttempts?.length > 0"
                  @click="showBypassAttempts(device)"
                  class="btn-link"
                >
                  Подробнее
                </button>
              </div>
            </td>
            
            <td>
              <div class="actions-cell">
                <button 
                  @click="viewDeviceDetails(device)"
                  class="btn btn-sm btn-outline"
                  title="Подробности"
                >
                  👁️
                </button>
                
                <button 
                  v-if="device.isActive"
                  @click="unblockDevice(device)"
                  class="btn btn-sm btn-success"
                  title="Разблокировать"
                >
                  🔓
                </button>
                
                <button 
                  v-else
                  @click="reblockDevice(device)"
                  class="btn btn-sm btn-danger"
                  title="Заблокировать снова"
                >
                  🔒
                </button>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

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

    <!-- Модальное окно блокировки устройства -->
    <div v-if="showBlockDeviceModal" class="modal-overlay" @click="closeModal">
      <div class="modal" @click.stop>
        <div class="modal-header">
          <h3>Заблокировать устройство</h3>
          <button @click="showBlockDeviceModal = false" class="modal-close">✕</button>
        </div>
        
        <div class="modal-body">
          <form @submit.prevent="blockDevice">
            <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>
              <input 
                type="text" 
                id="deviceFingerprint"
                v-model="blockForm.deviceFingerprint" 
                required
                placeholder="Введите fingerprint устройства"
              >
            </div>
            
            <div class="form-group">
              <label for="reason">Причина блокировки:</label>
              <select v-model="blockForm.reason" required>
                <option value="">Выберите причину</option>
                <option value="Нарушение правил сервиса">Нарушение правил сервиса</option>
                <option value="Подозрительная активность">Подозрительная активность</option>
                <option value="Спам или мошенничество">Спам или мошенничество</option>
                <option value="Попытка взлома">Попытка взлома</option>
                <option value="Создание фейковых аккаунтов">Создание фейковых аккаунтов</option>
                <option value="custom">Другая причина</option>
              </select>
            </div>
            
            <div v-if="blockForm.reason === 'custom'" class="form-group">
              <label for="customReason">Укажите причину:</label>
              <textarea 
                id="customReason"
                v-model="blockForm.customReason" 
                required
                placeholder="Опишите причину блокировки"
                rows="3"
              ></textarea>
            </div>
            
            <div class="modal-actions">
              <button type="button" @click="showBlockDeviceModal = false" class="btn btn-outline">
                Отмена
              </button>
              <button type="submit" class="btn btn-danger" :disabled="blockLoading">
                {{ blockLoading ? 'Блокировка...' : 'Заблокировать' }}
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>

    <!-- Модальное окно деталей устройства -->
    <div v-if="showDeviceDetails" class="modal-overlay" @click="closeModal">
      <div class="modal modal-large" @click.stop>
        <div class="modal-header">
          <h3>Подробности заблокированного устройства</h3>
          <button @click="showDeviceDetails = false" class="modal-close">✕</button>
        </div>
        
        <div class="modal-body">
          <div v-if="selectedDevice" class="device-details">
            <div class="details-section">
              <h4>Основная информация</h4>
              <div class="details-grid">
                <div class="detail-item">
                  <strong>Device Fingerprint:</strong>
                  <code>{{ selectedDevice.deviceFingerprint }}</code>
                </div>
                <div class="detail-item">
                  <strong>Дата блокировки:</strong>
                  <span>{{ formatDate(selectedDevice.blockedAt) }}</span>
                </div>
                <div class="detail-item">
                  <strong>Заблокировал:</strong>
                  <span>{{ selectedDevice.blockedBy?.name || 'Система' }}</span>
                </div>
                <div class="detail-item">
                  <strong>Причина:</strong>
                  <span>{{ selectedDevice.reason }}</span>
                </div>
                <div class="detail-item">
                  <strong>Статус:</strong>
                  <span class="status-badge" :class="selectedDevice.isActive ? 'active' : 'inactive'">
                    {{ selectedDevice.isActive ? 'Активна' : 'Снята' }}
                  </span>
                </div>
              </div>
            </div>

            <div v-if="selectedDevice.deviceInfo" class="details-section">
              <h4>Информация об устройстве</h4>
              <div class="details-grid">
                <div class="detail-item">
                  <strong>User Agent:</strong>
                  <span class="text-small">{{ selectedDevice.deviceInfo.userAgent }}</span>
                </div>
                <div class="detail-item">
                  <strong>Платформа:</strong>
                  <span>{{ selectedDevice.deviceInfo.platform }}</span>
                </div>
                <div v-if="selectedDevice.deviceInfo.screenResolution" class="detail-item">
                  <strong>Разрешение экрана:</strong>
                  <span>{{ selectedDevice.deviceInfo.screenResolution }}</span>
                </div>
                <div v-if="selectedDevice.deviceInfo.timezone" class="detail-item">
                  <strong>Часовой пояс:</strong>
                  <span>{{ selectedDevice.deviceInfo.timezone }}</span>
                </div>
              </div>
            </div>

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

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

export default {
  name: 'BlockedDevicesManagement',
  setup() {
    const devices = ref([]);
    const loading = ref(false);
    const error = ref('');
    const pagination = ref({
      currentPage: 1,
      totalPages: 1,
      totalItems: 0,
      limit: 20
    });

    const statistics = ref({
      totalBlocked: 0,
      todayBlocked: 0,
      recentUnblocked: 0,
      bypassAttempts: 0
    });

    const filters = reactive({
      isActive: 'true',
      userId: '',
      sortBy: 'blockedAt',
      sortOrder: 'desc'
    });

    const showBlockDeviceModal = ref(false);
    const showDeviceDetails = ref(false);
    const selectedDevice = ref(null);
    const blockLoading = ref(false);

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

    let filterTimeout = null;

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

      try {
        const params = {
          page: pagination.value.currentPage,
          limit: pagination.value.limit,
          ...filters
        };

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

        const response = await api.getBlockedDevices(params);
        
        devices.value = response.data.data;
        pagination.value = {
          ...pagination.value,
          ...response.data.pagination
        };

        // Обновляем статистику
        calculateStatistics();

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

    // Вычисление статистики
    const calculateStatistics = () => {
      const total = devices.value.length;
      const active = devices.value.filter(d => d.isActive).length;
      
      const today = new Date();
      today.setHours(0, 0, 0, 0);
      const todayBlocked = devices.value.filter(d => 
        new Date(d.blockedAt) >= today && d.isActive
      ).length;

      const weekAgo = new Date();
      weekAgo.setDate(weekAgo.getDate() - 7);
      const recentUnblocked = devices.value.filter(d => 
        !d.isActive && d.unblockedAt && new Date(d.unblockedAt) >= weekAgo
      ).length;

      const totalBypassAttempts = devices.value.reduce((sum, d) => 
        sum + (d.bypassAttempts?.length || 0), 0
      );

      statistics.value = {
        totalBlocked: active,
        todayBlocked,
        recentUnblocked,
        bypassAttempts: totalBypassAttempts
      };
    };

    // Применение фильтров
    const applyFilters = () => {
      pagination.value.currentPage = 1;
      loadBlockedDevices();
    };

    // Отложенное применение фильтров
    const debounceFilter = () => {
      clearTimeout(filterTimeout);
      filterTimeout = setTimeout(() => {
        applyFilters();
      }, 500);
    };

    // Очистка фильтров
    const clearFilters = () => {
      filters.isActive = 'true';
      filters.userId = '';
      filters.sortBy = 'blockedAt';
      filters.sortOrder = 'desc';
      applyFilters();
    };

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

    // Обновление данных
    const refreshData = () => {
      loadBlockedDevices();
    };

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

      const reason = blockForm.reason === 'custom' ? blockForm.customReason : blockForm.reason;
      if (!reason) {
        alert('Пожалуйста, укажите причину блокировки');
        return;
      }

      blockLoading.value = true;

      try {
        await api.blockDevice({
          userId: blockForm.userId,
          deviceFingerprint: blockForm.deviceFingerprint,
          reason
        });

        // Сбрасываем форму
        blockForm.userId = '';
        blockForm.deviceFingerprint = '';
        blockForm.reason = '';
        blockForm.customReason = '';
        
        showBlockDeviceModal.value = false;
        
        // Обновляем список
        loadBlockedDevices();
        
        alert('Устройство успешно заблокировано');

      } 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 {
        await api.unblockDevice(device.deviceFingerprint, reason);
        loadBlockedDevices();
        alert('Устройство успешно разблокировано');

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

    // Повторная блокировка устройства
    const reblockDevice = async (device) => {
      const reason = prompt('Укажите причину повторной блокировки:', device.reason);
      if (!reason) return;

      try {
        await api.blockDevice({
          userId: device.blockedUserId._id,
          deviceFingerprint: device.deviceFingerprint,
          reason
        });

        loadBlockedDevices();
        alert('Устройство заблокировано повторно');

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

    // Просмотр деталей устройства
    const viewDeviceDetails = (device) => {
      selectedDevice.value = device;
      showDeviceDetails.value = true;
    };

    // Просмотр попыток обхода
    const showBypassAttempts = (device) => {
      viewDeviceDetails(device);
    };

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

    // Утилиты форматирования
    const formatFingerprint = (fingerprint) => {
      if (!fingerprint) return 'Нет данных';
      return fingerprint.length > 16 ? 
        fingerprint.substring(0, 8) + '...' + fingerprint.substring(-8) : 
        fingerprint;
    };

    const formatUserAgent = (userAgent) => {
      if (!userAgent) return 'Неизвестно';
      
      // Извлекаем основную информацию о браузере
      const browserMatch = userAgent.match(/(Chrome|Firefox|Safari|Edge|Opera)\/?([\d.]+)/);
      if (browserMatch) {
        return `${browserMatch[1]} ${browserMatch[2]}`;
      }
      
      return userAgent.length > 50 ? userAgent.substring(0, 50) + '...' : userAgent;
    };

    const formatDate = (dateString) => {
      if (!dateString) return 'Неизвестно';
      
      return new Date(dateString).toLocaleString('ru-RU', {
        year: 'numeric',
        month: 'short',
        day: 'numeric',
        hour: '2-digit',
        minute: '2-digit'
      });
    };

    const formatAttemptType = (type) => {
      const types = {
        'api_request': 'API запрос',
        'page_visit': 'Посещение страницы',
        'login_attempt': 'Попытка входа',
        'registration_attempt': 'Попытка регистрации'
      };
      return types[type] || type;
    };

    onMounted(() => {
      loadBlockedDevices();
    });

    return {
      devices,
      loading,
      error,
      pagination,
      statistics,
      filters,
      showBlockDeviceModal,
      showDeviceDetails,
      selectedDevice,
      blockForm,
      blockLoading,
      loadBlockedDevices,
      applyFilters,
      debounceFilter,
      clearFilters,
      changePage,
      refreshData,
      blockDevice,
      unblockDevice,
      reblockDevice,
      viewDeviceDetails,
      showBypassAttempts,
      closeModal,
      formatFingerprint,
      formatUserAgent,
      formatDate,
      formatAttemptType
    };
  }
};
</script>

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

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

.page-header h1 {
  margin: 0;
  color: #333;
  font-size: 28px;
}

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

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.stat-card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  border: 1px solid #eee;
  display: flex;
  align-items: center;
  gap: 15px;
}

.stat-icon {
  font-size: 24px;
  width: 50px;
  height: 50px;
  background: #f8f9fa;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stat-value {
  font-size: 24px;
  font-weight: 700;
  color: #333;
  line-height: 1;
}

.stat-label {
  font-size: 14px;
  color: #666;
  margin-top: 5px;
}

.filters-panel {
  background: white;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
  border: 1px solid #eee;
}

.filters-row {
  display: flex;
  align-items: end;
  gap: 20px;
  flex-wrap: wrap;
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.filter-group label {
  font-size: 14px;
  color: #555;
  font-weight: 500;
}

.filter-group select,
.filter-group input {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  min-width: 120px;
}

.devices-table-container {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #eee;
  margin-bottom: 20px;
}

.loading-state,
.error-state,
.empty-state {
  padding: 40px;
  text-align: center;
  color: #666;
}

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

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

.devices-table {
  width: 100%;
  border-collapse: collapse;
}

.devices-table th,
.devices-table td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid #eee;
  vertical-align: top;
}

.devices-table th {
  background: #f8f9fa;
  font-weight: 600;
  color: #333;
  font-size: 14px;
}

.devices-table tr.inactive {
  opacity: 0.6;
}

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

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

.device-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.user-agent,
.platform {
  font-size: 11px;
  color: #666;
}

.user-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.user-name {
  font-weight: 500;
  color: #333;
}

.user-email {
  font-size: 12px;
  color: #666;
}

.reason-cell {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.reason-text {
  font-size: 14px;
  color: #333;
}

.auto-blocked-badge {
  background: #ffc107;
  color: #212529;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 500;
  width: fit-content;
}

.date-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.date {
  font-size: 14px;
  color: #333;
}

.blocked-by {
  font-size: 12px;
  color: #666;
}

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

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

.status-badge.inactive {
  background: #6c757d;
  color: white;
}

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

.bypass-count {
  font-weight: 600;
  color: #dc3545;
}

.btn-link {
  background: none;
  border: none;
  color: #007bff;
  font-size: 12px;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
}

.actions-cell {
  display: flex;
  gap: 5px;
}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  padding: 20px;
}

.pagination-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;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal {
  background: white;
  border-radius: 12px;
  max-width: 500px;
  width: 90%;
  max-height: 80vh;
  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;
  color: #333;
}

.modal-close {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: #666;
}

.modal-body {
  padding: 20px;
}

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

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

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  box-sizing: border-box;
}

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

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}

.device-details {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.details-section h4 {
  margin: 0 0 15px 0;
  color: #333;
  font-size: 16px;
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
}

.details-grid {
  display: grid;
  gap: 15px;
}

.detail-item {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.detail-item strong {
  color: #333;
  min-width: 120px;
}

.text-small {
  font-size: 12px;
  word-break: break-all;
}

.bypass-attempts-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.bypass-attempt {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 15px;
  border-left: 3px solid #dc3545;
}

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

.attempt-type {
  font-weight: 500;
  color: #333;
}

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

.attempt-details {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.attempt-detail {
  font-size: 12px;
  color: #555;
}

.attempt-detail strong {
  margin-right: 5px;
}

.btn {
  background: #007bff;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  text-decoration: none;
  display: inline-block;
  transition: all 0.2s;
}

.btn:hover:not(:disabled) {
  opacity: 0.9;
  transform: translateY(-1px);
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

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

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

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

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

.btn-danger {
  background: #dc3545;
}

.btn-outline {
  background: white;
  color: #007bff;
  border: 1px solid #007bff;
}

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

/* Responsive design */
@media (max-width: 768px) {
  .blocked-devices-management {
    padding: 10px;
  }

  .page-header {
    flex-direction: column;
    gap: 15px;
    align-items: stretch;
  }

  .header-actions {
    justify-content: center;
  }

  .stats-grid {
    grid-template-columns: 1fr;
  }

  .filters-row {
    flex-direction: column;
    align-items: stretch;
  }

  .filter-group {
    width: 100%;
  }

  .devices-table-container {
    overflow-x: auto;
  }

  .devices-table {
    min-width: 800px;
  }

  .modal {
    margin: 20px;
    max-height: calc(100vh - 40px);
  }

  .pagination {
    flex-direction: column;
    gap: 10px;
  }
}
</style>