<script setup>
import GoogleIcon from '@Shared/GoogleIcon.vue';
import Adding from '@Holos/Button/ButtonRh.vue';
</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">Información Adicional</h1>
        <p class="mt-1 text-sm text-gray-500 dark:text-primary-dt/70">Deportes, evaluaciones de desempeño y desarrollo profesional</p>
      </div>

      <div>
        <Adding text="Nueva Evaluación" />
      </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">
      <!-- Perfil -->
      <header class="flex items-start gap-4">
        <div class="flex-shrink-0">
            <div class="w-12 h-12 rounded-full bg-gray-100 flex items-center justify-center text-gray-600 dark:bg-primary/10 dark:text-primary-dt">
              <GoogleIcon class="text-black dark:text-primary-dt text-xl" name="description" />
            </div>
        </div>

        <div class="flex-1">
          <h2 class="text-xl font-semibold text-gray-800 dark:text-primary-dt">María González López</h2>
          <p class="text-sm text-gray-500 mt-1 dark:text-primary-dt/70">Información adicional y evaluación de desempeño</p>
        </div>
      </header>

      <!-- Deportes -->
      <div class="mt-6">
        <h3 class="text-base font-medium text-gray-800 dark:text-primary-dt flex items-center gap-2">
          <GoogleIcon class="text-gray-600 dark:text-primary-dt text-base" name="sports_tennis" />
          Deportes que Practica
        </h3>
        <div class="mt-3 flex flex-wrap gap-2">
          <span class="inline-block px-3 py-1 bg-blue-50 text-blue-700 rounded-full text-sm dark:bg-primary/10 dark:text-primary-dt">Natación</span>
          <span class="inline-block px-3 py-1 bg-blue-50 text-blue-700 rounded-full text-sm dark:bg-primary/10 dark:text-primary-dt">Yoga</span>
          <span class="inline-block px-3 py-1 bg-blue-50 text-blue-700 rounded-full text-sm dark:bg-primary/10 dark:text-primary-dt">Ciclismo</span>
        </div>
      </div>

      <!-- Evaluación de Desempeño -->
      <div class="mt-8">
        <h3 class="text-base font-medium text-gray-800 dark:text-primary-dt flex items-center gap-2">
          <GoogleIcon class="text-gray-600 dark:text-primary-dt text-base" name="star" />
          Evaluación de Desempeño
        </h3>

        <div class="mt-4 grid grid-cols-1 md:grid-cols-3 gap-4 items-start">
          <!-- Puntuación grande -->
          <div class="md:col-span-2 bg-gradient-to-r from-[#1e40af] to-[#2563eb] text-white rounded-lg p-6 flex flex-col justify-between shadow-sm">
            <div class="flex items-center justify-between">
              <div>
                <div class="text-sm font-semibold">Puntuación General</div>
              </div>
              <div>
                <span class="inline-block bg-emerald-100 text-emerald-700 text-xs px-3 py-1 rounded-full">Excelente</span>
              </div>
            </div>

            <div class="mt-4">
              <div class="text-4xl font-bold">92/100</div>
              <div class="text-sm opacity-80 mt-1">Evaluado el 2024-01-15</div>
            </div>
          </div>

          <!-- Archivo evaluación -->
          <div class="rounded-lg border border-gray-100 bg-white p-4 dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
            <div class="text-sm font-semibold text-gray-800 dark:text-primary-dt">Archivo de Evaluación</div>
            <div class="mt-3 flex items-start gap-3">
              <GoogleIcon class="text-gray-400 dark:text-primary-dt text-xl" name="picture_as_pdf" />
              <div>
                <div class="text-sm text-gray-700 dark:text-primary-dt">evaluacion_maria_2024.pdf</div>
                <div class="text-xs text-gray-400 mt-1 dark:text-primary-dt/70">Evaluador: Juan Pérez</div>
              </div>
            </div>
          </div>
        </div>

        <!-- Observaciones -->
        <div class="mt-4 rounded-lg border border-gray-100 bg-white p-4 dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
           <div class="font-semibold text-sm text-gray-800 dark:text-primary-dt">Observaciones</div>
           <div class="mt-2 text-sm text-gray-500 dark:text-primary-dt/70">
             Excelente desempeño...
           </div>
         </div>
      </div>

      <!-- Objetivos y Progreso -->
      <div class="mt-8">
        <h3 class="text-base font-medium text-gray-800 dark:text-primary-dt flex items-center gap-2">
          <GoogleIcon class="text-gray-600 dark:text-primary-dt text-base" name="track_changes" />
          Objetivos y Progreso
        </h3>

        <div class="mt-4 space-y-4">
          <!-- Objetivo 1 -->
          <div class="rounded-lg border border-gray-100 bg-white p-4 dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
            <div class="flex justify-between items-center">
              <div class="font-semibold text-sm text-gray-800 dark:text-primary-dt">Completar certificación en React Advanced</div>
              <div class="text-sm text-gray-500 dark:text-primary-dt/70">75%</div>
            </div>
            <div class="mt-2 text-xs text-gray-400 dark:text-primary-dt/70">Fecha límite: 2024-03-30</div>
            <div class="mt-3 h-3 rounded-full bg-gray-100 dark:bg-primary/10 overflow-hidden">
              <div class="h-full bg-[#2563eb]" style="width:75%"></div>
            </div>
          </div>

          <!-- Objetivo 2 -->
          <div class="rounded-lg border border-gray-100 bg-white p-4 dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
            <div class="flex justify-between items-center">
              <div class="font-semibold text-sm text-gray-800 dark:text-primary-dt">Liderar proyecto de refactorización</div>
              <div class="text-sm text-gray-500 dark:text_primary-dt/70">45%</div>
            </div>
            <div class="mt-2 text-xs text-gray-400 dark:text-primary-dt/70">Fecha límite: 2024-04-15</div>
            <div class="mt-3 h-3 rounded-full bg-gray-100 dark:bg-primary/10 overflow-hidden">
              <div class="h-full bg-[#2563eb]" style="width:45%"></div>
            </div>
          </div>
        </div>
      </div>

      <!-- Acciones -->
      <div class="mt-6 border-t border-gray-100 pt-4 flex gap-3 dark:border-primary/20">
        <button class="inline-flex items-center gap-2 px-3 py-2 rounded-md border border-gray-200 bg-white text-sm text-gray-700 shadow-sm dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
          <GoogleIcon class="text-black dark:text-primary-dt text-base" name="file_upload" />
          Subir Evaluación
        </button>

        <button class="inline-flex items-center gap-2 px-3 py-2 rounded-md border border-gray-200 bg-white text-sm text-gray-700 shadow-sm dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
          <GoogleIcon class="text-black dark:text-primary-dt text-base" name="target" />
          Actualizar Objetivos
        </button>

        <button class="inline-flex items-center gap-2 px-3 py-2 rounded-md border border-gray-200 bg-white text-sm text-gray-700 shadow-sm dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
          <GoogleIcon class="text-black dark:text-primary-dt text-base" name="trophy" />
          Actualizar Deportes
        </button>
      </div>
    </section>
  </div>
</template>