<script setup>
import { computed } from "vue";
import { Link } from "@inertiajs/vue3";
import { can, goTo } from "@/Pages/Admin/MainRoleSkills/Component";

import GoogleIcon from "@/Components/Shared/GoogleIcon.vue";

const emit = defineEmits(["select"]);

const props = defineProps({
  mainRoleSkills: Array,
  selectedRole: Object,
});

const roleSkills = computed(() => {
  if (!props.mainRoleSkills || !props.selectedRole) {
    return [];
  }
  // Filtrar habilidades por rol seleccionado
  return props.mainRoleSkills.filter(
    (roleSkill) => roleSkill.main_role_id === props.selectedRole.id
  );
});
</script>

<template>
  <div class="w-full">
    <div class="mb-6 mt-12">
      <div class="flex gap-6">
        <h2 class="text-xl font-semibold mb-2">
          {{ $t("skill.assignment.title") }}
        </h2>
        <Link
          v-if="can('create')"
          :href="route(goTo('create'), {
            role_id: selectedRole.id,
            department_id: selectedRole.department?.id || selectedRole.department_id
          })"
        >
          <GoogleIcon
            :title="$t('crud.create')"
            class="btn-icon-primary"
            name="add"
            outline
          />
        </Link>
      </div>
      <p class="text-gray-600">
        Habilidades asignadas al rol: {{ selectedRole.name }}
      </p>
    </div>

    <div
      v-if="roleSkills.length > 0"
      class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4"
    >
      <div
        v-for="roleSkill in roleSkills"
        :key="roleSkill.id"
        class="bg-white p-4 rounded-lg shadow hover:shadow-lg transition-shadow duration-200 cursor-pointer border"
        @click="emit('select', roleSkill)"
      >
        <h3 class="text-lg font-medium mb-2 text-blue-600">
          {{ roleSkill.skill.name }}
        </h3>

        <div class="text-sm text-gray-600">
          <span class="font-semibold">Puntuación:</span>
          {{ roleSkill.score.alias }}
        </div>

        <p
          v-if="roleSkill.skill.description"
          class="text-xs text-gray-500 mt-2"
        >
          {{ roleSkill.skill.description }}
        </p>
      </div>
    </div>

    <div v-else class="text-center py-12">
      <p class="text-gray-500 text-lg">
        No hay habilidades asignadas a este rol
      </p>
      <p class="text-gray-400 text-sm mt-2">
        Las habilidades se pueden asignar desde la sección de creación
      </p>
    </div>
  </div>
</template>
