// Stack Principal
Next.js 15.2          // Framework React con SSR/SSG
React 19              // Biblioteca de interfaz de usuario
TypeScript 5.x        // Lenguaje tipado
Tailwind CSS 3.x      // Framework CSS utility-first

// Componentes y Diseño
Radix UI              // Componentes accesibles
Shadcn/ui             // Sistema de diseño moderno
Lucide React          // Iconografía
Framer Motion         // Animaciones (opcional)
React Hook Form       // Gestión de formularios

// Servidor y API
Node.js               // Runtime de JavaScript
Express.js            // Framework web
Apollo Server         // Servidor GraphQL
Prisma ORM            // Object-Relational Mapping
MySQL                 // Base de datos

// Seguridad
JWT                   // JSON Web Tokens
bcryptjs              // Hash de contraseñas
CORS                  // Cross-Origin Resource Sharing
Helmet                // Seguridad HTTP

// Observabilidad
Sentry                // Monitoreo de errores
Winston               // Logging
Prometheus            // Métricas (opcional)

// Convenciones de código
- PascalCase para componentes
- camelCase para funciones y variables
- kebab-case para archivos
- UPPER_CASE para constantes

// Estructura de componentes
export default function ComponentName() {
  // Hooks
  // State
  // Effects
  // Handlers
  // Render
}

// Componentes base disponibles
Button, Input, Card, Modal, Dropdown, Tabs,
Table, Form, Alert, Toast, Spinner, Avatar,
Badge, Tooltip, Popover, Accordion, etc.

// Login
EnterpriseLogin         // Componente principal de login
LoginForm              // Formulario de autenticación
ForgotPasswordForm     // Recuperación de contraseña

// Dashboard
Dashboard              // Dashboard principal
ApplicationCard        // Tarjeta de aplicación
FavoriteApps          // Aplicaciones favoritas
SearchBar             // Barra de búsqueda
WelcomeSection        // Sección de bienvenida

// Layout
ProtectedRoute        // Rutas protegidas
MobileSidebar        // Sidebar móvil
DesktopSidebar       // Sidebar desktop

// Autenticación
useAuth()             // Gestión de autenticación
useLoginForm()        // Lógica de formulario de login

// Aplicaciones
useApplications()     // Gestión de aplicaciones
useDashboard()        // Lógica del dashboard

// UI
useToast()            // Notificaciones toast
useMobile()           // Detección de dispositivo móvil

// Base de Datos SSO (Prisma + MySQL)
Usuario SSO {
  id: UUID
  username: string
  externalId: number  // 🔗 Vincula con base externa
  password: hash      // 🔐 bcrypt para SSO
  sesiones: Session[]
  aplicaciones: UserApplication[]
  permisos: UserPermission[]
}

// Base de Datos Externa (Django + MySQL)
Usuario Django {
  id: number
  username: string
  password: string    // 🔐 PBKDF2-SHA256 Django
  first_name: string
  last_name: string
  is_active: boolean
}

// Token JWT Principal (Login)
{
  userId: "uuid",
  username: "usuario",
  sessionId: "session-uuid",
  exp: timestamp + 24h
}

// Token SSO Específico (Por Aplicación)
{
  userId: "uuid",
  username: "usuario", 
  application: "carrotaller",
  firstName: "Nombre",
  lastName: "Apellido",
  email: "[email protected]",
  iat: timestamp,
  exp: timestamp + 1h  // ⏰ Expira en 1 hora
}

// Intentos de Login
LoginAttempt {
  username: string
  success: boolean
  reason?: string      // Motivo del fallo
  ipAddress: string
  userAgent: string
  timestamp: DateTime
}

// Sesiones Activas  
Session {
  token: string
  userId: string
  ipAddress: string
  userAgent: string
  isActive: boolean
  lastActivity: DateTime
  expiresAt: DateTime
}

// Accesos a Aplicaciones
UserApplication {
  userId: string
  applicationId: string
  lastAccessed: DateTime
  accessCount: number   // 📊 Contador de accesos
  isFavorite: boolean
}

// Aplicaciones Configuradas
const EXTERNAL_APPS = {
  carrotaller: {
    name: 'Carrotaller',
    authUrl: 'https://carrotaller.sao6.com.co/auth/',
    appUrl: 'https://carrotaller.sao6.com.co/dashboard',
    method: 'POST'
  },
  inspecciones: {
    name: 'Inspecciones', 
    authUrl: 'https://inspecciones.sao6.com.co/auth/',
    appUrl: 'https://inspecciones.sao6.com.co/formulario',
    method: 'POST'
  },
  activos: {
    name: 'Control de Activos',
    authUrl: 'https://activos.sao6.com.co/auth/',
    appUrl: 'https://activos.sao6.com.co/dashboard', 
    method: 'POST'
  }
}

// 1. Usuario hace clic en aplicación
onClick(applicationId) {
  trackApplicationAccess(applicationId)  // 📊 Registrar acceso
  
  // 2. Frontend solicita autenticación externa
  fetch('/api/external-auth', {
    method: 'POST',
    headers: { 'Authorization': `Bearer ${jwt_token}` },
    body: { application: 'carrotaller' }
  })
  
  // 3. Backend genera token SSO específico
  const ssoToken = jwt.sign({
    userId, username, email, firstName, lastName,
    application: 'carrotaller',
    exp: Date.now() + 3600000  // 1 hora
  }, SSO_SECRET)
  
  // 4. URL de redirección con token
  const redirectUrl = `${appUrl}?sso_token=${ssoToken}`
  
  // 5. Aplicación externa valida token y autentica
  window.open(redirectUrl, '_blank')
}

// Consultas GraphQL para Trazabilidad
query DashboardStats {
  dashboardStats {
    totalUsers
    activeUsers        // 👥 Usuarios con sesiones activas
    totalApplications
    totalSessions      // 🔗 Sesiones concurrentes
  }
  
  loginAttempts(take: 10) {
    username
    success
    reason           // 📝 Motivo de fallo
    ipAddress
    createdAt
  }
  
  activeSessions {
    user { username }
    ipAddress
    userAgent
    lastActivity     // ⏰ Última actividad
    expiresAt
  }
}

// Resolver para auditoría detallada
user(id: "user-uuid") {
  username
  isActive
  lastLogin: sessions(orderBy: { createdAt: desc }, take: 1) {
    createdAt
    ipAddress
  }
  
  applications {
    application { name }
    lastAccessed     // 🕐 Último acceso
    accessCount      // 📊 Total de accesos
    isFavorite
  }
  
  loginAttempts(take: 5) {
    success
    reason
    createdAt
    ipAddress
  }
}

// Validación estricta en login
if (!externalUser) {
  throw new Error('Credenciales inválidas')
}

if (!ssoUser) {
  throw new Error('Usuario no registrado en SSO')
}

if (ssoUser.externalId !== externalUser.id) {
  throw new Error('Error de sincronización')
}

// Token SSO con expiración corta
const ssoToken = jwt.sign(payload, secret, {
  algorithm: 'HS256',
  expiresIn: '1h'  // ⏰ Expira en 1 hora
})

// Autenticación
✅ JWT con expiración
✅ Hash de contraseñas con bcrypt
✅ Validación de tokens
✅ Sesiones seguras

// Autorización
✅ Control de acceso basado en roles
✅ Permisos granulares
✅ Validación de recursos

// Protección
✅ CORS configurado
✅ Helmet para headers de seguridad
✅ Validación de entrada
✅ Sanitización de datos

// Roles disponibles
USER          // Usuario estándar
ADMIN         // Administrador
SUPER_ADMIN   // Súper administrador

// Permisos
- Acceso a aplicaciones
- Gestión de usuarios
- Configuración del sistema
- Auditoría y logs

// Métricas de Negocio
interface BusinessMetrics {
  usuariosActivos: number        // 👥 Usuarios únicos por día
  sesionesSimultaneas: number    // 🔗 Sesiones concurrentes
  aplicacionesPopulares: {       // 📈 Top aplicaciones
    nombre: string
    accesos: number
    usuariosUnicos: number
  }[]
  tiempoPromedioBusqueda: number // ⏱️ Tiempo en encontrar apps
  tasaExitoSSO: number          // ✅ % éxito autenticación SSO
}

// Métricas de Rendimiento  
interface PerformanceMetrics {
  tiempoRespuestaLogin: number   // ⚡ Tiempo autenticación
  tiempoGeneracionToken: number  // 🔑 Tiempo crear token SSO
  errorRate: number             // ❌ Tasa de errores
  disponibilidadSistema: number // 🟢 Uptime %
}

// Alertas Configuradas
const ALERTAS = {
  autenticacion: {
    fallosConsecutivos: 5,      // 🚨 5+ fallos seguidos
    tiempoRespuesta: 3000,      // ⏰ >3s login
    sesionesExpiradas: 100      // 💾 Muchas sesiones exp.
  },
  sistema: {
    errorRate: 0.05,           // 🔴 >5% errores
    memoryUsage: 0.85,         // 💾 >85% memoria
    diskSpace: 0.90            // 💿 >90% disco
  }
}

// Notificaciones
- 📧 Email para administradores
- 💬 Slack/Teams integración  
- 📱 Push notifications
- 🔔 Dashboard visual alerts

// Login Events
{
  eventType: 'LOGIN_ATTEMPT',
  timestamp: '2024-01-15T10:30:00Z',
  userId: 'user-uuid', 
  username: 'juan.perez',
  success: true,
  ip: '192.168.1.100',
  userAgent: 'Mozilla/5.0...',
  location: 'Bogotá, Colombia',
  authMethod: 'SSO_DUAL'
}

// Application Access
{
  eventType: 'APP_ACCESS',
  timestamp: '2024-01-15T10:35:00Z',
  userId: 'user-uuid',
  applicationId: 'carrotaller-id',
  applicationName: 'Carrotaller',
  accessMethod: 'SSO_TOKEN',
  tokenExpiry: '2024-01-15T11:35:00Z',
  redirectUrl: 'https://carrotaller.sao6.com.co/...'
}

// System Events  
{
  eventType: 'TOKEN_GENERATED',
  timestamp: '2024-01-15T10:35:00Z',
  tokenType: 'SSO_SPECIFIC',
  application: 'carrotaller',
  userId: 'user-uuid',
  expiresIn: 3600,
  generationTime: 45 // ms
}

// Seguimiento completo por transacción
interface TransactionTrace {
  traceId: string              // 🆔 ID único de transacción
  events: [
    {
      timestamp: DateTime
      service: 'frontend' | 'graphql' | 'database'
      operation: string
      duration: number         // ⏱️ Tiempo en ms
      status: 'success' | 'error'
      metadata: object
    }
  ]
}

// Ejemplo de trace completo
{
  traceId: 'trace-12345',
  userId: 'user-uuid',
  events: [
    { service: 'frontend', operation: 'login_submit', duration: 5 },
    { service: 'graphql', operation: 'validate_credentials', duration: 250 },
    { service: 'database', operation: 'query_external_user', duration: 45 },
    { service: 'database', operation: 'query_sso_user', duration: 30 },
    { service: 'graphql', operation: 'generate_jwt', duration: 15 },
    { service: 'frontend', operation: 'redirect_dashboard', duration: 10 }
  ],
  totalDuration: 355,
  status: 'success'
}

// Consultas de diagnóstico
query TroubleshootUser($username: String!) {
  user: userByUsername(username: $username) {
    id
    isActive
    externalId
    
    # Última actividad
    sessions(orderBy: { lastActivity: desc }, take: 1) {
      lastActivity
      isActive
      expiresAt
      ipAddress
    }
    
    # Intentos recientes
    loginAttempts(take: 10, orderBy: { createdAt: desc }) {
      success
      reason
      createdAt
      ipAddress
      userAgent
    }
    
    # Aplicaciones y accesos
    applications {
      application { name, isActive }
      lastAccessed
      accessCount
    }
  }
  
  # Verificar sincronización
  externalUserSync: verifyUserSync(username: $username) {
    inSync
    ssoExists
    externalExists
    details
  }
}

// Sentry - Monitoreo de Errores
Sentry.init({
  dsn: process.env.SENTRY_DSN,
  environment: process.env.NODE_ENV,
  beforeSend(event) {
    // Filtrar información sensible
    if (event.request?.data?.password) {
      event.request.data.password = '[Filtered]'
    }
    return event
  }
})

// Métricas personalizadas
const metrics = {
  ssoTokenGenerated: () => {
    // Incrementar contador
    prometheus.ssoTokensTotal.inc()
  },
  
  loginAttempt: (success: boolean) => {
    prometheus.loginAttemptsTotal.labels({ 
      success: success.toString() 
    }).inc()
  },
  
  appAccess: (appName: string) => {
    prometheus.appAccessTotal.labels({ 
      application: appName 
    }).inc()
  }
}

// backend/src/config/redis.ts
import Redis from 'ioredis'

const redis = new Redis({
  host: process.env.REDIS_HOST || 'localhost',
  port: parseInt(process.env.REDIS_PORT || '6379'),
  password: process.env.REDIS_PASSWORD,
  retryDelayOnFailover: 100,
  enableReadyCheck: false,
  maxRetriesPerRequest: null,
})

// Cache para sesiones
export const cacheSession = async (sessionId: string, data: any) => {
  await redis.setex(
    `session:${sessionId}`, 
    86400, // 24 horas
    JSON.stringify(data)
  )
}

export const getSession = async (sessionId: string) => {
  const data = await redis.get(`session:${sessionId}`)
  return data ? JSON.parse(data) : null
}

// next.config.mjs
/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    appDir: true,
  },
  
  // ISR para páginas estáticas
  async rewrites() {
    return [
      {
        source: '/api/graphql',
        destination: `${process.env.BACKEND_URL}/graphql`,
      },
    ]
  },
  
  // Headers de seguridad
  async headers() {
    return [
      {
        source: '/(.*)',
        headers: [
          {
            key: 'X-Frame-Options',
            value: 'DENY',
          },
          {
            key: 'X-Content-Type-Options',
            value: 'nosniff',
          },
          {
            key: 'Referrer-Policy',
            value: 'strict-origin-when-cross-origin',
          },
        ],
      },
    ]
  },
}

export default nextConfig

// tests/integration/auth-flow.test.ts
import { test, expect } from '@playwright/test'

test.describe('SSO Authentication Flow', () => {
  test('complete login to external app flow', async ({ page }) => {
    // 1. Login al portal SSO
    await page.goto('http://localhost:3000/login')
    await page.fill('[name="username"]', 'testuser')
    await page.fill('[name="password"]', 'testpass')
    await page.click('button[type="submit"]')
    
    // 2. Verificar dashboard
    await expect(page).toHaveURL('/dashboard')
    await expect(page.locator('h1')).toContainText('Dashboard')
    
    // 3. Hacer clic en aplicación externa
    await page.click('[data-testid="app-carrotaller"]')
    
    // 4. Verificar redirección SSO
    await expect(page).toHaveURL(/carrotaller\.sao6\.com\.co/)
    
    // 5. Verificar que no pide login nuevamente
    await expect(page.locator('body')).not.toContainText('Login')
  })
})

// tests/load/auth-load.test.ts
import { check } from 'k6'
import http from 'k6/http'

export let options = {
  stages: [
    { duration: '2m', target: 100 }, // Subir a 100 usuarios
    { duration: '5m', target: 100 }, // Mantener 100 usuarios
    { duration: '2m', target: 200 }, // Subir a 200 usuarios
    { duration: '5m', target: 200 }, // Mantener 200 usuarios
    { duration: '2m', target: 0 },   // Bajar a 0
  ],
  thresholds: {
    http_req_duration: ['p(95)<2000'], // 95% under 2s
    http_req_failed: ['rate<0.1'],     // Error rate under 10%
  },
}

const BASE_URL = 'http://localhost:4000'

export default function () {
  // Test login endpoint
  const loginResponse = http.post(`${BASE_URL}/graphql`, 
    JSON.stringify({
      query: `
        mutation {
          login(input: { username: "testuser", password: "testpass" }) {
            token
            user { id username }
          }
        }
      `
    }),
    {
      headers: { 'Content-Type': 'application/json' },
    }
  )
  
  check(loginResponse, {
    'login status is 200': (r) => r.status === 200,
    'login response time < 1s': (r) => r.timings.duration < 1000,
    'token received': (r) => JSON.parse(r.body).data.login.token.length > 0,
  })
}