<template>
    <div class="p-5 bg-slate-50 min-h-screen">
      <!-- Header -->
      <div class="mb-5 flex items-center justify-between">
        <h2 class="text-2xl font-semibold text-slate-800 m-0">Calendario de Cursos Programados</h2>
        
        <!-- Estadísticas del mes actual -->
        <div class="flex items-center gap-4 text-sm">
          <div class="flex items-center gap-2">
            <div class="w-3 h-3 bg-blue-500 rounded"></div>
            <span class="text-slate-600">{{ getCurrentMonthInfo.totalCursos }} Cursos</span>
          </div>
          <div class="flex items-center gap-2">
            <div class="w-3 h-3 bg-red-500 rounded"></div>
            <span class="text-slate-600">{{ getCurrentMonthInfo.totalExamenes }} Exámenes</span>
          </div>
        </div>
      </div>
  
      <!-- Calendar Container -->
      <div class="bg-white rounded-lg shadow-sm overflow-hidden">
        <!-- Header personalizado -->
        <div class="flex items-center justify-between px-5 py-4 bg-white border-b border-slate-200">
          <div class="flex items-center gap-4">
            <span class="text-sm text-slate-500 font-medium">Vista Mensual</span>
          </div>
          
          <div class="flex items-center gap-4">
            <!-- Navegación del mes -->
            <div class="flex items-center gap-2">
              <button @click="previousMonth" class="p-1 hover:bg-slate-100 rounded">
                <svg class="w-5 h-5 text-slate-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
                </svg>
              </button>
              
              <h3 class="text-lg font-semibold text-slate-800 min-w-[140px] text-center">
                {{ formatMonth(selectedDate) }}
              </h3>
              
              <button @click="nextMonth" class="p-1 hover:bg-slate-100 rounded">
                <svg class="w-5 h-5 text-slate-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                </svg>
              </button>
            </div>
            
            <!-- Botones de vista -->
            <div class="flex gap-1 bg-slate-100 p-1 rounded-md">
              <button class="px-3 py-1 text-xs font-medium rounded bg-slate-800 text-white transition-all">month</button>
              <button class="px-3 py-1 text-xs font-medium rounded text-slate-500 hover:bg-slate-200 transition-all">week</button>
              <button class="px-3 py-1 text-xs font-medium rounded text-slate-500 hover:bg-slate-200 transition-all">list</button>
            </div>
          </div>
        </div>
  
        <VCalendar 
          :key="calendarKey"
          v-model="selectedDate"
          :attributes="attributes"
          :locale="locale"
          view="monthly"
          expanded
          borderless
          :title-position="'none'"
          class="custom-calendar"
        />
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref, computed } from 'vue'
  
  // Fecha seleccionada
  const selectedDate = ref(new Date(2025, 8, 1)) // Septiembre 1, 2025
  
  // Key para forzar re-render del calendario
  const calendarKey = ref(0)
  
  // Configuración de idioma
  const locale = {
    id: 'es',
    firstDayOfWeek: 1, // Lunes como primer día
    masks: {
      weekdays: 'WWW',
      months: 'MMMM',
      title: 'MMMM YYYY'
    }
  }
  
  // Datos de los cursos programados por mes
  const cursosData = {
    // Septiembre 2025
    '2025-09': [
      {
        id: 1,
        title: 'Curso React (A. García, C. Mendoza)',
        instructor: 'A. García, C. Mendoza',
        dates: [new Date(2025, 8, 5), new Date(2025, 8, 7)], // 5 y 7 de septiembre
        color: 'blue',
        tipo: 'curso'
      },
      {
        id: 2,
        title: 'EXAMEN: React',
        dates: [new Date(2025, 8, 9)], // 9 de septiembre
        color: 'red',
        tipo: 'examen'
      },
      {
        id: 3,
        title: 'Curso CEH (P. Ramírez, L. Torres)',
        instructor: 'P. Ramírez, L. Torres',
        dates: [new Date(2025, 8, 17), new Date(2025, 8, 21)], // 17 y 21 de septiembre
        color: 'green',
        tipo: 'curso'
      },
      {
        id: 4,
        title: 'Curso Python (S. Hernández)',
        instructor: 'S. Hernández',
        dates: [new Date(2025, 8, 18)], // 18 de septiembre
        color: 'orange',
        tipo: 'curso'
      },
      {
        id: 5,
        title: 'Curso AWS (L. Martínez)',
        instructor: 'L. Martínez',
        dates: [new Date(2025, 8, 19), new Date(2025, 8, 21)], // 19 y 21 de septiembre
        color: 'purple',
        tipo: 'curso'
      },
      {
        id: 6,
        title: 'EXAMEN: CEH',
        dates: [new Date(2025, 8, 24)], // 24 de septiembre
        color: 'red',
        tipo: 'examen'
      }
    ],
    
    // Octubre 2025 - Cursos de ejemplo
    '2025-10': [
      {
        id: 7,
        title: 'Curso Vue.js (M. López, R. Silva)',
        instructor: 'M. López, R. Silva',
        dates: [new Date(2025, 9, 3), new Date(2025, 9, 5)], // 3 y 5 de octubre
        color: 'green',
        tipo: 'curso'
      },
      {
        id: 8,
        title: 'EXAMEN: Vue.js',
        dates: [new Date(2025, 9, 10)], // 10 de octubre
        color: 'red',
        tipo: 'examen'
      },
      {
        id: 9,
        title: 'Curso Docker (J. Rodríguez)',
        instructor: 'J. Rodríguez',
        dates: [new Date(2025, 9, 15), new Date(2025, 9, 17), new Date(2025, 9, 19)], // 15, 17 y 19 de octubre
        color: 'blue',
        tipo: 'curso'
      },
      {
        id: 10,
        title: 'Curso Kubernetes (A. Morales)',
        instructor: 'A. Morales',
        dates: [new Date(2025, 9, 22), new Date(2025, 9, 24)], // 22 y 24 de octubre
        color: 'purple',
        tipo: 'curso'
      },
      {
        id: 11,
        title: 'EXAMEN: DevOps',
        dates: [new Date(2025, 9, 29)], // 29 de octubre
        color: 'red',
        tipo: 'examen'
      }
    ],
  
    // Agosto 2025 - Cursos de ejemplo
    '2025-08': [
      {
        id: 12,
        title: 'Curso Angular (P. Fernández)',
        instructor: 'P. Fernández',
        dates: [new Date(2025, 7, 5), new Date(2025, 7, 7), new Date(2025, 7, 9)], // 5, 7 y 9 de agosto
        color: 'red',
        tipo: 'curso'
      },
      {
        id: 13,
        title: 'Curso Node.js (C. García)',
        instructor: 'C. García',
        dates: [new Date(2025, 7, 12), new Date(2025, 7, 14)], // 12 y 14 de agosto
        color: 'green',
        tipo: 'curso'
      },
      {
        id: 14,
        title: 'EXAMEN: Full Stack',
        dates: [new Date(2025, 7, 20)], // 20 de agosto
        color: 'red',
        tipo: 'examen'
      },
      {
        id: 15,
        title: 'Curso MongoDB (L. Torres)',
        instructor: 'L. Torres',
        dates: [new Date(2025, 7, 26), new Date(2025, 7, 28)], // 26 y 28 de agosto
        color: 'orange',
        tipo: 'curso'
      }
    ]
  }
  
  // Convertir datos a atributos de v-calendar
  const attributes = computed(() => {
    const currentMonthKey = `${selectedDate.value.getFullYear()}-${String(selectedDate.value.getMonth() + 1).padStart(2, '0')}`
    const currentMonthCursos = cursosData[currentMonthKey] || []
    
    const attrs = []
    
    currentMonthCursos.forEach(curso => {
      curso.dates.forEach(date => {
        attrs.push({
          key: `${curso.id}-${date.getTime()}`,
          dot: false,
          bar: {
            style: {
              backgroundColor: getColorCode(curso.color),
              height: '4px'
            }
          },
          popover: {
            label: curso.title,
            visibility: 'hover'
          },
          customData: {
            title: curso.title,
            instructor: curso.instructor,
            tipo: curso.tipo,
            color: curso.color
          },
          dates: date
        })
      })
    })
    
    return attrs
  })
  
  // Función para obtener el mes actual con eventos
  const getCurrentMonthInfo = computed(() => {
    const currentMonthKey = `${selectedDate.value.getFullYear()}-${String(selectedDate.value.getMonth() + 1).padStart(2, '0')}`
    const currentMonthCursos = cursosData[currentMonthKey] || []
    
    return {
      key: currentMonthKey,
      totalCursos: currentMonthCursos.filter(curso => curso.tipo === 'curso').length,
      totalExamenes: currentMonthCursos.filter(curso => curso.tipo === 'examen').length,
      eventos: currentMonthCursos
    }
  })
  
  // Función para obtener códigos de color
  function getColorCode(color) {
    const colors = {
      blue: '#3b82f6',
      red: '#ef4444',
      green: '#22c55e',
      orange: '#f97316',
      purple: '#8b5cf6'
    }
    return colors[color] || '#6b7280'
  }
  
  // Navegación del calendario
  function previousMonth() {
    const currentDate = new Date(selectedDate.value)
    currentDate.setMonth(currentDate.getMonth() - 1)
    currentDate.setDate(1)
    selectedDate.value = currentDate
    
    // Forzar re-render del calendario
    calendarKey.value++
  }
  
  function nextMonth() {
    const currentDate = new Date(selectedDate.value)
    currentDate.setMonth(currentDate.getMonth() + 1)
    currentDate.setDate(1)
    selectedDate.value = currentDate
    
    // Forzar re-render del calendario
    calendarKey.value++
  }
  
  // Formatear el mes
  function formatMonth(date) {
    return date.toLocaleDateString('es-ES', { 
      month: 'long', 
      year: 'numeric' 
    })
  }
  </script>
  
  <style scoped>
  /* Solo estilos esenciales que no se pueden hacer con Tailwind */
  :deep(.vc-container) {
    border: none;
    font-family: inherit;
  }
  
  /* Ocultar el header original de v-calendar */
  :deep(.vc-header) {
    display: none;
  }
  
  :deep(.vc-weekday) {
    background: #f8fafc;
    color: #64748b;
    font-weight: 600;
    font-size: 0.75rem;
    padding: 0.75rem;
    text-transform: lowercase;
    border-bottom: 1px solid #e2e8f0;
  }
  
  :deep(.vc-day) {
    padding: 0;
    border: 1px solid #e2e8f0;
    min-height: 100px;
    border-top: none;
  }
  
  :deep(.vc-day-content) {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0.5rem;
  }
  
  :deep(.vc-day-number) {
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
    margin-bottom: 0.25rem;
  }
  
  :deep(.vc-day.is-today .vc-day-number) {
    background: #3b82f6;
    color: white;
    border-radius: 50%;
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  :deep(.vc-day.is-not-in-month) {
    opacity: 0.3;
  }
  
  :deep(.vc-day.is-not-in-month .vc-day-number) {
    color: #9ca3af;
  }
  
  :deep(.vc-bars) {
    margin-top: 0.25rem;
  }
  
  :deep(.vc-bar) {
    margin-bottom: 0.125rem;
    border-radius: 0.125rem;
    height: 4px;
  }
  
  /* Mejorar los bordes del calendario */
  :deep(.vc-weeks) {
    border: 1px solid #e2e8f0;
    border-top: none;
  }
  
  :deep(.vc-weekdays) {
    border-left: 1px solid #e2e8f0;
    border-right: 1px solid #e2e8f0;
  }
  
  /* Responsivo */
  @media (max-width: 768px) {
    :deep(.vc-day) {
      min-height: 80px;
    }
    
    :deep(.vc-day-content) {
      padding: 0.25rem;
    }
    
    :deep(.vc-weekday) {
      padding: 0.5rem 0.25rem;
      font-size: 0.75rem;
    }
  }
  </style>