<script setup>
import { onMounted, ref } from 'vue';
import { can, apiTo, viewTo, transl } from './Module'
import { useSearcher } from '@Services/Api';
import { hasPermission } from '@Plugins/RolePermission';

import ModalController    from '@Controllers/ModalController.js';

import IconButton   from '@Holos/Button/Icon.vue'
import DestroyView  from '@Holos/Modal/Template/Destroy.vue';
import SearcherHead from '@Holos/Searcher.vue';
import Table        from '@Holos/Table.vue';
import ShowView     from './Modals/Show.vue';

/** Controladores */
const Modal    = new ModalController();

/** Propiedades */
const destroyModal = ref(Modal.destroyModal);
const showModal    = ref(Modal.showModal);
const modelModal   = ref(Modal.modelModal);

const models = ref([]);

/** Métodos */
const searcher = useSearcher({
    url: apiTo('index'),
    onSuccess: (r) => models.value = r.models,
    onError: () => models.value = []
});

/** Ciclos */
onMounted(() => {
    searcher.search();
});
</script>

<template>
    <div>
        <SearcherHead
            :title="transl('title')"
            @search="(x) => searcher.search(x)"
        >
            <RouterLink
                v-if="can('create')"
                :to="viewTo({ name: 'create' })"
            >
                <IconButton
                    class="text-white"
                    icon="add"
                    :title="$t('crud.create')"
                    filled
                />
            </RouterLink>
            <IconButton
                icon="refresh"
                :title="$t('refresh')"
                @click="searcher.search()"
            />
        </SearcherHead>
        <div class="pt-2 w-full px-4">
            <div class="bg-white rounded-lg shadow-md overflow-hidden">
                <Table
                    :items="models"
                    :processing="searcher.processing"
                    @send-pagination="(page) => searcher.pagination(page)"
                >
                    <template #head>
                        <th class="px-6 py-3 text-left text-sm font-semibold" v-text="$t('user')" />
                        <th class="px-6 py-3 text-left text-sm font-semibold" v-text="$t('contact')" />
                        <th class="px-6 py-3 text-center text-sm font-semibold w-32" v-text="$t('actions')" />
                    </template>
                    <template #body="{items}">
                        <tr
                            v-for="model in items"
                            class="border-b border-gray-200 hover:bg-gray-50 transition-colors"
                        >
                            <td class="px-6 py-4 text-sm text-gray-700">
                                {{ `${model.name} ${model.paternal}` }}
                            </td>
                            <td class="px-6 py-4 text-sm text-gray-700">
                                <p>
                                    <a
                                        class="hover:underline"
                                        target="_blank"
                                        :href="`mailto:${model.email}`"
                                    >
                                        {{ model.email }}
                                    </a>
                                </p>
                                <p v-if="model.phone" class="font-semibold text-xs">
                                    <b>Teléfono: </b>
                                    <span
                                        class="hover:underline"
                                        target="_blank"
                                        :href="`tel:${model.phone}`"
                                    >
                                        {{ model.phone }}
                                    </span>
                                </p>
                            </td>
                            <td class="px-6 py-4">
                                <div class="flex justify-center items-center space-x-2">
                                <IconButton
                                    icon="visibility"
                                    :title="$t('crud.show')"
                                    @click="Modal.switchShowModal(model)"
                                    outline
                                />
                                <RouterLink
                                    v-if="can('edit')"
                                    class="h-fit"
                                    :to="viewTo({ name: 'edit', params: { id: model.id } })"
                                >
                                    <IconButton
                                        icon="edit"
                                        :title="$t('crud.edit')"
                                        outline
                                    />
                                </RouterLink>
                                <IconButton
                                    v-if="can('destroy')"
                                    icon="delete"
                                    :title="$t('crud.destroy')"
                                    @click="Modal.switchDestroyModal(model)"
                                    outline
                                />
                                <RouterLink
                                    v-if="can('settings')"
                                    class="h-fit"
                                    :to="viewTo({ name: 'settings', params: { id: model.id } })"
                                >
                                    <IconButton
                                        icon="settings"
                                        :title="$t('setting')"
                                    />
                                </RouterLink>
                                <RouterLink
                                    v-if="hasPermission('activities.index')"
                                    class="h-fit"
                                    :to="$view({ name: 'admin.activities.index', query: { user: model.id } })"
                                >
                                    <IconButton
                                        icon="timeline"
                                        :title="$t('activity')"
                                    />
                                </RouterLink>
                            </div>
                        </td>
                    </tr>
                </template>
                <template #empty>
                    <td colspan="3" class="px-6 py-8 text-center text-gray-500 text-sm">
                        {{ $t('registers.empty') }}
                    </td>
                </template>
                </Table>
            </div>
        </div>
        
        <ShowView 
            v-if="can('index')"
            :show="showModal" 
            :model="modelModal" 
            @close="Modal.switchShowModal"
        />
        <DestroyView
            v-if="can('destroy')"
            subtitle="last_name"
            :model="modelModal"
            :show="destroyModal"
            :to="(user) => apiTo('destroy', { user })"
            @close="Modal.switchDestroyModal"
            @update="searcher.search()"
        />
    </div>
</template>
    