import { Component, signal, computed } from '@angular/core';
import { CommonModule } from '@angular/common';

interface Employee {
  id: number;
  name: string;
  role: string;
  rating: number;
  clients: number;
  rate: number;
  avatar: string;
  tags: string[];
}

@Component({
  selector: 'app-dashboard',
  standalone: true,
  imports: [CommonModule],
  template: `
    <div class="flex flex-col lg:flex-row gap-6 p-2 lg:p-6 min-h-[80vh]">
      <!-- Sidebar Navigation Menu (Cyberpunk theme) -->
      <aside class="w-full lg:w-64 flex flex-col gap-3">
        <div class="glass-panel p-4 rounded-2xl flex flex-col gap-2">
          <div class="text-xs font-bold text-white/40 uppercase tracking-widest px-3 mb-2">Panel Kinetix</div>
          
          <button (click)="setActiveTab('inicio')" 
            [class.border-l-4]="activeTab() === 'inicio'" 
            [class.border-cyan-400]="activeTab() === 'inicio'"
            [class.bg-white-5]="activeTab() === 'inicio'"
            class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-left text-sm font-semibold transition-all hover:bg-white/5 text-slate-300 hover:text-white">
            <span class="text-lg">⚡</span> Ecosistema Kinetix
          </button>

          <button (click)="setActiveTab('directory')" 
            [class.border-l-4]="activeTab() === 'directory'" 
            [class.border-cyan-400]="activeTab() === 'directory'"
            class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-left text-sm font-semibold transition-all hover:bg-white/5 text-slate-300 hover:text-white">
            <span class="text-lg">👤</span> Directorio AD
          </button>

          <button (click)="setActiveTab('workflow')" 
            [class.border-l-4]="activeTab() === 'workflow'" 
            [class.border-magenta-400]="activeTab() === 'workflow'"
            class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-left text-sm font-semibold transition-all hover:bg-white/5 text-slate-300 hover:text-white">
            <span class="text-lg">⚙️</span> Workflow Aprobación
          </button>

          <button (click)="setActiveTab('spaces')" 
            [class.border-l-4]="activeTab() === 'spaces'" 
            [class.border-purple-400]="activeTab() === 'spaces'"
            class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-left text-sm font-semibold transition-all hover:bg-white/5 text-slate-300 hover:text-white">
            <span class="text-lg">📅</span> Gestión de Espacios
          </button>

          <button (click)="setActiveTab('metrics')" 
            [class.border-l-4]="activeTab() === 'metrics'" 
            [class.border-cyan-400]="activeTab() === 'metrics'"
            class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-left text-sm font-semibold transition-all hover:bg-white/5 text-slate-300 hover:text-white">
            <span class="text-lg">📈</span> Adopción y KPIs
          </button>

          <button (click)="setActiveTab('admin')" 
            [class.border-l-4]="activeTab() === 'admin'" 
            [class.border-magenta-400]="activeTab() === 'admin'"
            class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-left text-sm font-semibold transition-all hover:bg-white/5 text-slate-300 hover:text-white">
            <span class="text-lg">🔑</span> Visión Admin
          </button>
        </div>

        <!-- System Status Mini Card -->
        <div class="glass-panel p-4 rounded-2xl text-xs flex flex-col gap-2">
          <div class="flex justify-between items-center">
            <span class="text-white/50">Estado API:</span>
            <span class="text-emerald-400 font-bold flex items-center gap-1.5">
              <span class="w-2 h-2 rounded-full bg-emerald-400 animate-pulse"></span> ONLINE
            </span>
          </div>
          <div class="flex justify-between items-center">
            <span class="text-white/50">Sesión SSO:</span>
            <span class="text-cyan-400 font-bold">ACTIVE AD</span>
          </div>
          <div class="flex justify-between items-center">
            <span class="text-white/50">Versión:</span>
            <span class="text-white/30">v2.4.0 (Neon)</span>
          </div>
        </div>
      </aside>

      <!-- Main Workstation View Area -->
      <main class="flex-grow flex flex-col gap-6">
        
        <!-- ================= PAGE 1: INICIO ================= -->
        @if (activeTab() === 'inicio') {
          <div class="flex flex-col gap-8 animate-fadeIn">
            <!-- Hero banner style layout -->
            <div class="glass-panel p-8 rounded-3xl relative overflow-hidden flex flex-col gap-4 bg-gradient-to-br from-[#0c0f1d] to-[#080a12] border-white/5">
              <div class="absolute -right-20 -top-20 w-64 h-64 bg-cyan-500/10 rounded-full blur-[100px]"></div>
              <div class="absolute -left-20 -bottom-20 w-64 h-64 bg-magenta-500/10 rounded-full blur-[100px]"></div>
              
              <span class="text-neon-cyan text-xs font-bold uppercase tracking-widest">BIENVENIDO AL FUTURO</span>
              <h2 class="text-4xl lg:text-5xl font-black tracking-tight text-white leading-none">
                Ecosistema <span class="text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 via-blue-500 to-indigo-500">Kinetix</span>
              </h2>
              <p class="text-slate-400 text-base max-w-2xl leading-relaxed">
                La evolución de la intranet corporativa: Automatización de procesos, diseño premium Neón de alta fidelidad y autogestión corporativa integral para equipos ágiles.
              </p>
              
              <div class="flex flex-wrap gap-4 mt-2">
                <button (click)="setActiveTab('directory')" class="px-5 py-2.5 rounded-full btn-cyan text-xs uppercase font-extrabold tracking-wider">
                  Explorar Directorio
                </button>
                <button (click)="setActiveTab('spaces')" class="px-5 py-2.5 rounded-full border border-white/10 hover:border-white/20 transition text-xs uppercase font-extrabold tracking-wider bg-white/5 text-white">
                  Reservar una Sala
                </button>
              </div>
            </div>

            <!-- Page 3: Módulos de Nueva Generación -->
            <div class="flex flex-col gap-4">
              <h3 class="text-xl font-bold tracking-tight text-neon-cyan uppercase tracking-wide">Módulos de Nueva Generación</h3>
              <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                <!-- Info block -->
                <div class="glass-panel glass-panel-hover p-6 rounded-2xl neon-border-cyan flex flex-col gap-4">
                  <div class="w-12 h-12 rounded-xl bg-cyan-500/10 flex items-center justify-center text-2xl text-cyan-400">📚</div>
                  <h4 class="text-lg font-bold text-white">Bloque de Info</h4>
                  <p class="text-sm text-slate-400 leading-relaxed">
                    Gestión de contenidos corporativos con arquitectura robusta de microservicios y publicación de artículos en tiempo récord.
                  </p>
                </div>

                <!-- AD Directories -->
                <div class="glass-panel glass-panel-hover p-6 rounded-2xl neon-border-magenta flex flex-col gap-4">
                  <div class="w-12 h-12 rounded-xl bg-magenta-500/10 flex items-center justify-center text-2xl text-magenta-400">👤</div>
                  <h4 class="text-lg font-bold text-white">Directorios AD</h4>
                  <p class="text-sm text-slate-400 leading-relaxed">
                    Sincronización nativa instantánea con Active Directory y perfiles dinámicos inteligentes para el equipo de desarrollo.
                  </p>
                </div>

                <!-- Self management -->
                <div class="glass-panel glass-panel-hover p-6 rounded-2xl neon-border-purple flex flex-col gap-4">
                  <div class="w-12 h-12 rounded-xl bg-purple-500/10 flex items-center justify-center text-2xl text-purple-400">📅</div>
                  <h4 class="text-lg font-bold text-white">Autogestión</h4>
                  <p class="text-sm text-slate-400 leading-relaxed">
                    Reserva fluida de salas de conferencias, oficinas temporales e incidencias con disponibilidad y alertas en tiempo real.
                  </p>
                </div>
              </div>
            </div>
          </div>
        }

        <!-- ================= PAGE 2: DIRECTORY ================= -->
        @if (activeTab() === 'directory') {
          <div class="flex flex-col gap-6 animate-fadeIn">
            <h2 class="text-2xl font-black text-white uppercase tracking-tight">Interfaz Directory Modern</h2>
            
            <div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
              <!-- Sidebar Filters -->
              <div class="glass-panel p-6 rounded-2xl flex flex-col gap-5 h-fit">
                <h3 class="text-sm font-bold uppercase tracking-widest text-slate-400">Búsqueda & Filtrado</h3>
                <p class="text-xs text-white/50 leading-relaxed">Uso de bordes suaves y ergonómicos para optimizar la visualización de datos.</p>
                
                <div class="flex flex-col gap-4">
                  <!-- Search input -->
                  <div class="flex flex-col gap-1.5">
                    <label class="text-[10px] uppercase font-bold text-slate-400 tracking-wider">Buscar Empleado</label>
                    <input type="text" placeholder="Buscar empleado..." 
                      (input)="updateSearch($event)"
                      class="px-4 py-2.5 rounded-full input-cyberpunk text-sm w-full" />
                  </div>

                  <!-- Department select -->
                  <div class="flex flex-col gap-1.5">
                    <label class="text-[10px] uppercase font-bold text-slate-400 tracking-wider">Departamento</label>
                    <select (change)="updateDept($event)" class="px-4 py-2.5 rounded-full input-cyberpunk text-sm w-full bg-slate-900">
                      <option value="ALL">Todos los Departamentos</option>
                      <option value="IT">IT & Desarrollo</option>
                      <option value="Diseño">Diseño y UI/UX</option>
                      <option value="Mantenimiento">Mantenimiento</option>
                    </select>
                  </div>

                  <button class="w-full py-2.5 rounded-full btn-cyan text-xs uppercase font-extrabold tracking-wider mt-2">
                    APLICAR FILTROS
                  </button>
                </div>
              </div>

              <!-- Directory grid -->
              <div class="lg:col-span-3 flex flex-col gap-4">
                <!-- Search Result Summary -->
                <div class="text-xs text-slate-400 flex justify-between items-center">
                  <span>Mostrando {{ filteredEmployees().length }} empleados registrados</span>
                  <span class="text-neon-cyan">Sincronizado con Active Directory</span>
                </div>
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                  @for (emp of filteredEmployees(); track emp.id) {
                    <!-- Profile Card in cyberpunk style exactly matching the presentation's John Morton cards -->
                    <div class="glass-panel rounded-3xl overflow-hidden relative flex flex-col hover:border-cyan-500/40 transition-all duration-300">
                      
                      <!-- Header Gradient Background of card -->
                      <div class="h-20 bg-gradient-to-r from-purple-600 via-magenta-500 to-cyan-400 relative">
                        <span class="absolute top-3 right-3 text-xs bg-black/40 backdrop-blur px-2.5 py-0.5 rounded-full text-white/95">
                          ID: AD-{{ emp.id * 123 }}
                        </span>
                      </div>

                      <div class="p-6 pt-0 relative flex-grow flex flex-col">
                        <!-- Profile Image offset -->
                        <div class="relative -mt-10 mb-3 flex justify-between items-end">
                          <div class="w-20 h-20 rounded-full border-4 border-[#0c0f1d] overflow-hidden bg-slate-800">
                            <div class="w-full h-full flex items-center justify-center text-4xl bg-slate-900 text-white font-bold select-none">
                              {{ emp.avatar }}
                            </div>
                          </div>
                          <!-- Interactive star badge -->
                          <div class="flex items-center gap-1 text-xs bg-slate-900/80 backdrop-blur px-2.5 py-1 rounded-full border border-white/5">
                            <span class="text-amber-400">★</span>
                            <span class="font-bold text-white">{{ emp.rating }}</span>
                          </div>
                        </div>

                        <!-- Info -->
                        <h4 class="text-lg font-extrabold text-white leading-tight">{{ emp.name }}</h4>
                        <span class="text-xs text-neon-cyan font-semibold tracking-wide uppercase mb-3 block">{{ emp.role }}</span>
                        
                        <!-- Tags -->
                        <div class="flex flex-wrap gap-1.5 mb-4">
                          @for (tag of emp.tags; track tag) {
                            <span class="text-[10px] bg-white/5 border border-white/5 rounded-full px-2.5 py-0.5 text-slate-300 font-medium">
                              {{ tag }}
                            </span>
                          }
                        </div>

                        <hr class="border-white/5 my-3" />

                        <!-- Stats Grid -->
                        <div class="grid grid-cols-2 gap-4 mb-4 text-center">
                          <div class="bg-white/5 p-2 rounded-xl border border-white/5">
                            <div class="text-[10px] text-white/50 uppercase font-bold tracking-wider">Clientes</div>
                            <div class="text-sm font-extrabold text-white">{{ emp.clients }}</div>
                          </div>
                          <div class="bg-white/5 p-2 rounded-xl border border-white/5">
                            <div class="text-[10px] text-white/50 uppercase font-bold tracking-wider">Tarifa/Hora</div>
                            <div class="text-sm font-extrabold text-white">\${{ emp.rate }}/hr</div>
                          </div>
                        </div>

                        <!-- Action button -->
                        <button (click)="contactEmployee(emp.name)" class="w-full py-2.5 rounded-2xl bg-white text-black font-extrabold text-xs uppercase tracking-wider hover:bg-cyan-400 hover:text-black transition-all">
                          Get In Touch
                        </button>
                      </div>
                    </div>
                  }
                </div>
              </div>
            </div>
          </div>
        }

        <!-- ================= PAGE 3: WORKFLOW ================= -->
        @if (activeTab() === 'workflow') {
          <div class="flex flex-col gap-6 animate-fadeIn">
            <h2 class="text-2xl font-black text-white uppercase tracking-tight">Workflow de Aprobación</h2>
            
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
              <!-- Details & Steps -->
              <div class="glass-panel p-6 rounded-2xl flex flex-col gap-6 justify-between">
                <div class="flex flex-col gap-4">
                  <span class="text-neon-magenta text-xs font-bold uppercase tracking-widest">CICLO COMPLETO DE VIDA</span>
                  <h3 class="text-xl font-bold text-white">Validación y Publicación Automatizada</h3>
                  <p class="text-sm text-slate-400 leading-relaxed">
                    Las propuestas de contenidos y flujos pasan por un motor estructurado que valida y publica automáticamente en canales institucionales y redes corporativas.
                  </p>
                  
                  <!-- Step List -->
                  <div class="flex flex-col gap-3 mt-2">
                    <div class="flex items-start gap-3.5 p-3.5 rounded-xl bg-white/5 border border-white/5">
                      <span class="text-neon-cyan font-bold">✓</span>
                      <div>
                        <strong class="text-white block text-sm">Creación</strong>
                        <span class="text-xs text-slate-400">Captura de datos optimizada a través de formularios reactivos del lado del cliente.</span>
                      </div>
                    </div>
                    <div class="flex items-start gap-3.5 p-3.5 rounded-xl bg-white/5 border border-white/5">
                      <span class="text-neon-cyan font-bold">✓</span>
                      <div>
                        <strong class="text-white block text-sm">Validación</strong>
                        <span class="text-xs text-slate-400">Motor de reglas multinivel integrado con SSO y Active Directory para jerarquías de aprobación.</span>
                      </div>
                    </div>
                    <div class="flex items-start gap-3.5 p-3.5 rounded-xl bg-white/5 border border-white/5">
                      <span class="text-neon-cyan font-bold">✓</span>
                      <div>
                        <strong class="text-white block text-sm">Social</strong>
                        <span class="text-xs text-slate-400">Posteo automatizado e inmediato en las redes de comunicación interna de Kinetix.</span>
                      </div>
                    </div>
                  </div>
                </div>

                <div class="flex gap-4">
                  <button (click)="runSimulation()" class="px-5 py-2.5 rounded-full btn-purple text-xs uppercase font-extrabold tracking-wider">
                    SIMULAR MOTOR DE REGLAS
                  </button>
                  @if (simulationStatus()) {
                    <span class="text-xs text-green-400 font-bold self-center animate-pulse">{{ simulationStatus() }}</span>
                  }
                </div>
              </div>

              <!-- Animated Neon Gear / Visualization -->
              <div class="glass-panel p-6 rounded-2xl flex items-center justify-center relative overflow-hidden bg-slate-950/60 min-h-[300px]">
                <div class="absolute -right-20 -bottom-20 w-48 h-48 bg-magenta-500/5 rounded-full blur-3xl"></div>
                
                <div class="flex flex-col items-center gap-6">
                  <!-- Custom SVG rotating gears for premium visual animation -->
                  <svg class="w-40 h-40 text-green-400" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <circle cx="50" cy="50" r="30" stroke="currentColor" stroke-width="2" stroke-dasharray="10, 5" class="animate-[spin_10s_linear_infinite]" />
                    <circle cx="50" cy="50" r="20" stroke="currentColor" stroke-width="1.5" stroke-dasharray="5, 3" class="animate-[spin_6s_linear_infinite_reverse]" />
                    <g transform="translate(50, 50) rotate(0)">
                      <rect x="-4" y="-28" width="8" height="56" fill="currentColor" opacity="0.3" class="animate-[spin_8s_linear_infinite]" />
                      <rect x="-28" y="-4" width="56" height="8" fill="currentColor" opacity="0.3" class="animate-[spin_8s_linear_infinite]" />
                    </g>
                    <!-- Text elements -->
                    <text x="50" y="53" text-anchor="middle" font-size="8" fill="#fff" font-weight="bold" class="font-mono">AD ENGINE</text>
                  </svg>
                  
                  <div class="text-center font-mono text-xs text-green-400 border border-green-500/30 px-3 py-1.5 rounded-lg bg-green-950/20">
                    STATUS: LISTENING ON PORT 3000
                  </div>
                </div>
              </div>
            </div>
          </div>
        }

        <!-- ================= PAGE 4: SPACES ================= -->
        @if (activeTab() === 'spaces') {
          <div class="flex flex-col gap-6 animate-fadeIn">
            <h2 class="text-2xl font-black text-white uppercase tracking-tight">Gestión de Espacios & Incidencias</h2>
            
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
              <!-- Room details & Gallery -->
              <div class="glass-panel rounded-2xl overflow-hidden flex flex-col">
                <div class="h-64 bg-slate-900 relative">
                  <!-- Nice placeholder simulating a modern boardroom -->
                  <div class="absolute inset-0 bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1497366216548-37526070297c?auto=format&fit=crop&w=800&q=80')"></div>
                  <div class="absolute inset-0 bg-gradient-to-t from-black via-black/30 to-transparent"></div>
                  <span class="absolute bottom-4 left-4 text-xs bg-purple-600 px-3 py-1 rounded-full font-bold uppercase tracking-wider">
                    SALA DE CONFERENCIAS VIP
                  </span>
                </div>
                
                <div class="p-6 flex flex-col gap-4">
                  <h3 class="text-lg font-bold text-white">Sala London Hall — Piso 4</h3>
                  <p class="text-sm text-slate-400 leading-relaxed">
                    Equipada con pantalla interactiva 4K de 85 pulgadas, sistema de audio envolvente Jabra, conectividad inalámbrica y capacidad para 12 personas.
                  </p>
                  
                  <div class="flex gap-4 text-xs text-white/50">
                    <span>👥 Capacidad: 12 pers.</span>
                    <span>📶 Wi-Fi 6 Giga</span>
                    <span>🌡️ Termostato IoT</span>
                  </div>
                </div>
              </div>

              <!-- Booking Form -->
              <div class="glass-panel p-6 rounded-2xl flex flex-col gap-5 justify-between">
                <div class="flex flex-col gap-4">
                  <span class="text-neon-purple text-xs font-bold uppercase tracking-widest">AUTOGESTIÓN DE ALQUILER</span>
                  <h3 class="text-xl font-bold text-white">Reserva Directa de Espacios</h3>
                  <p class="text-sm text-slate-400">Reserva de salas de conferencias, oficinas temporales y puestos de trabajo con confirmación instantánea.</p>
                  
                  <div class="flex flex-col gap-4 mt-2">
                    <div class="grid grid-cols-2 gap-4">
                      <!-- Date input -->
                      <div class="flex flex-col gap-1.5">
                        <label class="text-[10px] uppercase font-bold text-slate-400 tracking-wider">Fecha</label>
                        <input type="text" value="Fecha: 15/06" class="px-4 py-2.5 rounded-full input-cyberpunk text-sm w-full" />
                      </div>
                      
                      <!-- Time input -->
                      <div class="flex flex-col gap-1.5">
                        <label class="text-[10px] uppercase font-bold text-slate-400 tracking-wider">Hora</label>
                        <input type="text" value="Hora: 09:00 AM" class="px-4 py-2.5 rounded-full input-cyberpunk text-sm w-full" />
                      </div>
                    </div>

                    <!-- Room selector -->
                    <div class="flex flex-col gap-1.5">
                      <label class="text-[10px] uppercase font-bold text-slate-400 tracking-wider">Seleccionar Sala</label>
                      <select class="px-4 py-2.5 rounded-full input-cyberpunk text-sm w-full bg-slate-900">
                        <option>Sala London Hall (Piso 4)</option>
                        <option>Sala Tokyo Lab (Piso 2)</option>
                        <option>Oficina Flexible 15B (Piso 1)</option>
                        <option>Sala New York Boardroom (Piso 5)</option>
                      </select>
                    </div>
                  </div>
                </div>

                <div class="flex flex-col gap-3">
                  <button (click)="bookSpace()" class="w-full py-2.5 rounded-full btn-purple text-xs uppercase font-extrabold tracking-wider">
                    RESERVAR ESPACIO
                  </button>
                  
                  @if (bookingSuccess()) {
                    <div class="p-3 bg-emerald-500/10 border border-emerald-500/20 text-emerald-400 rounded-xl text-xs text-center font-bold animate-fadeIn">
                      ¡Reserva confirmada con éxito! Se ha notificado a tu correo y calendario de Active Directory.
                    </div>
                  }
                </div>
              </div>
            </div>
          </div>
        }

        <!-- ================= PAGE 5: METRICS ================= -->
        @if (activeTab() === 'metrics') {
          <div class="flex flex-col gap-6 animate-fadeIn">
            <h2 class="text-2xl font-black text-white uppercase tracking-tight">Proyección de Adopción & KPIs</h2>

            <!-- Line chart & KPI -->
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
              <!-- SVG chart visualizer -->
              <div class="glass-panel p-6 rounded-2xl lg:col-span-2 flex flex-col gap-4">
                <div class="flex justify-between items-center">
                  <h3 class="text-sm font-bold uppercase tracking-widest text-slate-400">Proyección de Adopción Kinetix</h3>
                  <span class="text-xs text-emerald-400 font-bold bg-emerald-500/10 px-2.5 py-0.5 rounded-full">ROI +85%</span>
                </div>
                
                <p class="text-xs text-slate-400">Crecimiento exponencial de interacciones tras la implementación del diseño UI/UX renovado.</p>
                
                <!-- Pure SVG chart to avoid requiring Chart.js libraries and guarantee pixel perfection -->
                <div class="w-full h-48 mt-2">
                  <svg class="w-full h-full" viewBox="0 0 500 200" preserveAspectRatio="none">
                    <defs>
                      <linearGradient id="chartGrad" x1="0" y1="0" x2="0" y2="1">
                        <stop offset="0%" stop-color="#00f2fe" stop-opacity="0.3"/>
                        <stop offset="100%" stop-color="#00f2fe" stop-opacity="0.0"/>
                      </linearGradient>
                    </defs>
                    <!-- Grid Lines -->
                    <line x1="50" y1="150" x2="480" y2="150" stroke="rgba(255,255,255,0.05)" stroke-width="1" />
                    <line x1="50" y1="100" x2="480" y2="100" stroke="rgba(255,255,255,0.05)" stroke-width="1" />
                    <line x1="50" y1="50" x2="480" y2="50" stroke="rgba(255,255,255,0.05)" stroke-width="1" />
                    
                    <!-- Line Path -->
                    <path d="M 50,150 Q 150,140 250,90 T 450,40 L 450,170 L 50,170 Z" fill="url(#chartGrad)" />
                    <path d="M 50,150 Q 150,140 250,90 T 450,40" fill="none" stroke="#00f2fe" stroke-width="3" />
                    
                    <!-- Nodes -->
                    <circle cx="50" cy="150" r="4" fill="#00f2fe" />
                    <circle cx="250" cy="90" r="4" fill="#00f2fe" />
                    <circle cx="450" cy="40" r="5" fill="#f00c93" />
                    
                    <!-- Labels -->
                    <text x="50" y="165" fill="rgba(255,255,255,0.4)" font-size="9" text-anchor="middle">Q1 2026</text>
                    <text x="250" y="110" fill="rgba(255,255,255,0.4)" font-size="9" text-anchor="middle">Despliegue</text>
                    <text x="450" y="25" fill="#f00c93" font-size="10" font-weight="bold" text-anchor="middle">ROI +85%</text>
                  </svg>
                </div>
              </div>

              <!-- Speed KPI Card -->
              <div class="glass-panel p-6 rounded-2xl flex flex-col justify-between">
                <div class="flex flex-col gap-2">
                  <h3 class="text-sm font-bold uppercase tracking-widest text-slate-400">Indicadores Clave (KPIs)</h3>
                  <div class="text-5xl font-black text-neon-cyan my-3">0.4s</div>
                  <div class="text-sm font-bold text-white">Tiempo de Carga Promedio</div>
                </div>
                
                <div class="flex flex-col gap-3 mt-4">
                  <div class="text-xs text-slate-400 flex gap-2">
                    <span class="text-neon-cyan">⚡</span> Renderizado del lado del cliente altamente eficiente.
                  </div>
                  <div class="text-xs text-slate-400 flex gap-2">
                    <span class="text-neon-cyan">⚡</span> Compresión automatizada de activos de imagen.
                  </div>
                  <div class="text-xs text-slate-400 flex gap-2">
                    <span class="text-neon-cyan">⚡</span> Memoria caché distribuida para directorios AD.
                  </div>
                </div>
              </div>
            </div>

            <!-- Incident response efficiency comparison (Slide 9) -->
            <div class="glass-panel p-6 rounded-2xl flex flex-col gap-4">
              <h3 class="text-sm font-bold uppercase tracking-widest text-slate-400">Eficiencia en Resolución de Incidencias</h3>
              <p class="text-xs text-slate-400">Reducción drástica del tiempo de respuesta mediante el módulo de ticketing inteligente de Kinetix.</p>
              
              <!-- Custom styled CSS bar chart -->
              <div class="flex flex-col gap-4 mt-2">
                <!-- Kinetix V2 Bar -->
                <div class="flex flex-col md:flex-row md:items-center gap-2">
                  <span class="w-32 text-xs font-bold text-white">Kinetix V2 (Actual)</span>
                  <div class="flex-grow bg-white/5 rounded-full overflow-hidden h-7 border border-white/5 relative">
                    <div class="bg-gradient-to-r from-cyan-400 to-indigo-500 h-full rounded-full transition-all duration-1000" style="width: 26%"></div>
                    <span class="absolute right-3 top-1 text-xs font-bold text-cyan-400">12 min</span>
                  </div>
                </div>

                <!-- Industry Average Bar -->
                <div class="flex flex-col md:flex-row md:items-center gap-2">
                  <span class="w-32 text-xs font-bold text-slate-400">Promedio Industria</span>
                  <div class="flex-grow bg-white/5 rounded-full overflow-hidden h-7 border border-white/5 relative">
                    <div class="bg-slate-700 h-full rounded-full transition-all duration-1000" style="width: 55%"></div>
                    <span class="absolute right-3 top-1 text-xs font-bold text-slate-300">25 min</span>
                  </div>
                </div>

                <!-- Previous system Bar -->
                <div class="flex flex-col md:flex-row md:items-center gap-2">
                  <span class="w-32 text-xs font-bold text-slate-400">Sistema Anterior</span>
                  <div class="flex-grow bg-white/5 rounded-full overflow-hidden h-7 border border-white/5 relative">
                    <div class="bg-slate-800 h-full rounded-full transition-all duration-1000" style="width: 100%"></div>
                    <span class="absolute right-3 top-1 text-xs font-bold text-slate-400">45 min</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        }

        <!-- ================= PAGE 6: ADMIN ================= -->
        @if (activeTab() === 'admin') {
          <div class="flex flex-col gap-6 animate-fadeIn">
            <h2 class="text-2xl font-black text-white uppercase tracking-tight">Visión de Administrador</h2>

            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
              <!-- Radial/Circle visualization of status -->
              <div class="glass-panel p-6 rounded-2xl flex flex-col items-center justify-center gap-4">
                <h3 class="text-sm font-bold uppercase tracking-widest text-slate-400 self-start">Control Total</h3>
                
                <div class="relative w-40 h-40 flex items-center justify-center">
                  <!-- Custom CSS circle progress -->
                  <div class="w-full h-full rounded-full border-8 border-white/5 absolute"></div>
                  <div class="w-full h-full rounded-full border-8 border-cyan-400 border-t-transparent border-l-transparent absolute animate-[spin_4s_linear_infinite]"></div>
                  
                  <div class="flex flex-col items-center">
                    <span class="text-3xl font-black text-white">94%</span>
                    <span class="text-[9px] uppercase tracking-widest text-slate-400">ESTABILIDAD</span>
                  </div>
                </div>
                
                <span class="text-xs text-slate-400 text-center mt-2">Monitoreo activo de solicitudes y API gateways de NestJS.</span>
              </div>

              <!-- Critical Alerts & Approvals -->
              <div class="lg:col-span-2 flex flex-col gap-6">
                <!-- Critical Alerts -->
                <div class="glass-panel p-6 rounded-2xl flex flex-col gap-4 border-l-4 border-l-magenta-500">
                  <h3 class="text-sm font-bold uppercase tracking-widest text-magenta-400">Alertas Críticas</h3>
                  
                  <div class="flex flex-col gap-2">
                    <div class="flex justify-between items-center text-xs p-2.5 rounded-lg bg-magenta-500/5 border border-magenta-500/10 text-magenta-300">
                      <span>🔧 Mantenimiento de servidor de base de datos PostgreSQL</span>
                      <strong class="text-magenta-400">PENDIENTE</strong>
                    </div>
                    <div class="flex justify-between items-center text-xs p-2.5 rounded-lg bg-white/5 border border-white/5 text-slate-300">
                      <span>🔒 Expiración de secretos de Azure AD Client credentials</span>
                      <strong class="text-white/50">En 12 días</strong>
                    </div>
                  </div>
                </div>

                <!-- Approvals List -->
                <div class="glass-panel p-6 rounded-2xl flex flex-col gap-4 border-l-4 border-l-purple-500">
                  <h3 class="text-sm font-bold uppercase tracking-widest text-purple-400">Aprobaciones de Contenido</h3>
                  
                  <div class="flex flex-col gap-2">
                    <div class="flex justify-between items-center text-xs p-3 rounded-lg bg-white/5 border border-white/5">
                      <div class="flex flex-col">
                        <span class="font-bold text-white">Lanzamiento Kinetix V2 Intranet</span>
                        <span class="text-[10px] text-slate-400">Autor: Director de Tecnología (SSO AD)</span>
                      </div>
                      <button (click)="approveItem('Lanzamiento Kinetix V2')" class="px-3 py-1.5 rounded-lg bg-purple-600 text-white font-extrabold text-[10px] uppercase hover:bg-purple-500 transition">
                        Aprobar y Postear
                      </button>
                    </div>

                    <div class="flex justify-between items-center text-xs p-3 rounded-lg bg-white/5 border border-white/5">
                      <div class="flex flex-col">
                        <span class="font-bold text-white">Manual del Desarrollador Backend NestJS</span>
                        <span class="text-[10px] text-slate-400">Autor: Arquitecto Principal</span>
                      </div>
                      <button (click)="approveItem('Manual del Desarrollador')" class="px-3 py-1.5 rounded-lg bg-purple-600 text-white font-extrabold text-[10px] uppercase hover:bg-purple-500 transition">
                        Aprobar y Postear
                      </button>
                    </div>
                  </div>
                  
                  @if (approvalSuccess()) {
                    <div class="text-xs text-green-400 font-bold bg-green-500/10 border border-green-500/15 p-2 rounded-lg text-center animate-fadeIn">
                      {{ approvalSuccess() }}
                    </div>
                  }
                </div>
              </div>
            </div>
          </div>
        }

      </main>
    </div>
  `,
  styles: [`
    .animate-fadeIn {
      animation: fadeIn 0.4s ease-out forwards;
    }
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(4px); }
      to { opacity: 1; transform: translateY(0); }
    }
  `]
})
export class DashboardComponent {
  // Navigation active tab signal
  activeTab = signal<'inicio' | 'directory' | 'workflow' | 'spaces' | 'metrics' | 'admin'>('inicio');

  // Directory filter signals
  searchQuery = signal<string>('');
  selectedDept = signal<string>('ALL');

  // Booking & Simulation mock state signals
  bookingSuccess = signal<boolean>(false);
  simulationStatus = signal<string>('');
  approvalSuccess = signal<string>('');

  // Active Directory mock database of employees exactly styled as Slide 4
  employees = signal<Employee[]>([
    {
      id: 1,
      name: 'John Morton',
      role: 'UI/UX Designer',
      rating: 4.9,
      clients: 50,
      rate: 65,
      avatar: 'JM',
      tags: ['App Design', 'Web Design', 'Figma', 'Active Directory']
    },
    {
      id: 2,
      name: 'Sarah Jenkins',
      role: 'Backend NestJS Architect',
      rating: 4.8,
      clients: 42,
      rate: 75,
      avatar: 'SJ',
      tags: ['NestJS', 'PostgreSQL', 'JWT', 'Active Directory']
    },
    {
      id: 3,
      name: 'Alex Rivera',
      role: 'Senior Angular Developer',
      rating: 4.9,
      clients: 68,
      rate: 70,
      avatar: 'AR',
      tags: ['Angular 17', 'Signals', 'RxJS', 'TypeScript']
    },
    {
      id: 4,
      name: 'David Chen',
      role: 'Infrastructure Security Engineer',
      rating: 4.7,
      clients: 25,
      rate: 80,
      avatar: 'DC',
      tags: ['Azure Entra ID', 'SSO', 'Docker', 'PostgreSQL']
    }
  ]);

  // Computed signal to filter employee list reactively
  filteredEmployees = computed(() => {
    const query = this.searchQuery().toLowerCase();
    const dept = this.selectedDept();
    
    return this.employees().filter(emp => {
      // Basic text search filter
      const matchesSearch = emp.name.toLowerCase().includes(query) || 
                            emp.role.toLowerCase().includes(query) ||
                            emp.tags.some(t => t.toLowerCase().includes(query));
      
      // Basic department match
      let matchesDept = true;
      if (dept !== 'ALL') {
        if (dept === 'IT') {
          matchesDept = emp.role.includes('Backend') || emp.role.includes('Angular') || emp.role.includes('Infrastructure');
        } else if (dept === 'Diseño') {
          matchesDept = emp.role.includes('Designer') || emp.role.includes('UX');
        } else if (dept === 'Mantenimiento') {
          matchesDept = emp.role.includes('Security');
        }
      }
      
      return matchesSearch && matchesDept;
    });
  });

  setActiveTab(tab: 'inicio' | 'directory' | 'workflow' | 'spaces' | 'metrics' | 'admin') {
    this.activeTab.set(tab);
    // Reset secondary flags
    this.bookingSuccess.set(false);
    this.simulationStatus.set('');
    this.approvalSuccess.set('');
  }

  updateSearch(event: Event) {
    const value = (event.target as HTMLInputElement).value;
    this.searchQuery.set(value);
  }

  updateDept(event: Event) {
    const value = (event.target as HTMLSelectElement).value;
    this.selectedDept.set(value);
  }

  contactEmployee(name: string) {
    alert(`Iniciando canal seguro encriptado de comunicación con ${name} vía Microsoft Teams (SSO Active Directory)...`);
  }

  runSimulation() {
    this.simulationStatus.set('Procesando reglas...');
    setTimeout(() => {
      this.simulationStatus.set('Creación capturada ✓');
      setTimeout(() => {
        this.simulationStatus.set('Reglas AD aprobadas ✓');
        setTimeout(() => {
          this.simulationStatus.set('Posteo social programado ✓');
        }, 1000);
      }, 1000);
    }, 1000);
  }

  bookSpace() {
    this.bookingSuccess.set(true);
  }

  approveItem(title: string) {
    this.approvalSuccess.set(`Publicación "${title}" aprobada y publicada en redes corporativas con éxito.`);
    setTimeout(() => {
      this.approvalSuccess.set('');
    }, 4000);
  }
}
