@page "/playground"
@model Nalu.Web.Pages.PlaygroundModel
@{
    ViewData["Title"] = "Playground — NaLU AI";
    ViewData["Description"] = "Teste os validadores NaLU AI sem cadastro. 10 chamadas por dia grátis.";
}

<section class="bg-gradient-to-b from-slate-50 to-white pt-16 pb-10">
    <div class="max-w-4xl mx-auto px-4 sm:px-6">
        <h1 class="text-3xl font-extrabold text-gray-900 mb-2">Playground</h1>
        <p class="text-gray-500">Teste qualquer validador sem cadastro. <strong>10 chamadas por dia</strong>, grátis.</p>
    </div>
</section>

<section class="py-10 bg-white">
    <div class="max-w-4xl mx-auto px-4 sm:px-6">
        <div class="grid md:grid-cols-3 gap-6">

            <!-- Seletor de validador -->
            <div class="md:col-span-1">
                <div class="text-xs font-semibold text-gray-500 uppercase tracking-wide mb-3">Validador</div>
                <div class="space-y-1" id="validator-list">
                    @foreach (var v in new[] {
                        ("cpf", "validate_cpf", "3 cr."),
                        ("cep", "validate_cep", "3 cr."),
                        ("phone-br", "validate_phone_br", "3 cr."),
                        ("email", "validate_email", "3 cr."),
                        ("cnpj", "validate_cnpj", "3 cr."),
                        ("plate-br", "validate_plate_br", "3 cr."),
                        ("name", "validate_name", "3 cr."),
                        ("full-name", "validate_full_name", "3 cr."),
                        ("yes-no", "validate_yes_no", "3 cr."),
                        ("birthdate", "validate_birthdate", "3 cr."),
                        ("handoff", "validate_handoff", "3 cr."),
                        ("cancel-intent", "validate_cancel_intent", "3 cr."),
                        ("company-name", "validate_company_name", "3 cr."),
                        ("reply", "validate_reply", "5 cr."),
                    })
                    {
                        var isSelected = Model.SelectedValidator == v.Item1 || (Model.SelectedValidator == null && v.Item1 == "cpf");
                        <button
                            class="w-full text-left px-3 py-2 rounded-lg text-sm transition-colors @(isSelected ? "bg-nalu-600 text-white font-semibold" : "hover:bg-slate-50 text-gray-700")"
                            onclick="selectValidator('@v.Item1', this)">
                            <div class="font-mono text-xs">@v.Item2</div>
                            <div class="text-xs opacity-50">@v.Item3</div>
                        </button>
                    }
                </div>
            </div>

            <!-- Form + resultado -->
            <div class="md:col-span-2 space-y-3">

                <!-- Contexto do agente (agent_context) -->
                <div>
                    <div class="flex items-center justify-between mb-1">
                        <label class="text-xs font-semibold text-gray-600">Contexto do agente</label>
                        <span class="text-xs text-gray-400 font-mono">agent_context</span>
                    </div>
                    <textarea id="agent-context" rows="2"
                              class="w-full border border-gray-200 rounded-xl px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-nalu-500 resize-none text-gray-600"
                              placeholder="Descreva o objetivo do seu agente..."></textarea>
                </div>

                <!-- Pergunta do agente (agent_input) — oculto para validate_reply -->
                <div id="agent-input-wrap">
                    <div class="flex items-center justify-between mb-1">
                        <label class="text-xs font-semibold text-gray-600">Pergunta do agente</label>
                        <span class="text-xs text-gray-400 font-mono">agent_input</span>
                    </div>
                    <input id="agent-input" type="text"
                           class="w-full border border-gray-200 rounded-xl px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-nalu-500" />
                </div>

                <!-- Mensagem do agente — só validate_reply -->
                <div id="agent-message-wrap" class="hidden">
                    <div class="flex items-center justify-between mb-1">
                        <label class="text-xs font-semibold text-gray-600">Mensagem do agente</label>
                        <span class="text-xs text-gray-400 font-mono">agent_message</span>
                    </div>
                    <input id="agent-message" type="text"
                           class="w-full border border-gray-200 rounded-xl px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-nalu-500" />
                </div>

                <!-- Resposta do usuário -->
                <div>
                    <div class="flex items-center justify-between mb-1">
                        <label class="text-xs font-semibold text-gray-600" id="user-label">Resposta do usuário</label>
                        <span class="text-xs text-gray-400 font-mono" id="user-field-name">user_input</span>
                    </div>
                    <input id="user-input" type="text"
                           class="w-full border border-gray-200 rounded-xl px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-nalu-500"
                           placeholder="O que o usuário respondeu..." />
                </div>

                <!-- Exemplos rápidos -->
                <div id="quick-examples" class="flex flex-wrap gap-2 min-h-[28px]"></div>

                <!-- Idioma + botão -->
                <div class="flex items-center gap-3">
                    <select id="language" class="border border-gray-200 rounded-xl px-3 py-2.5 text-sm text-gray-600 focus:outline-none focus:ring-2 focus:ring-nalu-500">
                        <option value="pt-BR">🇧🇷 pt-BR</option>
                        <option value="en-US">🇺🇸 en-US</option>
                        <option value="es-ES">🇪🇸 es-ES</option>
                    </select>
                    <button onclick="runValidator()"
                            class="flex-1 bg-nalu-600 text-white font-bold py-2.5 rounded-xl hover:bg-nalu-700 transition-colors text-sm">
                        Testar →
                    </button>
                </div>

                <!-- Resultado -->
                <div id="result-area" class="hidden">
                    <div class="text-xs font-semibold text-gray-500 uppercase tracking-wide mb-2">Resposta da API</div>
                    <pre id="result-json" class="bg-slate-900 text-slate-300 rounded-xl p-5 text-sm overflow-x-auto leading-relaxed"></pre>
                    <div id="rate-limit-warning" class="hidden mt-2 text-xs text-amber-600 bg-amber-50 px-3 py-2 rounded-lg">
                        ⚠️ Limite de 10 chamadas por dia atingido.
                        <a href="/login" class="underline font-semibold">Crie uma conta</a> para 3.000 créditos grátis/mês.
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

@section Scripts {
<script>
const validators = {
    'cpf': {
        agentContext: 'Você é um agente de cobrança. Precisa do CPF do cliente para consultar o débito.',
        agentInput:   'Para consultar seu débito, preciso do seu CPF. Pode me informar?',
        agentMessage: '',
        userField:    'user_input',
        examples: ['123.456.789-09', 'meu cpf é 111.444.777-35', 'não tenho cpf', 'o que é CPF?'],
    },
    'cep': {
        agentContext: 'Você é um agente de entregas. Precisa do CEP para calcular o frete.',
        agentInput:   'Qual o CEP para entrega?',
        agentMessage: '',
        userField:    'user_input',
        examples: ['01310-100', 'moro no cep 04538-133', '01310100'],
    },
    'phone-br': {
        agentContext: 'Você é um agente de cadastro. Precisa do celular para enviar confirmação por SMS.',
        agentInput:   'Qual é o seu número de celular com DDD?',
        agentMessage: '',
        userField:    'user_input',
        examples: ['(11) 99999-8888', '11988887777', 'não tenho celular'],
    },
    'email': {
        agentContext: 'Você é um agente de onboarding. Precisa do e-mail para enviar o link de acesso.',
        agentInput:   'Qual é o seu e-mail para envio do link de acesso?',
        agentMessage: '',
        userField:    'user_input',
        examples: ['fulano@gmail.com', 'meu email é fulano@empresa.com.br', 'nao tenho email'],
    },
    'cnpj': {
        agentContext: 'Você é um agente de crédito empresarial. Precisa do CNPJ para consultar o limite.',
        agentInput:   'Qual o CNPJ da sua empresa?',
        agentMessage: '',
        userField:    'user_input',
        examples: ['11.222.333/0001-81', '11222333000181'],
    },
    'plate-br': {
        agentContext: 'Você é um agente de trânsito. Precisa da placa do veículo (padrão antigo ou Mercosul) para consultar multas.',
        agentInput:   'Qual a placa do seu veículo?',
        agentMessage: '',
        userField:    'user_input',
        examples: ['ABC-1234', 'ABC1D23', 'meu carro é prata ABC1234'],
    },
    'name': {
        agentContext: 'Você é um agente de atendimento ao cliente. Precisa do nome para personalizar o atendimento.',
        agentInput:   'Como posso te chamar?',
        agentMessage: '',
        userField:    'user_input',
        examples: ['Carlos', 'me chamo João', 'pode me chamar de Cá', 'João Silva'],
    },
    'full-name': {
        agentContext: 'Você é um agente de cadastro. Precisa do nome completo (com sobrenome) para abrir o cadastro.',
        agentInput:   'Pode me dizer seu nome completo?',
        agentMessage: '',
        userField:    'user_input',
        examples: ['João Silva', 'me chamo Maria Oliveira Santos', 'Carlos', 'Céu Azul de Oliveira'],
    },
    'yes-no': {
        agentContext: 'Você é um agente de vendas. Precisa de uma confirmação clara do cliente para prosseguir com o pedido.',
        agentInput:   'Confirma o pedido de R$250? Será debitado no cartão final 1234.',
        agentMessage: '',
        userField:    'user_input',
        examples: ['sim', 'claro, pode mandar!', 'não, obrigado', 'acho que sim'],
    },
    'birthdate': {
        agentContext: 'Você é um agente de planos de saúde. Precisa da data de nascimento para calcular a faixa etária e o valor da mensalidade.',
        agentInput:   'Qual é a sua data de nascimento?',
        agentMessage: '',
        userField:    'user_input',
        examples: ['15/03/1990', 'quinze de março de noventa', 'tenho 36 anos'],
    },
    'handoff': {
        agentContext: 'Você é um agente de suporte técnico. Deve identificar quando o cliente quer ser transferido para um atendente humano.',
        agentInput:   'Posso te ajudar a resolver isso por aqui. O que aconteceu com seu produto?',
        agentMessage: '',
        userField:    'user_input',
        examples: ['quero falar com uma pessoa', 'me passa para o atendente', 'esse bot não resolve nada'],
    },
    'cancel-intent': {
        agentContext: 'Você é um agente de retenção. Deve identificar quando o cliente quer cancelar o serviço para acionar o fluxo de retenção.',
        agentInput:   'Como posso te ajudar hoje?',
        agentMessage: '',
        userField:    'user_input',
        examples: ['quero cancelar minha assinatura', 'para tudo', 'não quero mais esse plano'],
    },
    'company-name': {
        agentContext: 'Você é um agente de prospecção B2B. Precisa do nome da empresa do prospect para pesquisar no CRM.',
        agentInput:   'Qual é o nome da sua empresa?',
        agentMessage: '',
        userField:    'user_input',
        examples: ['NaLU Tecnologia LTDA', 'trabalho na Embrapa', 'é a Silva & Cia'],
    },
    'reply': {
        agentContext: 'Você é um agente de negociação de parcelas. O cliente propôs um número e você precisa entender se é uma contraproposta de quantidade de parcelas ou outro dado.',
        agentInput:   '',
        agentMessage: 'Posso parcelar em 20x de R$100. Topa?',
        userField:    'user_reply',
        examples: ['Bora em 48?', 'Pode mandar', 'Prefiro falar com alguém de verdade', 'É 200'],
    },
};

let currentSlug = 'cpf';

function selectValidator(slug, btn) {
    currentSlug = slug;
    document.querySelectorAll('#validator-list button').forEach(b => {
        b.classList.remove('bg-nalu-600', 'text-white', 'font-semibold');
        b.classList.add('hover:bg-slate-50', 'text-gray-700');
    });
    btn.classList.remove('hover:bg-slate-50', 'text-gray-700');
    btn.classList.add('bg-nalu-600', 'text-white', 'font-semibold');

    const v = validators[slug];
    const isReply = slug === 'reply';

    // agent_context
    document.getElementById('agent-context').value = v.agentContext;

    // agent_input vs agent_message
    document.getElementById('agent-input-wrap').classList.toggle('hidden', isReply);
    document.getElementById('agent-message-wrap').classList.toggle('hidden', !isReply);
    document.getElementById('agent-input').value   = v.agentInput;
    document.getElementById('agent-message').value = v.agentMessage;

    // user field label
    document.getElementById('user-field-name').textContent = v.userField;
    document.getElementById('user-input').value = '';

    // quick examples
    const ex = document.getElementById('quick-examples');
    ex.innerHTML = '';
    v.examples.forEach(e => {
        const b = document.createElement('button');
        b.className = 'text-xs bg-slate-100 hover:bg-nalu-50 hover:text-nalu-700 text-gray-600 px-2 py-1 rounded-lg transition-colors';
        b.textContent = e;
        b.onclick = () => { document.getElementById('user-input').value = e; };
        ex.appendChild(b);
    });

    document.getElementById('result-area').classList.add('hidden');
}

async function runValidator() {
    const userInput = document.getElementById('user-input').value.trim();
    if (!userInput) return;

    const language      = document.getElementById('language').value;
    const agentContext  = document.getElementById('agent-context').value.trim();
    const isReply       = currentSlug === 'reply';

    let body;
    if (isReply) {
        body = {
            agent_message:  document.getElementById('agent-message').value.trim(),
            user_reply:     userInput,
            agent_context:  agentContext,
            language,
        };
    } else {
        body = {
            agent_input:    document.getElementById('agent-input').value.trim(),
            user_input:     userInput,
            agent_context:  agentContext,
            language,
        };
    }

    document.getElementById('result-area').classList.remove('hidden');
    document.getElementById('result-json').textContent = 'Aguardando…';
    document.getElementById('rate-limit-warning').classList.add('hidden');

    try {
        const res = await fetch(`/v1/playground/extract/${currentSlug}`, {
            method:  'POST',
            headers: { 'Content-Type': 'application/json' },
            body:    JSON.stringify(body),
        });

        if (res.status === 429) {
            document.getElementById('result-json').textContent = '{ "error": "Limite diário atingido" }';
            document.getElementById('rate-limit-warning').classList.remove('hidden');
            return;
        }

        const text = await res.text();
        try {
            const data = JSON.parse(text);
            document.getElementById('result-json').textContent = JSON.stringify(data, null, 2);
        } catch {
            document.getElementById('result-json').textContent =
                `HTTP ${res.status}\n\n${text || '(sem corpo)'}`;
        }
    } catch (e) {
        document.getElementById('result-json').textContent = `{ "error": "Falha na requisição: ${e.message}" }`;
    }
}

// init
selectValidator('cpf', document.querySelector('#validator-list button'));
</script>
}
