<script setup>
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue'
import CcliPasteDialog from '@/Components/CcliPasteDialog.vue'
import SongEditModal from '@/Components/SongEditModal.vue'
import { Head, router } from '@inertiajs/vue3'
import { ref } from 'vue'

const props = defineProps({
    prefilledText: { type: String, default: null },
    prefilledMetadata: { type: Object, default: null },
    prefillError: { type: String, default: null },
})

const editSongId = ref(null)

function handleClose() {
    // Don't navigate away if an edit is opening (import & edit flow).
    if (editSongId.value !== null) return

    router.visit(route('songs.index'))
}

function handleImported(songId, mode) {
    if (mode === 'stay') {
        router.visit(route('songs.index'))
    }
}

function handleEditSong(id) {
    editSongId.value = id
}

function handleEditClose() {
    router.visit(route('songs.index'))
}
</script>

<template>
    <Head title="Song aus SongSelect importieren" />

    <AuthenticatedLayout>
        <template #header>
            <h2 class="text-xl font-semibold leading-tight text-gray-900">
                Song aus SongSelect importieren
            </h2>
        </template>

        <div class="py-8">
            <div class="mx-auto max-w-2xl px-4 sm:px-6 lg:px-8">

                <!-- Prefill error -->
                <div
                    v-if="prefillError"
                    data-testid="ccli-prefill-error-message"
                    class="mb-4 rounded-lg border border-yellow-200 bg-yellow-50 p-4 text-sm text-yellow-800"
                >
                    {{ prefillError }}
                </div>

                <!-- Always-open paste dialog on this page -->
                <CcliPasteDialog
                    :open="editSongId === null"
                    mode="songdb"
                    :prefilled-text="prefilledText"
                    :auto-edit="prefilledText !== null"
                    @close="handleClose"
                    @imported="handleImported"
                    @edit-song="handleEditSong"
                />

                <SongEditModal
                    :show="editSongId !== null"
                    :song-id="editSongId"
                    @close="handleEditClose"
                />
            </div>
        </div>
    </AuthenticatedLayout>
</template>
