@extends('layouts.app')

@section('title', 'Bot Tester – WhatsApp Bot')

@section('content')
<div class="wa-bot-page">
    @include('whatsapp_bot._nav')

    <header class="setting-header">
        <h1>Bot Tester</h1>
        <p class="setting-subtitle">Enter a sample message to see the AI-generated response preview (Shopify catalog context). No message is sent.</p>
    </header>

    <section class="setting-card">
        <div class="wa-form-grid">
            <div class="wa-form-row">
                <label class="wa-form-label" for="test-message">Test message</label>
                <textarea id="test-message" class="wa-form-input" rows="3" placeholder="e.g. I want to see rings" maxlength="2000"></textarea>
            </div>
            <div class="wa-form-actions">
                <button type="button" id="run-test" class="btn btn-primary">Run test</button>
            </div>
        </div>
    </section>

    <section class="setting-card" id="test-result" style="margin-top: 1.5rem; display: none;">
        <h2 class="wa-subtitle">Result</h2>
        <div id="test-result-body"></div>
    </section>

    <section class="setting-card" id="test-error" style="margin-top: 1.5rem; display: none;">
        <div class="alert alert-error" id="test-error-body"></div>
    </section>
</div>
@push('styles')
<style>
.wa-bot-page { max-width: 640px; }
.wa-bot-nav { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; margin-bottom: 1.25rem; font-size: 0.9rem; }
.wa-bot-nav a { color: #2563eb; text-decoration: none; }
.wa-bot-nav a.active { font-weight: 700; color: #1d4ed8; }
.setting-header h1 { font-size: 1.5rem; font-weight: 700; margin: 0 0 0.5rem 0; color: #111; }
.setting-subtitle { margin: 0; font-size: 0.95rem; color: #4b5563; line-height: 1.5; }
.setting-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; padding: 1.5rem; }
.wa-form-grid { display: flex; flex-direction: column; gap: 1rem; }
.wa-form-row { display: flex; flex-direction: column; gap: 0.25rem; }
.wa-form-label { font-weight: 600; font-size: 0.9rem; color: #374151; }
.wa-form-input { padding: 0.5rem 0.75rem; border: 1px solid #d1d5db; border-radius: 6px; font-size: 1rem; max-width: 100%; }
.wa-form-hint { font-size: 0.8rem; color: #6b7280; }
.wa-form-actions { margin-top: 0.5rem; }
.wa-subtitle { font-size: 1.1rem; font-weight: 700; margin: 0 0 1rem 0; color: #111; }
.wa-result-row { margin-bottom: 0.75rem; }
.wa-result-label { font-weight: 600; font-size: 0.85rem; color: #374151; }
.wa-result-value { margin-top: 0.2rem; }
.wa-result-value code { background: #f3f4f6; padding: 0.15rem 0.4rem; border-radius: 4px; font-size: 0.9rem; }
.wa-result-preview { white-space: pre-wrap; word-break: break-word; background: #f9fafb; padding: 1rem; border-radius: 6px; margin-top: 0.5rem; border: 1px solid #e5e7eb; }
.wa-badge { display: inline-block; padding: 0.15rem 0.4rem; border-radius: 4px; font-size: 0.75rem; font-weight: 600; }
.wa-badge-ai { background: #dbeafe; color: #1d4ed8; }
</style>
@endpush
@push('scripts')
<script>
document.getElementById('run-test').addEventListener('click', function() {
    var message = document.getElementById('test-message').value.trim();
    var resultEl = document.getElementById('test-result');
    var resultBody = document.getElementById('test-result-body');
    var errorEl = document.getElementById('test-error');
    var errorBody = document.getElementById('test-error-body');
    errorEl.style.display = 'none';
    resultEl.style.display = 'none';
    if (!message) {
        errorBody.textContent = 'Please enter a test message.';
        errorEl.style.display = 'block';
        return;
    }
    var btn = this;
    btn.disabled = true;
    btn.textContent = 'Testing…';
    fetch('{{ route("whatsapp.bot.tester.run") }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'Accept': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        },
        body: JSON.stringify({ message: message })
    })
    .then(function(r) { return r.json(); })
    .then(function(data) {
        var sourceLabel = (data.response_source === 'ai') ? 'AI' : (data.response_source || '—');
        resultBody.innerHTML =
            '<div class="wa-result-row"><div class="wa-result-label">Normalized text</div><div class="wa-result-value"><code>' + (data.normalized_text || '—') + '</code></div></div>' +
            '<div class="wa-result-row"><div class="wa-result-label">Response source</div><div class="wa-result-value">' + sourceLabel + '</div></div>' +
            '<div class="wa-result-row"><div class="wa-result-label">Response preview</div><div class="wa-result-preview">' + (data.response_preview ? data.response_preview.replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/\n/g, '<br>') : '[empty]') + '</div></div>';
        resultEl.style.display = 'block';
    })
    .catch(function(err) {
        errorBody.textContent = 'Request failed. Check console or try again.';
        errorEl.style.display = 'block';
    })
    .finally(function() {
        btn.disabled = false;
        btn.textContent = 'Run test';
    });
});
</script>
@endpush
@endsection