<template>
  <header class="topbar">
    <div class="title">RADIUS Nucleo</div>
    <div class="actions">
      <button class="icon-btn" @click="toggleTheme">
        <img class="icon" :src="theme === 'light' ? '/icons/moon.svg' : '/icons/sun.svg'" alt="theme">
      </button>
      <span class="chip"><span class="muted">Estado:</span> {{ statusText }}</span>
      <button class="icon-btn" @click="openAddUser">
        <img class="icon" src="/icons/user-plus.svg" alt="usuario"> Usuario
      </button>
      <button class="icon-btn" @click="openAddGuest">
        <img class="icon" src="/icons/guest.svg" alt="invitado"> Invitado
      </button>
      <button class="icon-btn" @click="openSettings">
        <img class="icon" src="/icons/settings.svg" alt="config"> Configuración
      </button>
    </div>
  </header>

  <section class="shell">
    <!-- Sidebar: Eventos -->
    <aside class="panel" :class="{ collapsed: sidebarCollapsed }">
      <div class="panel-header">
        <div class="panel-title">Eventos FreeRADIUS</div>
        <div class="panel-actions">
          <button class="icon-btn" title="Filtrar" @click="showEventFilters = true"><img class="icon" src="/icons/filter.svg" alt="filtrar"></button>
          <button class="icon-btn" title="Limpiar" @click="clearRequests"><img class="icon" src="/icons/clear.svg" alt="limpiar"></button>
          <button class="icon-btn" title="Test" @click="selfTest"><img class="icon" src="/icons/test.svg" alt="test"></button>
          <a class="icon-btn" title="Descargar" href="/api/requests.csv" target="_blank"><img class="icon" src="/icons/download.svg" alt="descargar"></a>
          <button class="icon-btn" title="Copiar" @click="copyRequests"><img class="icon" src="/icons/copy.svg" alt="copiar"></button>
          <button class="icon-btn" title="Colapsar" @click="sidebarCollapsed = !sidebarCollapsed">{{ sidebarCollapsed ? 'Expandir' : 'Colapsar' }}</button>
        </div>
      </div>
      <div class="scroll">
        <div v-if="loading.requests" class="muted">Cargando eventos…</div>
        <EventCard v-for="ev in filteredRequests" :key="ev.id" :ev="ev" />
      </div>
    </aside>

    <!-- Main: Usuarios -->
    <main class="panel" :class="{ collapsed: mainCollapsed }">
      <div class="panel-header">
        <div class="row">
          <div class="panel-title">Usuarios y Dispositivos</div>
          <span class="spacer"></span>
          <button class="icon-btn" title="Vista usuarios" @click="layoutMode='user'">
            <img class="icon" src="/icons/layout-users.svg" alt="usuarios"/> Usuarios
          </button>
          <button class="icon-btn" title="Vista dispositivos" @click="layoutMode='device'">
            <img class="icon" src="/icons/layout-devices.svg" alt="dispositivos"/> Dispositivos
          </button>
          <button class="icon-btn" title="Filtrar" @click="showUserFilters = true"><img class="icon" src="/icons/filter.svg" alt="filtro"/></button>
          <button class="icon-btn" title="Colapsar" @click="mainCollapsed = !mainCollapsed">{{ mainCollapsed ? 'Expandir' : 'Colapsar' }}</button>
        </div>
      </div>
      <div class="scroll">
        <form @submit.prevent="createUser" class="row" style="margin-bottom:10px;">
          <input v-model="form.username" placeholder="usuario" required class="toggle"/>
          <input v-model="form.password" placeholder="contraseña" required class="toggle"/>
          <input v-model="form.vlan" placeholder="VLAN" class="toggle"/>
          <label class="row toggle" style="gap:6px;"><input type="checkbox" v-model="form.disabled"/> deshabilitado</label>
          <button type="submit" class="icon-btn">Crear / Actualizar</button>
        </form>
        <div v-if="loading.users" class="muted">Cargando usuarios…</div>
        <div v-else class="grid">
          <UserCard v-for="u in filteredUsers" :key="u.username" :item="u" :mode="layoutMode"
            @toggleDisable="toggleDisable" @remove="removeUser" />
        </div>
      </div>
    </main>
  </section>

  <!-- Modals -->
  <Modal :open="showEventFilters" title="Filtros de eventos" @close="showEventFilters=false">
    <div class="row" style="margin:8px 0;">
      <input v-model="eventFilters.text" placeholder="Buscar texto" class="toggle" style="flex:1;"/>
      <select v-model="eventFilters.type" class="toggle">
        <option value="">Todos</option>
        <option value="authorize">authorize</option>
        <option value="accounting">accounting</option>
        <option value="post-auth">post-auth</option>
        <option value="selftest">selftest</option>
        <option value="coa-disconnect">coa-disconnect</option>
      </select>
    </div>
  </Modal>

  <Modal :open="showUserFilters" title="Filtros de usuarios" @close="showUserFilters=false">
    <div class="row" style="margin:8px 0;">
      <input v-model="userFilters.text" placeholder="Buscar usuario" class="toggle" style="flex:1;"/>
      <select v-model="userFilters.status" class="toggle">
        <option value="">Todos</option>
        <option value="active">Activos</option>
        <option value="disabled">Deshabilitados</option>
      </select>
    </div>
  </Modal>
</template>

<script setup>
import { onMounted, reactive, ref, computed } from 'vue';
import EventCard from './components/EventCard.js';
import UserCard from './components/UserCard.js';
import Modal from './components/Modal.vue';

const users = ref([]);
const requests = ref([]);
const loading = reactive({ users: false, requests: false });
const form = reactive({ username: '', password: '', vlan: '', disabled: false });

const showEventFilters = ref(false);
const showUserFilters = ref(false);
const eventFilters = reactive({ text: '', type: '' });
const userFilters = reactive({ text: '', status: '' });
const sidebarCollapsed = ref(false);
const mainCollapsed = ref(false);
const layoutMode = ref('user');
const theme = ref(localStorage.getItem('theme') || 'dark');
const statusText = ref('OK');

async function fetchUsers() {
  loading.users = true;
  try {
    const res = await fetch('/api/users');
    const data = await res.json();
    users.value = data.items || [];
  } finally { loading.users = false; }
}

async function fetchRequests() {
  loading.requests = true;
  try {
    const res = await fetch('/api/requests');
    const data = await res.json();
    requests.value = data.items || [];
  } finally { loading.requests = false; }
}

async function createUser() {
  const payload = { ...form };
  if (!payload.vlan) delete payload.vlan;
  await fetch('/api/users', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload) });
  form.username = '';
  form.password = '';
  form.vlan = '';
  form.disabled = false;
  await fetchUsers();
}

async function toggleDisable(u) {
  await fetch(`/api/users/${encodeURIComponent(u.username)}`, {
    method: 'PATCH',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ disabled: !u.disabled })
  });
  await fetchUsers();
}

async function removeUser(u) {
  if (!confirm(`Eliminar ${u.username}?`)) return;
  await fetch(`/api/users/${encodeURIComponent(u.username)}`, { method: 'DELETE' });
  await fetchUsers();
}

async function refreshRequests() { await fetchRequests(); }

async function clearRequests() {
  await fetch('/api/requests', { method: 'DELETE' });
  await fetchRequests();
}

async function selfTest() {
  await fetch('/test/radius', { method: 'POST' });
}

function setupSse() {
  const ev = new EventSource('/api/events');
  ev.addEventListener('message', (e) => {
    try {
      const data = JSON.parse(e.data);
      if (data && data.ts) requests.value.push(data);
    } catch {}
  });
  ev.addEventListener('clear', () => { requests.value = []; });
}

onMounted(async () => {
  await fetchUsers();
  await fetchRequests();
  setupSse();
  applyTheme();
});

const filteredRequests = computed(() => {
  return requests.value.filter(ev => {
    if (eventFilters.type && ev.type !== eventFilters.type) return false;
    if (eventFilters.text) {
      const t = eventFilters.text.toLowerCase();
      const blob = JSON.stringify(ev).toLowerCase();
      if (!blob.includes(t)) return false;
    }
    return true;
  });
});

const filteredUsers = computed(() => {
  return users.value.filter(u => {
    if (userFilters.text && !u.username.toLowerCase().includes(userFilters.text.toLowerCase())) return false;
    if (userFilters.status === 'active' && u.disabled) return false;
    if (userFilters.status === 'disabled' && !u.disabled) return false;
    return true;
  });
});

function copyRequests() {
  const txt = JSON.stringify(requests.value, null, 2);
  navigator.clipboard?.writeText(txt);
}

function toggleTheme() {
  theme.value = theme.value === 'light' ? 'dark' : 'light';
  localStorage.setItem('theme', theme.value);
  applyTheme();
}
function applyTheme() {
  document.documentElement.classList.toggle('light', theme.value === 'light');
}

function openAddUser() { /* placeholder for advanced modal */ }
function openAddGuest() { /* placeholder for advanced modal */ }
function openSettings() { /* placeholder for advanced modal */ }
</script>
