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

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

interface UserProfile {
  name: string;
  email: string;
  role: string;
  avatar: string;
}

@Component({
  selector: 'app-dashboard',
  standalone: true,
  imports: [CommonModule],
  template: `
    <div class="flex flex-col lg:flex-row gap-4 p-2 lg:p-4 h-full overflow-y-auto">
      <!-- Sidebar Navigation Menu (Cyberpunk theme) -->
      

      <!-- Main Workstation View Area -->
      <main class="flex-grow flex flex-col gap-6">
        
        <!-- ================= PAGE 1: INICIO (CONSORCIO) ================= -->
        @if (activeTab() === 'inicio') {
          <div style="display:flex;flex-direction:column;gap:32px;" class="animate-fadeIn">

            <!-- Hero Banner -->
           

            <!-- KPI Row (light cards) -->
            <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;">

              <div style="background:#fff;border:1px solid rgba(15,13,10,0.08);border-radius:16px;padding:20px 22px;border-top:3px solid #0891B2;box-shadow:0 2px 12px rgba(8,145,178,0.12);display:flex;flex-direction:column;gap:4px;">
                <span style="font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:0.14em;color:#78716C;">Sedes Integradas</span>
                <div style="font-family:'Inter',sans-serif;font-size:30px;font-weight:900;color:#0F0D0A;line-height:1.1;">3 Sedes</div>
                <span style="font-size:10px;color:#0891B2;font-weight:700;">London · Tokyo · NY</span>
              </div>

              <div style="background:#fff;border:1px solid rgba(15,13,10,0.08);border-radius:16px;padding:20px 22px;border-top:3px solid #FD8401;box-shadow:0 2px 12px rgba(253,132,1,0.12);display:flex;flex-direction:column;gap:4px;">
                <span style="font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:0.14em;color:#78716C;">Directorio Activo</span>
                <div style="font-family:'Inter',sans-serif;font-size:30px;font-weight:900;color:#0F0D0A;line-height:1.1;">1,450+</div>
                <span style="font-size:10px;color:#EA580C;font-weight:700;">Usuarios Sincronizados</span>
              </div>

              <div style="background:#fff;border:1px solid rgba(15,13,10,0.08);border-radius:16px;padding:20px 22px;border-top:3px solid #059669;box-shadow:0 2px 12px rgba(5,150,105,0.12);display:flex;flex-direction:column;gap:4px;">
                <span style="font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:0.14em;color:#78716C;">Salas Disponibles</span>
                <div style="font-family:'Inter',sans-serif;font-size:30px;font-weight:900;color:#0F0D0A;line-height:1.1;">18 Salas</div>
                <span style="font-size:10px;color:#059669;font-weight:700;">Sistemas IoT Activos</span>
              </div>

              <div style="background:#fff;border:1px solid rgba(15,13,10,0.08);border-radius:16px;padding:20px 22px;border-top:3px solid #7C3AED;box-shadow:0 2px 12px rgba(124,58,237,0.12);display:flex;flex-direction:column;gap:4px;">
                <span style="font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:0.14em;color:#78716C;">Flujos de Trabajo</span>
                <div style="font-family:'Inter',sans-serif;font-size:30px;font-weight:900;color:#0F0D0A;line-height:1.1;">12 Activos</div>
                <span style="font-size:10px;color:#7C3AED;font-weight:700;">Reglas AD Operativas</span>
              </div>

            </div>

            <!-- Section header -->
            <div>
              <h3 style="font-family:'Inter',sans-serif;font-size:20px;font-weight:900;letter-spacing:1.5px;text-transform:uppercase;color:#0F0D0A;margin:0 0 4px;">Módulos del Sistema</h3>
              <p style="font-size:13px;color:#78716C;margin:0;font-weight:400;">Selecciona un módulo para acceder a su gestión</p>
            </div>

            <!-- 4 Jewel-Tone Blackjack Cards -->
            <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:20px;">

              <!-- Card 1: Info Hub — Teal/Cyan Gradient -->
              <div (click)="navigateToInfoHub()"
                style="position:relative;background:linear-gradient(135deg,#054D3F 0%,#059669 45%,#0891B2 100%);border:none;border-radius:20px;padding:40px 24px;cursor:pointer;display:flex;flex-direction:column;align-items:center;text-align:center;gap:22px;transition:all 0.25s cubic-bezier(0.34,1.56,0.64,1);overflow:hidden;min-height:270px;justify-content:center;box-shadow:0 12px 40px rgba(8,145,178,0.40),0 2px 8px rgba(5,150,105,0.20);">
                <div style="position:absolute;inset:10px;border:1px solid rgba(255,255,255,0.22);border-radius:12px;pointer-events:none;"></div>
                <div style="position:absolute;top:-50px;right:-50px;width:200px;height:200px;background:radial-gradient(circle,rgba(6,182,212,0.35) 0%,transparent 65%);pointer-events:none;"></div>
                <div style="position:absolute;bottom:-30px;left:-30px;width:140px;height:140px;background:radial-gradient(circle,rgba(52,211,153,0.25) 0%,transparent 65%);pointer-events:none;"></div>
                <svg width="48" height="48" viewBox="0 0 48 48" fill="none" style="position:relative;z-index:1;filter:drop-shadow(0 0 24px rgba(6,182,212,0.70));">
                  <path d="M24 6L42 15L24 24L6 15L24 6Z" stroke="#FFFFFF" stroke-width="2.5" stroke-linejoin="round"/>
                  <path d="M6 24L24 33L42 24" stroke="#FFFFFF" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
                  <path d="M6 33L24 42L42 33" stroke="#FFFFFF" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
                <div style="position:relative;z-index:1;display:flex;flex-direction:column;gap:8px;">
                  <h4 style="font-family:'Inter',sans-serif;font-size:12px;font-weight:900;letter-spacing:0.16em;text-transform:uppercase;color:#FFFFFF;margin:0;">Info Hub</h4>
                  <p style="font-size:12px;color:rgba(255,255,255,0.88);line-height:1.65;margin:0;font-weight:400;">Gestión de contenidos corporativos y publicación de artículos.</p>
                </div>
              </div>

              <!-- Card 2: Directorio — Wave Orange Gradient -->
              <div (click)="navigateToDirectorio()"
                style="position:relative;background:linear-gradient(135deg,#92400E 0%,#EA580C 45%,#FD8401 100%);border:none;border-radius:20px;padding:40px 24px;cursor:pointer;display:flex;flex-direction:column;align-items:center;text-align:center;gap:22px;transition:all 0.25s cubic-bezier(0.34,1.56,0.64,1);overflow:hidden;min-height:270px;justify-content:center;box-shadow:0 12px 40px rgba(253,132,1,0.45),0 2px 8px rgba(234,88,12,0.20);">
                <div style="position:absolute;inset:10px;border:1px solid rgba(255,255,255,0.22);border-radius:12px;pointer-events:none;"></div>
                <div style="position:absolute;top:-50px;left:-50px;width:200px;height:200px;background:radial-gradient(circle,rgba(251,191,36,0.30) 0%,transparent 65%);pointer-events:none;"></div>
                <div style="position:absolute;bottom:-30px;right:-30px;width:140px;height:140px;background:radial-gradient(circle,rgba(253,186,116,0.25) 0%,transparent 65%);pointer-events:none;"></div>
                <svg width="48" height="48" viewBox="0 0 48 48" fill="none" style="position:relative;z-index:1;filter:drop-shadow(0 0 24px rgba(251,191,36,0.65));">
                  <path d="M8 16V8H16" stroke="#FFFFFF" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
                  <path d="M40 16V8H32" stroke="#FFFFFF" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
                  <path d="M8 32V40H16" stroke="#FFFFFF" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
                  <path d="M40 32V40H32" stroke="#FFFFFF" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
                  <circle cx="18" cy="22" r="4" stroke="#FFFFFF" stroke-width="2"/>
                  <circle cx="30" cy="22" r="4" stroke="#FFFFFF" stroke-width="2"/>
                  <path d="M11 33c0-3.866 3.134-7 7-7s7 3.134 7 7" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"/>
                  <path d="M23 33c0-3.866 3.134-7 7-7s7 3.134 7 7" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"/>
                </svg>
                <div style="position:relative;z-index:1;display:flex;flex-direction:column;gap:8px;">
                  <h4 style="font-family:'Inter',sans-serif;font-size:12px;font-weight:900;letter-spacing:0.16em;text-transform:uppercase;color:#FFFFFF;margin:0;">Directorio AD</h4>
                  <p style="font-size:12px;color:rgba(255,255,255,0.88);line-height:1.65;margin:0;font-weight:400;">Sincronización con Active Directory y perfiles dinámicos.</p>
                </div>
              </div>

              <!-- Card 3: Workflows — Deep Violet Gradient -->
              <div (click)="navigateToWorkflows()"
                style="position:relative;background:linear-gradient(135deg,#2E1065 0%,#5B21B6 45%,#7C3AED 100%);border:none;border-radius:20px;padding:40px 24px;cursor:pointer;display:flex;flex-direction:column;align-items:center;text-align:center;gap:22px;transition:all 0.25s cubic-bezier(0.34,1.56,0.64,1);overflow:hidden;min-height:270px;justify-content:center;box-shadow:0 12px 40px rgba(124,58,237,0.45),0 2px 8px rgba(91,33,182,0.25);">
                <div style="position:absolute;inset:10px;border:1px solid rgba(255,255,255,0.22);border-radius:12px;pointer-events:none;"></div>
                <div style="position:absolute;bottom:-50px;right:-50px;width:200px;height:200px;background:radial-gradient(circle,rgba(167,139,250,0.30) 0%,transparent 65%);pointer-events:none;"></div>
                <div style="position:absolute;top:-30px;left:-30px;width:140px;height:140px;background:radial-gradient(circle,rgba(196,181,253,0.20) 0%,transparent 65%);pointer-events:none;"></div>
                <svg width="48" height="48" viewBox="0 0 48 48" fill="none" style="position:relative;z-index:1;filter:drop-shadow(0 0 24px rgba(167,139,250,0.70));">
                  <circle cx="10" cy="12" r="5" stroke="#FFFFFF" stroke-width="2.5"/>
                  <circle cx="38" cy="12" r="5" stroke="#FFFFFF" stroke-width="2.5"/>
                  <circle cx="24" cy="36" r="5" stroke="#FFFFFF" stroke-width="2.5"/>
                  <path d="M15 12H33" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"/>
                  <path d="M10 17V28c0 2.5 2 4.5 4.5 4.5H19" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"/>
                  <path d="M38 17V28c0 2.5-2 4.5-4.5 4.5H29" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"/>
                </svg>
                <div style="position:relative;z-index:1;display:flex;flex-direction:column;gap:8px;">
                  <h4 style="font-family:'Inter',sans-serif;font-size:12px;font-weight:900;letter-spacing:0.16em;text-transform:uppercase;color:#FFFFFF;margin:0;">Workflows</h4>
                  <p style="font-size:12px;color:rgba(255,255,255,0.88);line-height:1.65;margin:0;font-weight:400;">Líneas de aprobación, revisión y publicación de contenido.</p>
                </div>
              </div>

              <!-- Card 4: Espacios — Electric Blue Gradient -->
              <div (click)="navigateToCalendario()"
                style="position:relative;background:linear-gradient(135deg,#1E3A8A 0%,#1D4ED8 45%,#3B82F6 100%);border:none;border-radius:20px;padding:40px 24px;cursor:pointer;display:flex;flex-direction:column;align-items:center;text-align:center;gap:22px;transition:all 0.25s cubic-bezier(0.34,1.56,0.64,1);overflow:hidden;min-height:270px;justify-content:center;box-shadow:0 12px 40px rgba(29,78,216,0.45),0 2px 8px rgba(30,58,138,0.25);">
                <div style="position:absolute;inset:10px;border:1px solid rgba(255,255,255,0.22);border-radius:12px;pointer-events:none;"></div>
                <div style="position:absolute;top:-50px;left:-50px;width:200px;height:200px;background:radial-gradient(circle,rgba(96,165,250,0.30) 0%,transparent 65%);pointer-events:none;"></div>
                <div style="position:absolute;bottom:-30px;right:-30px;width:140px;height:140px;background:radial-gradient(circle,rgba(147,197,253,0.20) 0%,transparent 65%);pointer-events:none;"></div>
                <svg width="48" height="48" viewBox="0 0 48 48" fill="none" style="position:relative;z-index:1;filter:drop-shadow(0 0 24px rgba(96,165,250,0.70));">
                  <rect x="6" y="10" width="36" height="32" rx="4" stroke="#FFFFFF" stroke-width="2.5"/>
                  <path d="M6 20H42" stroke="#FFFFFF" stroke-width="2.5" stroke-linecap="round"/>
                  <path d="M16 6V14" stroke="#FFFFFF" stroke-width="2.5" stroke-linecap="round"/>
                  <path d="M32 6V14" stroke="#FFFFFF" stroke-width="2.5" stroke-linecap="round"/>
                  <path d="M17 31L22 36L32 26" stroke="#FFFFFF" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
                <div style="position:relative;z-index:1;display:flex;flex-direction:column;gap:8px;">
                  <h4 style="font-family:'Inter',sans-serif;font-size:12px;font-weight:900;letter-spacing:0.16em;text-transform:uppercase;color:#FFFFFF;margin:0;">Espacios</h4>
                  <p style="font-size:12px;color:rgba(255,255,255,0.88);line-height:1.65;margin:0;font-weight:400;">Autogestión de salas, oficinas y activos de la empresa.</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 App.</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 App</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 App.</p>
              
              <!-- Custom styled CSS bar chart -->
              <div class="flex flex-col gap-4 mt-2">
                <!-- App 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">App 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 App V2 Intranet</span>
                        <span class="text-[10px] text-slate-400">Autor: Director de Tecnología (SSO AD)</span>
                      </div>
                      <button (click)="approveItem('Lanzamiento App 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>
        }
      <aside class="w-full lg:w-64 flex flex-col gap-3">
        <!-- Active User Profile Widget Sincronizado con Active Directory -->
        <div class="glass-panel p-4 rounded-2xl flex flex-col gap-3 relative border-cyan-500/20 bg-slate-950/45">
        <div class="flex justify-between items-center">
            <span class="text-white/50"></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> 
            </span>
          </div>
          <div class="w-full py-1.5 rounded-xl border border-white/10 hover:border-magenta-500/30 hover:bg-magenta-950/20 text-white/60 hover:text-magenta-400 font-extrabold text-[10px] uppercase tracking-wider transition-all mt-1">
            
          </div>
        </div>

   
      </aside>
      
      
      
     <div class="absolute -right-2 -top-2 w-8 h-8 bg-cyan-500/10 rounded-full blur-md">
          <button (click)="logout()" class="w-full py-1.5 rounded-xl border border-white/10 hover:border-magenta-500/30 hover:bg-magenta-950/20 text-white/60 hover:text-magenta-400 font-extrabold text-[10px] uppercase tracking-wider transition-all mt-1">
            Cerrar Sesión
          </button>
        </div>
      </main>
    </div>
  `,
  styles: [`
    :host {
      display: flex;
      flex-direction: column;
      flex: 1;
      min-height: 0;
      height: 100%;
    }
    .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 implements OnInit {
  private router = inject(Router);

  // 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>('');

  // Sincronized Active Directory Active Profile signal
  currentUser = signal<UserProfile>({
    name: 'Invitado',
    email: 'guest@App.com',
    role: 'Employee',
    avatar: 'G'
  });

  // 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;
    });
  });

  ngOnInit() {
    // Load Active Directory profile from local storage
    const userStr = localStorage.getItem('App_user');
    if (userStr) {
      try {
        const user = JSON.parse(userStr);
        this.currentUser.set(user);
      } catch (e) {
        console.error('Error parsing user profile from local storage', e);
      }
    }
  }

  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);
  }

  navigateToCalendario(): void {
    this.router.navigate(['/reservas/calendario']);
  }

  navigateToDirectorio(): void {
    this.router.navigate(['/directorio']);
  }

  navigateToInfoHub(): void {
    this.router.navigate(['/info-hub']);
  }

  navigateToWorkflows(): void {
    this.router.navigate(['/workflows']);
  }

  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);
  }

  logout() {
    localStorage.removeItem('App_token');
    localStorage.removeItem('App_user');
    this.router.navigate(['/login']);
  }
}
