<template>
    <AppLayout>
        <template #header>
            <div class="flex justify-between items-center">
                <h2 class="text-xl font-bold">Расписания миграций</h2>
                <Link :href="route('migrations.create')">
                    <Button icon="pi pi-plus" label="Создать расписание" />
                </Link>
            </div>
        </template>

        <Message v-if="$page.props.flash?.success" severity="success" :life="3000" class="mb-4">
            {{ $page.props.flash.success }}
        </Message>

        <Message v-if="$page.props.flash?.warning" severity="warn" :life="3000" class="mb-4">
            {{ $page.props.flash.warning }}
        </Message>

        <Card>
            <template #content>
                <DataTable :value="schedules" stripedRows>
                    <Column field="name" header="Название" sortable></Column>
                    <Column field="source_database.name" header="Источник" sortable></Column>
                    <Column field="target_database.name" header="Цель" sortable></Column>
                    <Column field="is_active" header="Статус">
                        <template #body="slotProps">
                            <Tag :value="slotProps.data.is_active ? 'Активно' : 'Неактивно'"
                                 :severity="slotProps.data.is_active ? 'success' : 'secondary'" />
                        </template>
                    </Column>
                    <Column field="cron_expression" header="Расписание"></Column>
                    <Column field="migration_runs_count" header="Запусков" sortable></Column>
                    <Column header="Действия">
                        <template #body="slotProps">
                            <div class="flex gap-2">
                                <Button icon="pi pi-play" severity="success" size="small"
                                        @click="runNow(slotProps.data)"
                                        title="Запустить сейчас" />
                                <Button icon="pi pi-eye" severity="info" size="small"
                                        @click="viewSchedule(slotProps.data)"
                                        title="Просмотр" />
                                <Link :href="route('migrations.edit', slotProps.data.id)">
                                    <Button icon="pi pi-pencil" severity="secondary" size="small"
                                            title="Редактировать" />
                                </Link>
                                <Button icon="pi pi-trash" severity="danger" size="small"
                                        @click="confirmDelete(slotProps.data)"
                                        title="Удалить" />
                            </div>
                        </template>
                    </Column>
                </DataTable>
            </template>
        </Card>

        <Dialog v-model:visible="deletingDialog" modal header="Подтверждение удаления" :style="{ width: '400px' }">
            <p>Вы уверены, что хотите удалить расписание "<strong>{{ scheduleToDelete?.name }}</strong>"?</p>
            <template #footer>
                <Button label="Отмена" icon="pi pi-times" @click="deletingDialog = false" severity="secondary" />
                <Button label="Удалить" icon="pi pi-trash" @click="deleteSchedule" severity="danger" />
            </template>
        </Dialog>
    </AppLayout>
</template>

<script setup>
import { ref } from 'vue';
import { Link, router } from '@inertiajs/vue3';
import AppLayout from '@/Layouts/AppLayout.vue';
import DataTable from 'primevue/datatable';
import Column from 'primevue/column';
import Button from 'primevue/button';
import Tag from 'primevue/tag';
import Message from 'primevue/message';
import Card from 'primevue/card';
import Dialog from 'primevue/dialog';

const props = defineProps({
    schedules: Array,
});

const deletingDialog = ref(false);
const scheduleToDelete = ref(null);

const runNow = (schedule) => {
    if (confirm(`Запустить миграцию "${schedule.name}" сейчас?`)) {
        router.post(route('migrations.run', schedule.id));
    }
};

const viewSchedule = (schedule) => {
    router.visit(route('migrations.show', schedule.id));
};

const confirmDelete = (schedule) => {
    scheduleToDelete.value = schedule;
    deletingDialog.value = true;
};

const deleteSchedule = () => {
    router.delete(route('migrations.destroy', scheduleToDelete.value.id));
    deletingDialog.value = false;
    scheduleToDelete.value = null;
};
</script>
