<template>
    <div class="min-h-screen flex items-center justify-center bg-gray-100">
        <div class="max-w-md w-full p-6 bg-white rounded-md shadow-md">
            <h1 class="text-2xl font-bold text-red-500 mb-4">{{ status }}</h1>
            <p class="text-gray-700 mb-4">{{ message }}</p>
            <div class="text-sm text-gray-500 mb-4">
                <p>Error Code: {{ details.code }}</p>
                <p>Type: {{ details.type }}</p>
                <div v-for="(port, index) in details.ports" :key="index">
                    <p>Connection attempt {{ index + 1 }}: {{ port.address }}:{{ port.port }}</p>
                </div>
            </div>
            <SectionTitleLineWithButton :icon="mdiLightbulbAlert" :title="'Database Error'" :main="true">
                <BaseButton @click.prevent="handleAction" :icon="mdiArrowLeftBoldOutline" label="Dashboard"
                    color="white" rounded-full small />
            </SectionTitleLineWithButton>
        </div>
    </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-facing-decorator';
import { Link, router } from '@inertiajs/vue3';
import SectionTitleLineWithButton from '@/Components/SectionTitleLineWithButton.vue';
import BaseButton from '@/Components/BaseButton.vue';
import { mdiLightbulbAlert, mdiArrowLeftBoldOutline } from '@mdi/js';
import { stardust } from '@eidellev/adonis-stardust/client';
import LayoutGuest from '@/Layouts/LayoutGuest.vue';

@Component({
    options: {
        layout: LayoutGuest,
    },
    name: 'PostgresError',
    components: {
        Link,
        BaseButton,
        SectionTitleLineWithButton,
    },
})
export default class AppComponent extends Vue {
    @Prop({
        type: String,
        default: '',
    })
    status: string;

    @Prop({
        type: String,
        default: '',
    })
    message: string;

    @Prop({
        type: Object,
        default: () => ({}),
    })
    details: {
        code: string;
        type: string;
        ports: Array<{ port: number; address: string }>;
    };

    mdiLightbulbAlert = mdiLightbulbAlert;
    mdiArrowLeftBoldOutline = mdiArrowLeftBoldOutline;

    public async handleAction() {
        await router.get(stardust.route('dashboard'));
    }
}
</script>
