<script setup>
import { onMounted, ref } from 'vue';
import { useSearcher, apiURL } from '@Services/Api';

import SearcherHead from '@Holos/Searcher.vue';
import Table from '@Holos/Table.vue';
import GoogleIcon from '@Shared/GoogleIcon.vue';

/** Estado */
const clients = ref([]);

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

/** Métodos auxiliares */
const copyClientInfo = (client) => {
    const info = `
Nombre: ${client.name}
Email: ${client.email || 'N/A'}
Teléfono: ${client.phone || 'N/A'}
Dirección: ${client.address || 'N/A'}
RFC: ${client.rfc || 'N/A'}
    `.trim();

    navigator.clipboard.writeText(info).then(() => {
        window.Notify.success(`Información de ${client.name} copiada al portapapeles`);
    }).catch(() => {
        window.Notify.error('No se pudo copiar la información');
    });
};

/** Ciclo de vida */
onMounted(() => {
    searcher.search();
});
</script>

<template>
    <div>
        <SearcherHead
            :title="$t('clients.title')"
            placeholder="Buscar por nombre..."
            @search="(x) => searcher.search(x)"
        >
        </SearcherHead>
        <div class="pt-2 w-full">
            <Table
                :items="clients"
                @send-pagination="(page) => searcher.pagination(page)"
            >
                <template #head>
                    <th class="px-6 py-3 text-center text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">NOMBRE</th>
                    <th class="px-6 py-3 text-center text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">CORREO</th>
                    <th class="px-6 py-3 text-center text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">TELEFONO</th>
                    <th class="px-6 py-3 text-center text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">DIRECCIÓN</th>
                    <th class="px-6 py-3 text-center text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">RFC</th>
                </template>
                <template #body="{items}">
                    <tr
                        v-for="client in items"
                        :key="client.id"
                        @click="copyClientInfo(client)"
                        class="hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors cursor-pointer"
                    >
                        <td class="px-6 py-4 text-center">
                            <p class="text-sm font-semibold text-gray-900 dark:text-gray-100">{{ client.name }}</p>
                        </td>
                        <td class="px-6 py-4 text-center">
                            <p class="text-sm text-gray-700 dark:text-gray-300">{{ client.email }}</p>
                        </td>
                        <td class="px-6 py-4 text-center">
                            <p class="text-sm text-gray-700 dark:text-gray-300">{{ client.phone }}</p>
                        </td>
                        <td class="px-6 py-4 text-center">
                            <p class="text-sm text-gray-700 dark:text-gray-300">{{ client.address }}</p>
                        </td>
                        <td class="px-6 py-4 text-center">
                            <p class="text-sm text-gray-700 dark:text-gray-300">{{ client.rfc }}</p>
                        </td>
                    </tr>
                </template>
                <template #empty>
                    <td colspan="5" class="table-cell text-center">
                        <div class="flex flex-col items-center justify-center py-8 text-gray-500">
                            <GoogleIcon
                                name="person"
                                class="text-6xl mb-2 opacity-50"
                            />
                            <p class="font-semibold">
                                {{ $t('registers.empty') }}
                            </p>
                        </div>
                    </td>
                </template>
            </Table>
        </div>
    </div>
</template>