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

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

            <div>
                <MalioInputText
                    v-model="form.token"
                    :label="$t('gitea.settings.token')"
                    :placeholder="$t('gitea.settings.tokenPlaceholder')"
                    input-class="w-full"
                    type="password"
                />
                <p v-if="hasToken && !form.token" class="mt-1 text-xs text-green-600">
                    {{ $t('gitea.settings.tokenConfigured') }}
                </p>
            </div>

            <div class="flex gap-3">
                <button
                    type="submit"
                    class="rounded-md bg-primary-500 px-4 py-2 text-sm font-semibold text-white hover:bg-secondary-500 disabled:opacity-50"
                    :disabled="isSaving"
                >
                    {{ $t('gitea.settings.save') }}
                </button>
                <button
                    type="button"
                    class="rounded-md border border-neutral-300 px-4 py-2 text-sm font-semibold text-neutral-700 hover:bg-neutral-50 disabled:opacity-50"
                    :disabled="isTesting"
                    @click="handleTest"
                >
                    {{ $t('gitea.settings.testConnection') }}
                </button>
            </div>

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

<script setup lang="ts">
import { useGiteaService } from '~/services/gitea'

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

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

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,
            token: form.token || null,
        })
        hasToken.value = result.hasToken
        form.token = ''
        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>
