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

// Estado del formulario
const formData = ref({
  courseName: '',
  cost: '',
  description: '',
  certificationName: '',
  certificationType: '',
  duration: '',
  courseUrl: ''
});

// Lista de personal a capacitar
const personnelToTrain = ref([
  { name: 'Ana García', department: 'Desarrollo' },
  { name: 'Luis Martínez', department: 'Redes' },
  { name: 'Carla Torres', department: 'Sistemas' },
  { name: 'Pedro Ramírez', department: 'Seguridad' },
  { name: 'Sofía Hernandez', department: 'Ventas' }
]);

// Función para enviar la solicitud
const submitRequest = () => {
  console.log('Enviar solicitud:', formData.value);
  
  // Validación básica
  if (!formData.value.courseName || !formData.value.cost || !formData.value.description) {
    alert('Por favor, completa todos los campos obligatorios');
    return;
  }
  
  // Aquí implementarías la lógica para enviar la solicitud
  alert('Solicitud enviada correctamente');
  
  // Limpiar formulario
  formData.value = {
    courseName: '',
    cost: '',
    description: '',
    certificationName: '',
    certificationType: '',
    duration: '',
    courseUrl: ''
  };
};

// Función para validar URL
const isValidUrl = (url) => {
  if (!url) return true; // Campo opcional
  try {
    new URL(url);
    return true;
  } catch {
    return false;
  }
};
</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">Solicitud de Nuevo Curso</h1>
        <p class="mt-1 text-sm text-gray-500 dark:text-primary-dt/70">Completa la información para solicitar un nuevo curso de capacitación</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">
      
      <!-- Formulario -->
      <form @submit.prevent="submitRequest" class="space-y-6">
        
        <!-- Campos del formulario en dos columnas -->
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
          
          <!-- Columna izquierda -->
          <div class="space-y-6">
            
            <!-- Nombre del Curso -->
            <div>
              <label class="block text-sm font-medium text-gray-700 dark:text-primary-dt mb-2">
                Nombre del Curso *
              </label>
              <input
                v-model="formData.courseName"
                type="text"
                required
                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"
                placeholder="Ingresa el nombre del curso"
              >
            </div>

            <!-- Costo (USD) -->
            <div>
              <label class="block text-sm font-medium text-gray-700 dark:text-primary-dt mb-2">
                Costo (USD) *
              </label>
              <input
                v-model="formData.cost"
                type="number"
                required
                min="0"
                step="0.01"
                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"
                placeholder="0.00"
              >
            </div>

            <!-- Breve descripción del curso -->
            <div>
              <label class="block text-sm font-medium text-gray-700 dark:text-primary-dt mb-2">
                Breve descripción del curso *
              </label>
              <textarea
                v-model="formData.description"
                required
                rows="4"
                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 resize-vertical dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt"
                placeholder="Describe brevemente el contenido y objetivos del curso"
              ></textarea>
            </div>

            <!-- Nombre de la certificación a obtener -->
            <div>
              <label class="block text-sm font-medium text-gray-700 dark:text-primary-dt mb-2">
                Nombre de la certificación a obtener
              </label>
              <input
                v-model="formData.certificationName"
                type="text"
                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"
                placeholder="Ej: Certificación AWS Solutions Architect"
              >
            </div>

          </div>

          <!-- Columna derecha -->
          <div class="space-y-6">
            
            <!-- Tipo de Certificación -->
            <div>
              <label class="block text-sm font-medium text-gray-700 dark:text-primary-dt mb-2">
                Tipo de Certificación
              </label>
              <input
                v-model="formData.certificationType"
                type="text"
                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"
                placeholder="Ej: Técnica, Profesional, Oficial"
              >
            </div>

            <!-- Duración (días) -->
            <div>
              <label class="block text-sm font-medium text-gray-700 dark:text-primary-dt mb-2">
                Duración (días)
              </label>
              <input
                v-model="formData.duration"
                type="number"
                min="1"
                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"
                placeholder="Número de días"
              >
            </div>

            <!-- URL del curso -->
            <div>
              <label class="block text-sm font-medium text-gray-700 dark:text-primary-dt mb-2">
                URL del curso
              </label>
              <input
                v-model="formData.courseUrl"
                type="url"
                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"
                placeholder="https://ejemplo.com/curso"
              >
            </div>

          </div>
        </div>

        <!-- Sección de Personal a Capacitar -->
        <div class="mt-8">
          <h3 class="text-lg font-medium text-gray-800 mb-4 flex items-center gap-2 dark:text-primary-dt">
            <GoogleIcon class="text-black dark:text-primary-dt text-xl" name="people" />
            Personal a capacitar
          </h3>

          <div class="bg-gray-50 rounded-lg p-4 dark:bg-primary/5">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
              <div
                v-for="person in personnelToTrain"
                :key="person.name"
                class="flex items-center justify-between p-3 bg-white rounded-lg border border-gray-200 dark:bg-primary-d dark:border-primary/20"
              >
                <div>
                  <div class="font-medium text-gray-900 dark:text-primary-dt">{{ person.name }}</div>
                  <div class="text-sm text-gray-500 dark:text-primary-dt/70">{{ person.department }}</div>
                </div>
                <div class="flex-shrink-0">
                  <span class="inline-block bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full dark:bg-blue-900/30 dark:text-blue-300">
                    {{ person.department }}
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- Botón de Enviar -->
        <div class="flex justify-end pt-6 border-t border-gray-100 dark:border-primary/20">
          <button
            type="submit"
            class="inline-flex items-center gap-2 px-6 py-3 rounded-lg bg-[#7c3aed] hover:bg-[#6d28d9] text-white font-medium shadow-sm focus:outline-none focus:ring-2 focus:ring-[#7c3aed] focus:ring-offset-2 transition-colors"
          >
            <GoogleIcon class="text-white text-xl" name="send" />
            Enviar Solicitud
          </button>
        </div>

      </form>

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