<script setup>
import { ref } from 'vue';
import { useForm, usePage } from '@inertiajs/vue3';
import Modal from '@/Components/Modal.vue';
import SecondaryButton from '@/Components/SecondaryButton.vue';
import PrimaryButton from '@/Components/PrimaryButton.vue';
import TextInput from '@/Components/TextInput.vue';
import InputLabel from '@/Components/InputLabel.vue';

const showModal = ref(false);
const page = usePage();

// Inicializamos o form vazio
const form = useForm({
    queues: []
});

const openModal = () => {
    // Pegamos as filas disponíveis na página (assumindo que o Dashboard passa 'queues')
    // Mapeamos para o formato que o form precisa editar
    const currentQueues = page.props.queues || [];

    form.queues = currentQueues.map(queue => ({
        id: queue.id,
        name: queue.name,       // Apenas para mostrar na tela (leitura)
        sector: queue.sector || '' // O valor que vamos editar
    }));

    showModal.value = true;
};

const submit = () => {
    form.put(route('queues.update-sectors'), {
        preserveScroll: true,
        onSuccess: () => {
            showModal.value = false;
            form.reset();
        },
    });
};

const closeModal = () => {
    showModal.value = false;
    form.reset();
};
</script>

<template>
    <div>
        <button @click.prevent.stop="openModal"
            class="block w-full px-4 py-2 text-start text-sm leading-5 text-gray-700 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 transition duration-150 ease-in-out">
            Organizar Setores
        </button>

        <Modal :show="showModal" @close="closeModal">
            <div class="p-6">
                <h2 class="text-lg font-medium text-gray-900 mb-2">
                    Organizar Setores
                </h2>
                <p class="text-sm text-gray-500 mb-6">
                    Defina em qual setor (pasta) cada fila deve aparecer no Dashboard.
                    Deixe em branco para "Geral".
                </p>

                <div v-if="form.queues.length > 0" class="max-h-[60vh] overflow-y-auto pr-2 flex flex-col gap-3">

                    <div v-for="(queue, index) in form.queues" :key="queue.id"
                        class="flex items-center justify-between p-3 bg-gray-50 rounded border border-gray-200">

                        <div class="flex flex-col w-1/2 pr-4">
                            <span class="text-[10px] font-bold text-gray-400 uppercase tracking-wider">Fila /
                                Canal</span>
                            <span class="text-sm font-semibold text-gray-800 truncate" :title="queue.name">
                                {{ queue.name }}
                            </span>
                        </div>

                        <div class="w-1/2">
                            <InputLabel :for="'sector-' + index" value="Nome do Setor" class="sr-only" />
                            <TextInput :id="'sector-' + index" v-model="queue.sector" type="text"
                                class="mt-1 block w-full py-1.5 text-sm" placeholder="Ex: Financeiro"
                                @keyup.enter="submit" />
                        </div>
                    </div>

                </div>

                <div v-else class="text-center py-8 text-gray-400 italic">
                    Nenhuma fila carregada nesta página.
                </div>

                <div class="mt-6 flex justify-end gap-3">
                    <SecondaryButton @click="closeModal">
                        Cancelar
                    </SecondaryButton>

                    <PrimaryButton @click="submit" class="bg-indigo-600 hover:bg-indigo-700"
                        :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
                        Salvar Setores
                    </PrimaryButton>
                </div>
            </div>
        </Modal>
    </div>
</template>