<template>
    <AppLayout>
        <template #header>
            <div class="flex flex-row justify-between items-center">
                <div>
                    <Link :href="route('schemas.index')" class="inline-flex items-center text-primary hover:underline text-sm">
                        <i class="pi pi-arrow-left mr-1"></i> Назад к схемам
                    </Link>
                    <h2 class="text-xl font-bold mt-1">{{ database.name }}</h2>
                    <p class="text-sm text-muted-color">{{ database.host }}:{{ database.port }}/{{ database.database }}</p>
                </div>
                <Button label="Синхронизировать" icon="pi pi-refresh" severity="success" size="small"
                        @click="syncSchema" :loading="syncing" />
            </div>
        </template>

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

        <Card>
            <template #content>
                <DataTable :value="database.tables" stripedRows>
                    <Column field="schema_name" header="Схема" sortable></Column>
                    <Column field="table_name" header="Таблица">
                        <template #body="slotProps">
                            <Link :href="route('schemas.table.detail', slotProps.data.id)"
                                  class="text-primary hover:underline">
                                {{ slotProps.data.table_name }}
                            </Link>
                        </template>
                    </Column>
                    <Column field="comment" header="Комментарий"></Column>
                    <Column header="Колонки">
                        <template #body="slotProps">
                            {{ slotProps.data.columns?.length || 0 }}
                        </template>
                    </Column>
                    <Column header="Индексы">
                        <template #body="slotProps">
                            {{ slotProps.data.indexes?.length || 0 }}
                        </template>
                    </Column>
                    <Column header="Внешние ключи">
                        <template #body="slotProps">
                            {{ slotProps.data.foreignKeys?.length || 0 }}
                        </template>
                    </Column>
                    <Column field="last_checked_at" header="Последняя проверка">
                        <template #body="slotProps">
                            {{ slotProps.data.last_checked_at ? formatDate(slotProps.data.last_checked_at) : 'Никогда' }}
                        </template>
                    </Column>
                </DataTable>
            </template>
        </Card>
    </AppLayout>
</template>

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

const props = defineProps({
    database: Object,
});

const syncing = ref(false);

const formatDate = (dateString) => {
    return new Date(dateString).toLocaleString('ru-RU');
};

const syncSchema = () => {
    syncing.value = true;
    router.post(route('schemas.sync', props.database.id), {}, {
        onFinish: () => {
            syncing.value = false;
        }
    });
};
</script>
