<script setup lang="ts">
import { ref } from 'vue'
import GlassCard from '@/components/ui/GlassCard.vue'
import DataTable from '@/components/ui/DataTable.vue'

const search = ref('')
const roleFilter = ref('Все роли')
const instituteFilter = ref('Все институты')

const columns = [
  { key: 'name', label: 'Имя' },
  { key: 'email', label: 'Email' },
  { key: 'role', label: 'Роль', align: 'center' },
  { key: 'institute', label: 'Институт' },
  { key: 'activity', label: 'Активность', align: 'center' },
  { key: 'created', label: 'Дата регистрации' },
  { key: 'actions', label: 'Действия', align: 'right' },
]

const rows = [
  { id: '1', name: 'Алексей Морозов', email: 'a.morozov@sfedu.ru', role: 'Студент', institute: 'ИКТИБ', activity: 'Высокая', created: '12.03.2024' },
  { id: '2', name: 'Елена Смирнова', email: 'e.smirnova@sfedu.ru', role: 'Преподаватель', institute: 'АГиС', activity: 'Средняя', created: '05.02.2023' },
  { id: '3', name: 'Виктор Алексеев', email: 'admin@sfedu.ru', role: 'Администратор', institute: 'ЮФУ', activity: 'Высокая', created: '01.09.2022' },
]
</script>

<template>
  <div class="admin-users page-content">
    <div class="header">
      <h1 class="page-title">Пользователи</h1>
      <button class="btn-primary">Добавить пользователя</button>
    </div>

    <GlassCard>
      <div class="filters">
        <input v-model="search" class="glass-input" placeholder="Поиск по имени или email" />
        <select v-model="roleFilter" class="glass-input">
          <option>Все роли</option>
          <option>Студент</option>
          <option>Преподаватель</option>
          <option>Администратор</option>
        </select>
        <select v-model="instituteFilter" class="glass-input">
          <option>Все институты</option>
          <option>ИКТИБ</option>
          <option>ИФиМКН</option>
          <option>АГиС</option>
          <option>ЮФ</option>
        </select>
      </div>

      <DataTable :columns="columns" :rows="rows">
        <template #role="{ value }">
          <span :class="value === 'Студент' ? 'badge badge-green' : value === 'Преподаватель' ? 'badge badge-blue' : 'badge badge-purple'">{{ value }}</span>
        </template>
        <template #activity="{ value }">
          <span class="badge" :class="value === 'Высокая' ? 'badge-green' : 'badge-orange'">{{ value }}</span>
        </template>
        <template #actions>
          <div class="actions">
            <button class="btn-ghost">Назначить роль</button>
            <button class="btn-ghost">Заблокировать</button>
            <button class="btn-ghost">Профиль</button>
          </div>
        </template>
      </DataTable>
    </GlassCard>
  </div>
</template>

<style scoped>
.admin-users { display: flex; flex-direction: column; gap: 16px; }
.header { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 12px; }
.actions { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
</style>
