@extends('layouts.app')

@section('title', 'Pengaturan Chatbot AI')

@section('content')

<div class="page-header">
    <div>
        <h1 class="page-title">Pengaturan Chatbot AI</h1>
        <p class="page-subtitle">Konfigurasi behavior, prompt, dan eskalasi chatbot</p>
    </div>
    <a href="{{ route('chatbot.logs') }}" class="btn btn-secondary">
        <svg fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg>
        Lihat Log
    </a>
</div>

<div style="display:grid;grid-template-columns:1fr 300px;gap:1.25rem;align-items:start;">

    {{-- Main settings form --}}
    <div style="display:flex;flex-direction:column;gap:1rem;">

        {{-- System Prompt --}}
        <div class="card">
            <div class="card-header">
                <span class="card-title">System Prompt</span>
                <span class="badge badge-{{ \App\Models\AppSetting::get('wa_bot_enabled') ? 'green' : 'gray' }}">
                    Bot {{ \App\Models\AppSetting::get('wa_bot_enabled') ? 'Aktif' : 'Nonaktif' }}
                </span>
            </div>
            <div class="card-body">
                <form method="POST" action="{{ route('chatbot.settings.update') }}">
                    @csrf @method('PUT')

                    <div class="form-group">
                        <label class="form-label">System Prompt <span class="required">*</span></label>
                        <textarea name="groq_system_prompt" class="form-control" rows="8"
                                  placeholder="Instruksi untuk AI chatbot tentang karakter, batasan, dan cara merespons...">{{ old('groq_system_prompt', $settings['groq_system_prompt'] ?? '') }}</textarea>
                        <p class="field-hint">
                            Prompt ini membentuk karakter dan perilaku chatbot. Semakin spesifik, semakin baik hasilnya.
                            Contoh: "Kamu adalah asisten Naramedic. Selalu gunakan bahasa Indonesia yang ramah dan profesional."
                        </p>
                    </div>

                    <div class="form-group">
                        <label class="form-label">Kata Kunci Eskalasi ke Agent</label>
                        <input type="text" name="escalation_keywords" class="form-control"
                               value="{{ old('escalation_keywords', implode(', ', (array)($keywords ?? []))) }}"
                               placeholder="harga, diskon, beli, komplain, agent, manusia, cs">
                        <p class="field-hint">Pisahkan dengan koma. Jika terdeteksi dalam pesan, bot akan handoff ke agent manusia.</p>
                    </div>

                    <div class="form-group">
                        <label class="form-label">Pesan Eskalasi</label>
                        <textarea name="escalation_message" class="form-control" rows="2"
                                  placeholder="Pesan yang dikirim saat bot meneruskan ke agent...">{{ old('escalation_message', $settings['escalation_message'] ?? '') }}</textarea>
                        <p class="field-hint">Pesan ini dikirim otomatis ke customer saat terjadi eskalasi ke agent.</p>
                    </div>

                    <button type="submit" class="btn btn-primary">
                        <svg fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
                        Simpan Pengaturan Chatbot
                    </button>
                </form>
            </div>
        </div>

        {{-- Test Chatbot --}}
        <div class="card">
            <div class="card-header"><span class="card-title">Test Chatbot Langsung</span></div>
            <div class="card-body">
                <div style="background:var(--gray-50);border-radius:var(--radius-lg);padding:1rem;margin-bottom:1rem;min-height:120px;max-height:240px;overflow-y:auto;display:flex;flex-direction:column;gap:.625rem;" id="testChatArea">
                    <div style="text-align:center;color:var(--gray-400);font-size:.8125rem;margin:auto;">Ketik pesan untuk test respons AI</div>
                </div>
                <div style="display:flex;gap:.625rem;">
                    <input type="text" id="testInput" class="form-control"
                           placeholder="Ketik pesan test..." style="flex:1;">
                    <button class="btn btn-primary" onclick="testChat()" id="testBtn">Kirim</button>
                </div>
                <p class="field-hint" style="margin-top:.5rem;">Test menggunakan prompt & model yang tersimpan saat ini.</p>
            </div>
        </div>
    </div>

    {{-- Right sidebar: model info & quick links --}}
    <div style="display:flex;flex-direction:column;gap:1rem;">

        {{-- Model Info --}}
        <div class="card">
            <div class="card-header"><span class="card-title">Konfigurasi Model</span></div>
            <div class="card-body" style="display:flex;flex-direction:column;gap:.75rem;">
                <div>
                    <div class="text-small text-muted">Model Aktif</div>
                    <div style="font-size:.875rem;font-weight:500;color:var(--gray-800);margin-top:.25rem;">
                        {{ $settings['groq_model'] ?? 'llama3-70b-8192' }}
                    </div>
                </div>
                <div>
                    <div class="text-small text-muted">Temperature</div>
                    <div style="font-size:.875rem;color:var(--gray-800);margin-top:.25rem;">
                        {{ $settings['groq_temperature'] ?? '0.7' }}
                        <span class="text-muted text-small">(0 = deterministik, 1+ = kreatif)</span>
                    </div>
                </div>
                <div>
                    <div class="text-small text-muted">Max Tokens Respons</div>
                    <div style="font-size:.875rem;color:var(--gray-800);margin-top:.25rem;">{{ $settings['groq_max_tokens'] ?? '500' }} token</div>
                </div>
                <div>
                    <div class="text-small text-muted">Konteks Percakapan</div>
                    <div style="font-size:.875rem;color:var(--gray-800);margin-top:.25rem;">{{ $settings['groq_max_context_messages'] ?? '10' }} pesan terakhir</div>
                </div>
                <div>
                    <div class="text-small text-muted">API Key</div>
                    <div style="font-size:.875rem;color:var(--gray-800);margin-top:.25rem;">
                        @if(!empty($settings['groq_api_key']))
                        <span style="color:var(--success);">✓ Terkonfigurasi</span>
                        @else
                        <span style="color:var(--danger);">⚠ Belum dikonfigurasi</span>
                        @endif
                    </div>
                </div>
                <a href="{{ route('settings.index') }}?tab=groq" class="btn btn-secondary btn-sm" style="justify-content:center;margin-top:.25rem;">
                    Edit Konfigurasi Model →
                </a>
            </div>
        </div>

        {{-- Bot Status --}}
        <div class="card">
            <div class="card-header"><span class="card-title">Status Fonnte WA</span></div>
            <div class="card-body" style="display:flex;flex-direction:column;gap:.75rem;">
                <div>
                    <div class="text-small text-muted">Token API</div>
                    <div style="font-size:.875rem;margin-top:.25rem;">
                        @if(\App\Models\AppSetting::get('fonnte_token'))
                        <span style="color:var(--success);">✓ Terkonfigurasi</span>
                        @else
                        <span style="color:var(--danger);">⚠ Belum dikonfigurasi</span>
                        @endif
                    </div>
                </div>
                <div>
                    <div class="text-small text-muted">Webhook URL</div>
                    <div style="margin-top:.25rem;">
                        <code style="font-size:.75rem;background:var(--gray-100);padding:4px 8px;border-radius:4px;display:block;word-break:break-all;color:var(--gray-700);">
                            {{ url('webhook/fonnte') }}
                        </code>
                    </div>
                </div>
                <div>
                    <div class="text-small text-muted">Jam Operasional</div>
                    <div style="font-size:.875rem;color:var(--gray-800);margin-top:.25rem;">
                        {{ \App\Models\AppSetting::get('wa_working_hours_start', '08:00') }} –
                        {{ \App\Models\AppSetting::get('wa_working_hours_end', '17:00') }} WIB
                    </div>
                </div>
                <div>
                    <div class="text-small text-muted">Status Sekarang</div>
                    @php
                    $start = \App\Models\AppSetting::get('wa_working_hours_start', '08:00');
                    $end   = \App\Models\AppSetting::get('wa_working_hours_end',   '17:00');
                    $now   = now()->format('H:i');
                    $inHours = $now >= $start && $now <= $end;
                    @endphp
                    <div style="margin-top:.25rem;">
                        <span class="badge badge-{{ $inHours ? 'green' : 'gray' }}">
                            {{ $inHours ? '🟢 Dalam Jam Operasional' : '⚫ Di Luar Jam Operasional' }}
                        </span>
                    </div>
                </div>
                <a href="{{ route('settings.index') }}?tab=fonnte" class="btn btn-secondary btn-sm" style="justify-content:center;margin-top:.25rem;">
                    Edit Konfigurasi Fonnte →
                </a>
            </div>
        </div>

        {{-- Panduan --}}
        <div class="card">
            <div class="card-header"><span class="card-title">Tips System Prompt</span></div>
            <div class="card-body">
                <div style="font-size:.8125rem;color:var(--gray-600);line-height:1.7;display:flex;flex-direction:column;gap:.5rem;">
                    <div>✅ Tentukan identitas bot: nama, perusahaan, karakter</div>
                    <div>✅ Batasan bahasa: gunakan Bahasa Indonesia formal/informal</div>
                    <div>✅ Batasan topik: hanya jawab yang relevan</div>
                    <div>✅ Instruksi eskalasi: kapan harus minta agent</div>
                    <div>✅ Format respons: singkat, padat, tidak bertele-tele</div>
                    <div style="border-top:1px solid var(--gray-100);padding-top:.5rem;margin-top:.25rem;">
                        🔑 Semakin spesifik prompt = respons semakin akurat
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script>
var testHistory = [];

function testChat() {
    var input   = document.getElementById('testInput');
    var btn     = document.getElementById('testBtn');
    var area    = document.getElementById('testChatArea');
    var message = input.value.trim();
    if (!message) return;

    // Clear placeholder
    if (area.querySelector('div[style*="margin:auto"]')) area.innerHTML = '';

    // Add user bubble
    var userBubble = document.createElement('div');
    userBubble.style.cssText = 'display:flex;justify-content:flex-end;';
    userBubble.innerHTML = '<div style="background:var(--primary);color:white;padding:.5rem .875rem;border-radius:12px 0 12px 12px;font-size:.875rem;max-width:80%;">' + escHtml(message) + '</div>';
    area.appendChild(userBubble);

    // Loading bubble
    var loadBubble = document.createElement('div');
    loadBubble.id = 'testLoading';
    loadBubble.innerHTML = '<div style="background:var(--white);border:1px solid var(--gray-200);padding:.5rem .875rem;border-radius:0 12px 12px 12px;font-size:.875rem;color:var(--gray-500);">🤖 Memproses...</div>';
    area.appendChild(loadBubble);
    area.scrollTop = area.scrollHeight;

    input.value = '';
    btn.disabled = true;
    testHistory.push({ role: 'user', content: message });

    fetch('/wa/chatbot/test', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrf, 'Accept': 'application/json' },
        body: JSON.stringify({ message: message, history: testHistory }),
    })
    .then(function(r) { return r.json(); })
    .then(function(data) {
        document.getElementById('testLoading')?.remove();
        btn.disabled = false;

        var reply = data.reply || 'Tidak ada respons.';
        testHistory.push({ role: 'assistant', content: reply });

        var aiBubble = document.createElement('div');
        aiBubble.innerHTML = '<div style="background:var(--white);border:1px solid var(--gray-200);padding:.5rem .875rem;border-radius:0 12px 12px 12px;font-size:.875rem;max-width:80%;">'
            + '<div style="font-size:.6875rem;color:var(--primary);font-weight:600;margin-bottom:2px;">🤖 AI</div>'
            + '<div style="white-space:pre-wrap;color:var(--gray-800);">' + escHtml(reply) + '</div>'
            + (data.escalate ? '<div style="font-size:.6875rem;color:var(--warning);margin-top:4px;">⚡ Akan dieskalasi ke agent</div>' : '')
            + (data.response_ms ? '<div style="font-size:.6875rem;color:var(--gray-400);margin-top:3px;">' + data.response_ms + 'ms</div>' : '')
            + '</div>';
        area.appendChild(aiBubble);
        area.scrollTop = area.scrollHeight;
    })
    .catch(function() {
        document.getElementById('testLoading')?.remove();
        btn.disabled = false;
        var errBubble = document.createElement('div');
        errBubble.innerHTML = '<div style="background:var(--danger-light);border:1px solid #fca5a5;padding:.5rem .875rem;border-radius:0 12px 12px 12px;font-size:.875rem;color:var(--danger);">Gagal terhubung ke AI. Periksa API key.</div>';
        area.appendChild(errBubble);
        area.scrollTop = area.scrollHeight;
    });
}

function escHtml(str) {
    return String(str||'').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
}

document.getElementById('testInput').addEventListener('keydown', function(e) {
    if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); testChat(); }
});
</script>
@endpush