<!--
|--------------------------------------------------------------------------
| Agência PSI — MathCaptchaChallenge (A#20 rev2)
|--------------------------------------------------------------------------
| Componente de captcha matemático invocado SOB DEMANDA quando a edge
| function retorna 403 captcha-required ou na primeira tentativa se o IP
| já está marcado como suspeito.
|
| Uso:
|   <MathCaptchaChallenge
|     v-model:id="captchaId"
|     v-model:answer="captchaAnswer"
|     :function-url="..."
|   />
|--------------------------------------------------------------------------
-->
<script setup>
import { ref, onMounted } from 'vue';
import InputNumber from 'primevue/inputnumber';
import Button from 'primevue/button';
import { supabase } from '@/lib/supabase/client';

const props = defineProps({
    id: { type: String, default: '' },
    answer: { type: [Number, null], default: null },
    autoLoad: { type: Boolean, default: true }
});

const emit = defineEmits(['update:id', 'update:answer']);

const challenge = ref({ id: '', question: '' });
const loading = ref(false);
const error = ref('');
const localAnswer = ref(props.answer);

async function loadChallenge() {
    loading.value = true;
    error.value = '';
    try {
        const { data, error: fnErr } = await supabase.functions.invoke('submit-patient-intake/captcha-challenge', {
            method: 'POST',
            body: {}
        });
        if (fnErr) throw fnErr;
        const ch = data?.challenge || data;
        challenge.value = { id: ch?.id || '', question: ch?.question || '' };
        emit('update:id', challenge.value.id);
        localAnswer.value = null;
        emit('update:answer', null);
    } catch (e) {
        error.value = e?.message || 'Não foi possível carregar a verificação.';
    } finally {
        loading.value = false;
    }
}

function onAnswerChange(v) {
    localAnswer.value = v;
    emit('update:answer', v);
}

onMounted(() => {
    if (props.autoLoad) loadChallenge();
});

defineExpose({ loadChallenge });
</script>

<template>
    <div class="rounded-xl border border-amber-400/30 bg-amber-400/5 p-4">
        <div class="flex items-center justify-between gap-2 mb-2">
            <div class="text-sm font-semibold text-slate-100">
                <i class="pi pi-shield mr-2 text-amber-300" />
                Verificação rápida
            </div>
            <Button icon="pi pi-refresh" text size="small" :loading="loading" @click="loadChallenge" v-tooltip.top="'Outra pergunta'" />
        </div>

        <p v-if="!challenge.question && !loading" class="text-xs text-slate-300">Carregando…</p>
        <p v-if="error" class="text-xs text-rose-300">{{ error }}</p>

        <div v-if="challenge.question" class="flex flex-col gap-2 sm:flex-row sm:items-center">
            <span class="text-base text-slate-100 font-medium">{{ challenge.question }}</span>
            <InputNumber
                :modelValue="localAnswer"
                @update:modelValue="onAnswerChange"
                placeholder="?"
                class="!w-32"
                :useGrouping="false"
                inputClass="text-center"
            />
        </div>

        <p class="mt-2 text-[11px] text-slate-400">Confirma que você é humano. Sem cookies, sem rastreio externo.</p>
    </div>
</template>
