<script setup lang="ts">
import { computed } from 'vue';
import Card from 'primevue/card';
import InputText from 'primevue/inputtext';
import type { AssignmentEmployeeOption } from '../../types/fixedAssetAssignment';

interface Props {
    employees: AssignmentEmployeeOption[];
    searchTerm: string;
    selectedEmployeeId: string;
}

const props = defineProps<Props>();

const emit = defineEmits<{
    (e: 'update:searchTerm', value: string): void;
    (e: 'update:selectedEmployeeId', value: string): void;
}>();

const visibleEmployees = computed(() => {
    const query = props.searchTerm.trim().toLowerCase();
    if (!query) return props.employees;

    return props.employees.filter((employee) =>
        employee.fullName.toLowerCase().includes(query)
        || employee.id.toLowerCase().includes(query)
        || employee.department.toLowerCase().includes(query)
    );
});
</script>

<template>
    <Card class="shadow-sm">
        <template #title>
            <div class="flex items-center gap-2 text-xl">
                <i class="pi pi-users text-primary"></i>
                <span>Seleccionar Colaborador</span>
            </div>
        </template>
        <template #content>
            <div class="space-y-4">
                <InputText
                    :model-value="searchTerm"
                    class="w-full"
                    placeholder="Buscar por nombre, ID o departamento..."
                    @update:model-value="emit('update:searchTerm', $event)"
                />

                <div class="grid grid-cols-1 gap-3 md:grid-cols-2">
                    <button
                        v-for="employee in visibleEmployees"
                        :key="employee.id"
                        type="button"
                        class="rounded-xl border p-4 text-left transition-all"
                        :class="selectedEmployeeId === employee.id
                            ? 'border-primary bg-primary-50 dark:bg-primary-950/20'
                            : 'border-surface-200 hover:border-primary/50 dark:border-surface-700'"
                        @click="emit('update:selectedEmployeeId', employee.id)"
                    >
                        <div class="flex items-start justify-between gap-3">
                            <div class="flex items-start gap-3">
                                <div class="flex h-10 w-10 items-center justify-center rounded-full bg-primary text-sm font-semibold text-white">
                                    {{ employee.initials }}
                                </div>
                                <div>
                                    <p class="font-semibold text-surface-900 dark:text-surface-0">{{ employee.fullName }}</p>
                                    <p class="text-sm text-surface-600 dark:text-surface-300">{{ employee.role }}</p>
                                    <p class="text-xs text-surface-500 dark:text-surface-400">{{ employee.department }}</p>
                                </div>
                            </div>
                            <i
                                class="pi pi-check-circle text-primary"
                                :class="selectedEmployeeId === employee.id ? 'opacity-100' : 'opacity-0'"
                            />
                        </div>
                    </button>
                </div>
            </div>
        </template>
    </Card>
</template>
