<template>
    <div>
        <h2 class="text-lg font-bold text-neutral-900">{{ $t('bookstack.settings.title') }}</h2>

        <form class="mt-6 max-w-lg space-y-4" @submit.prevent="handleSave">
            <MalioInputText
                v-model="form.url"
                :label="$t('bookstack.settings.url')"
                :placeholder="$t('bookstack.settings.urlPlaceholder')"
                input-class="w-full"
            />

            <MalioInputPassword
                v-model="form.tokenId"
                :label="$t('bookstack.settings.tokenId')"
                input-class="w-full"
            />

            <div>
                <MalioInputPassword
                    v-model="form.tokenSecret"
                    :label="$t('bookstack.settings.tokenSecret')"
                    input-class="w-full"
                />
                <p v-if="hasToken && !form.tokenId && !form.tokenSecret" class="mt-1 text-xs text-green-600">
                    {{ $t('bookstack.settings.tokenConfigured') }}
                </p>
            </div>

            <div class="flex gap-3">
                <MalioButton
                    :label="$t('bookstack.settings.save')"
                    button-class="w-auto px-4"
                    :disabled="isSaving"
                    @click="handleSave"
                />
                <MalioButton
                    variant="tertiary"
                    :label="$t('bookstack.settings.testConnection')"
                    button-class="w-auto px-4"
                    :disabled="isTesting"
                    @click="handleTest"
                />
            </div>

            <p v-if="testResult !== null" class="text-sm font-medium" :class="testResult ? 'text-green-600' : 'text-red-600'">
                {{ testResult ? $t('bookstack.settings.testSuccess') : $t('bookstack.settings.testFailed') }}
            </p>
        </form>
    </div>
</template>

<script setup lang="ts">
import { useBookStackService } from '~/modules/integration/services/bookstack'

const { getSettings, saveSettings, testConnection } = useBookStackService()

const form = reactive({
    url: '',
    tokenId: '',
    tokenSecret: '',
})

const hasToken = ref(false)
const isSaving = ref(false)
const isTesting = ref(false)
const testResult = ref<boolean | null>(null)

async function loadSettings() {
    const settings = await getSettings()
    form.url = settings.url ?? ''
    hasToken.value = settings.hasToken
}

async function handleSave() {
    isSaving.value = true
    try {
        const result = await saveSettings({
            url: form.url.trim() || null,
            tokenId: form.tokenId || null,
            tokenSecret: form.tokenSecret || null,
        })
        hasToken.value = result.hasToken
        form.tokenId = ''
        form.tokenSecret = ''
        testResult.value = null
    } finally {
        isSaving.value = false
    }
}

async function handleTest() {
    isTesting.value = true
    testResult.value = null
    try {
        const result = await testConnection()
        testResult.value = result.success
    } catch {
        testResult.value = false
    } finally {
        isTesting.value = false
    }
}

onMounted(() => {
    loadSettings()
})
</script>
