<script setup>
import { ref, computed } from 'vue';
import GoogleIcon from '@Shared/GoogleIcon.vue';

// Datos de cursos aprobados
const approvedCourses = ref([
  {
    id: 1,
    name: 'React Avanzado y GraphQL',
    area: 'Desarrollo',
    cost: 499.00
  },
  {
    id: 2,
    name: 'Certified Ethical Hacker (CEH)',
    area: 'Seguridad',
    cost: 1199.00
  },
  {
    id: 3,
    name: 'Cisco CCNA 200-301',
    area: 'Redes',
    cost: 300.00
  }
]);

// Lista de personal
const personnel = ref([
  { id: 1, name: 'Ana García', selected: false },
  { id: 2, name: 'Carlos Mendoza', selected: false },
  { id: 3, name: 'Laura Jiménez', selected: false },
  { id: 4, name: 'Luis Martínez', selected: false },
  { id: 5, name: 'Carla Torres', selected: false },
  { id: 6, name: 'Pedro Ramírez', selected: false }
]);

// Estado del formulario
const selectedCourse = ref(approvedCourses.value[0]);
const startDate = ref('');
const endDate = ref('');
const examDate = ref('');
const showDropdown = ref(false);

// Computed para mostrar el curso seleccionado
const selectedCourseDisplay = computed(() => {
  if (selectedCourse.value) {
    return `${selectedCourse.value.name} (${selectedCourse.value.area})`;
  }
  return 'Seleccionar curso...';
});

// Computed para contar personal seleccionado
const selectedPersonnelCount = computed(() => {
  return personnel.value.filter(p => p.selected).length;
});

// Funciones
const togglePersonnel = (person) => {
  person.selected = !person.selected;
};

const selectAllPersonnel = () => {
  const allSelected = personnel.value.every(p => p.selected);
  personnel.value.forEach(p => p.selected = !allSelected);
};

const selectCourse = (course) => {
  selectedCourse.value = course;
  showDropdown.value = false;
};

const saveAssignment = () => {
  const selectedPersonnelList = personnel.value.filter(p => p.selected);
  console.log('Guardar asignación:', {
    course: selectedCourse.value,
    personnel: selectedPersonnelList,
    startDate: startDate.value,
    endDate: endDate.value,
    examDate: examDate.value
  });
  // Aquí implementarías la lógica para guardar
};

const notifyPersonnel = () => {
  const selectedPersonnelList = personnel.value.filter(p => p.selected);
  console.log('Notificar personal:', {
    course: selectedCourse.value,
    personnel: selectedPersonnelList
  });
  // Aquí implementarías la lógica para notificar
};

const formatCurrency = (amount) => {
  return new Intl.NumberFormat('es-MX', {
    style: 'currency',
    currency: 'USD'
  }).format(amount);
};
</script>

<template>
  <div class="p-6 max-w-auto mx-auto">
    <!-- Header -->
    <div class="flex items-start justify-between gap-4">
      <div>
        <h1 class="text-4xl font-extrabold text-gray-900 dark:text-primary-dt">Asignación de Cursos a Personal</h1>
        <p class="mt-1 text-sm text-gray-500 dark:text-primary-dt/70">Asigna cursos aprobados al personal seleccionado</p>
      </div>
    </div>

    <!-- Card principal -->
    <section class="mt-6 bg-white rounded-lg shadow-sm p-6 dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
      
      <!-- Selección de Curso -->
      <div class="mb-6">
        <label class="block text-sm font-medium text-gray-700 dark:text-primary-dt mb-2">
          Seleccionar Curso Aprobado
        </label>
        
        <div class="relative">
          <button
            @click="showDropdown = !showDropdown"
            class="w-full px-4 py-3 text-left bg-white border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-[#2563eb] focus:border-transparent dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt"
          >
            <span class="block truncate">{{ selectedCourseDisplay }}</span>
            <span class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
              <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
              </svg>
            </span>
          </button>

          <!-- Dropdown -->
          <div 
            v-if="showDropdown"
            class="absolute z-10 w-full mt-1 bg-white border border-gray-300 rounded-lg shadow-lg dark:bg-primary-d dark:border-primary/20"
          >
            <div class="max-h-60 overflow-auto">
              <div
                v-for="course in approvedCourses"
                :key="course.id"
                @click="selectCourse(course)"
                class="px-4 py-3 cursor-pointer hover:bg-gray-50 dark:hover:bg-primary/10 border-b border-gray-100 dark:border-primary/20 last:border-b-0"
              >
                <div class="font-medium text-gray-900 dark:text-primary-dt">{{ course.name }}</div>
                <div class="text-sm text-gray-500 dark:text-primary-dt/70">
                  {{ course.area }} • {{ formatCurrency(course.cost) }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Asignación de Personal -->
      <div class="mb-6">
        <div class="flex items-center justify-between mb-3">
          <label class="block text-sm font-medium text-gray-700 dark:text-primary-dt">
            Asignar a personal
          </label>
          <button
            @click="selectAllPersonnel"
            class="text-sm text-[#2563eb] hover:text-[#1e40af] font-medium"
          >
            {{ personnel.every(p => p.selected) ? 'Deseleccionar todo' : 'Seleccionar todo' }}
          </button>
        </div>

        <div class="border border-gray-300 rounded-lg p-4 max-h-48 overflow-y-auto dark:bg-primary-d dark:border-primary/20">
          <div class="space-y-2">
            <div
              v-for="person in personnel"
              :key="person.id"
              @click="togglePersonnel(person)"
              class="flex items-center p-2 rounded-lg cursor-pointer hover:bg-gray-50 dark:hover:bg-primary/10 transition-colors"
            >
              <div class="flex items-center h-5">
                <input
                  :checked="person.selected"
                  type="checkbox"
                  class="w-4 h-4 text-[#2563eb] bg-gray-100 border-gray-300 rounded focus:ring-[#2563eb] dark:focus:ring-[#2563eb] dark:ring-offset-gray-800 focus:ring-2 dark:bg-primary-d dark:border-primary/20"
                  @click.stop
                  @change="togglePersonnel(person)"
                >
              </div>
              <div class="ml-3 text-sm">
                <label class="font-medium text-gray-900 dark:text-primary-dt cursor-pointer">
                  {{ person.name }}
                </label>
              </div>
            </div>
          </div>
        </div>

        <div class="mt-2 text-sm text-gray-500 dark:text-primary-dt/70">
          {{ selectedPersonnelCount }} persona(s) seleccionada(s)
        </div>
      </div>

      <!-- Fechas -->
      <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
        <!-- Fecha de Inicio -->
        <div>
          <label class="block text-sm font-medium text-gray-700 dark:text-primary-dt mb-2">
            Fecha de Inicio
          </label>
          <div class="relative">
            <input
              v-model="startDate"
              type="date"
              class="w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-[#2563eb] focus:border-transparent dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt"
            >
            <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
              <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
              </svg>
            </div>
          </div>
        </div>

        <!-- Fecha de Fin -->
        <div>
          <label class="block text-sm font-medium text-gray-700 dark:text-primary-dt mb-2">
            Fecha de Fin
          </label>
          <div class="relative">
            <input
              v-model="endDate"
              type="date"
              class="w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-[#2563eb] focus:border-transparent dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt"
            >
            <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
              <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
              </svg>
            </div>
          </div>
        </div>

        <!-- Fecha de Examen -->
        <div>
          <label class="block text-sm font-medium text-gray-700 dark:text-primary-dt mb-2">
            Fecha de Examen
          </label>
          <div class="relative">
            <input
              v-model="examDate"
              type="date"
              class="w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-[#2563eb] focus:border-transparent dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt"
            >
            <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
              <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
              </svg>
            </div>
          </div>
        </div>
      </div>

      <!-- Botones de Acción -->
      <div class="flex items-center justify-end gap-3 pt-4 border-t border-gray-100 dark:border-primary/20">
        <button
          @click="saveAssignment"
          class="inline-flex items-center gap-2 px-4 py-2 rounded-lg border border-gray-300 bg-white text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-[#2563eb] focus:border-transparent dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt dark:hover:bg-primary/10"
        >
          <GoogleIcon class="text-gray-600 dark:text-primary-dt text-xl" name="save" />
          Guardar
        </button>

        <button
          @click="notifyPersonnel"
          class="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-[#7c3aed] hover:bg-[#6d28d9] text-white shadow-sm focus:outline-none focus:ring-2 focus:ring-[#7c3aed] focus:ring-offset-2"
        >
          <GoogleIcon class="text-white text-xl" name="notifications" />
          Notificar
        </button>
      </div>

    </section>
  </div>
</template>
