@extends('root')
@section('title', 'Konfigurasi AI - ' . ($wabaPool->whatsapp_name ?: $wabaPool->phone_number))

@section('content')
<div class="container-fluid">
    @include('components.breadcrumb', [
        'title' => 'Konfigurasi AI',
        'links' => [
            ['label' => 'Autoreply', 'url' => route('client.autoreply.index')],
            ['label' => $wabaPool->whatsapp_name ?: $wabaPool->phone_number, 'url' => route('client.autoreply.settings', $wabaPool)]
        ],
        'current' => 'Konfigurasi AI'
    ])

    <div class="row">
        <div class="col-lg-3 mb-4">
            <div class="card border-0 shadow-sm">
                <div class="card-body p-4 bg-primary rounded-top text-center">
                    <div class="rounded-circle bg-white p-3 d-inline-block mb-2 text-primary">
                        <i class="ti ti-brand-whatsapp fs-2"></i>
                    </div>
                    <h5 class="text-white mb-0">{{ $wabaPool->whatsapp_name ?: 'WABA' }}</h5>
                    <small class="text-white-50">{{ $wabaPool->phone_number }}</small>
                </div>
                <div class="list-group list-group-flush">
                    <a href="{{ route('client.autoreply.settings', $wabaPool) }}" class="list-group-item list-group-item-action border-0 py-3 {{ request()->routeIs('client.autoreply.settings') ? 'active-menu bg-light-primary text-primary fw-bold' : '' }}">
                        <i class="ti ti-settings me-3"></i> Pengaturan Umum
                    </a>
                    <a href="{{ route('client.autoreply.ai-config', $wabaPool) }}" class="list-group-item list-group-item-action border-0 py-3 {{ request()->routeIs('client.autoreply.ai-config') ? 'active-menu bg-light-primary text-primary fw-bold' : '' }}">
                        <i class="ti ti-robot me-3"></i> Konfigurasi AI
                    </a>
                    <a href="{{ route('client.autoreply.buttons', $wabaPool) }}" class="list-group-item list-group-item-action border-0 py-3 {{ request()->routeIs('client.autoreply.buttons') ? 'active-menu bg-light-primary text-primary fw-bold' : '' }}">
                        <i class="ti ti-click me-3"></i> Button Menu
                    </a>
                    <a href="{{ route('client.autoreply.logs', $wabaPool) }}" class="list-group-item list-group-item-action border-0 py-3 {{ request()->routeIs('client.autoreply.logs') ? 'active-menu bg-light-primary text-primary fw-bold' : '' }}">
                        <i class="ti ti-history me-3"></i> Log Aktivitas
                    </a>
                </div>
            </div>

            @if(!$aiAvailable)
            <div class="alert alert-warning mt-4">
                <i class="ti ti-alert-triangle me-2"></i><strong>API Key tidak tersedia.</strong>
            </div>
            @endif
        </div>

        <div class="col-lg-9">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0"><i class="ti ti-robot text-info me-2"></i>Konfigurasi AI Response</h5>
                </div>
                <div class="card-body">
                    <form id="aiConfigForm">
                        <div class="mb-4">
                            <label class="form-label fw-bold">System Prompt</label>
                            <textarea class="form-control font-monospace" name="system_prompt" rows="6" maxlength="2000" required>{{ $aiConfig->system_prompt }}</textarea>
                            <small class="text-muted">Gunakan {customer_name} dan {business_name} sebagai placeholder.</small>
                        </div>

                        <div class="row g-4">
                            <div class="col-md-6">
                                <label class="form-label fw-bold">Model AI</label>
                                <select class="form-select" name="model" required>
                                    @foreach($availableModels as $modelId => $modelName)
                                    <option value="{{ $modelId }}" {{ $aiConfig->model === $modelId ? 'selected' : '' }}>{{ $modelName }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-bold">Bahasa Response</label>
                                <select class="form-select" name="language_mode" required>
                                    <option value="auto" {{ $aiConfig->language_mode === 'auto' ? 'selected' : '' }}>Auto</option>
                                    <option value="id" {{ $aiConfig->language_mode === 'id' ? 'selected' : '' }}>Indonesia</option>
                                    <option value="en" {{ $aiConfig->language_mode === 'en' ? 'selected' : '' }}>English</option>
                                </select>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label fw-bold">Temperature <span class="badge bg-info" id="tempValue">{{ $aiConfig->temperature }}</span></label>
                                <input type="range" class="form-range" name="temperature" min="0" max="2" step="0.1" value="{{ $aiConfig->temperature }}">
                            </div>
                            <div class="col-md-4">
                                <label class="form-label fw-bold">Max Tokens</label>
                                <input type="number" class="form-control" name="max_tokens" min="50" max="500" value="{{ $aiConfig->max_tokens }}" required>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label fw-bold">Confidence Threshold <span class="badge bg-warning text-dark" id="confValue">{{ $aiConfig->confidence_threshold * 100 }}%</span></label>
                                <input type="range" class="form-range" name="confidence_threshold" min="0" max="1" step="0.05" value="{{ $aiConfig->confidence_threshold }}">
                            </div>
                        </div>

                        <hr class="my-4">

                        <div class="mb-4">
                            <label class="form-label fw-bold">Topik Terlarang</label>
                            <input type="text" class="form-control" name="forbidden_topics" value="{{ implode(',', $aiConfig->forbidden_topics ?? []) }}" placeholder="harga pasti, garansi uang">
                            <small class="text-muted">Pisahkan dengan koma</small>
                        </div>

                        <div class="mb-4">
                            <label class="form-label fw-bold">Fallback Response</label>
                            <textarea class="form-control" name="fallback_response" rows="2" maxlength="500">{{ $aiConfig->fallback_response ?? 'Mohon maaf, saya akan menghubungkan Anda dengan tim kami.' }}</textarea>
                        </div>

                        <div class="d-flex gap-2">
                            <button type="submit" class="btn btn-primary"><i class="ti ti-device-floppy me-1"></i> Simpan</button>
                            <button type="button" class="btn btn-outline-info" id="testAiBtn"><i class="ti ti-test-pipe me-1"></i> Test AI</button>
                        </div>
                    </form>
                </div>
            </div>

            <div class="card mt-4" id="testPanel" style="display:none">
                <div class="card-header bg-info text-white"><h6 class="mb-0">Test AI Response</h6></div>
                <div class="card-body">
                    <div class="input-group mb-3">
                        <input type="text" class="form-control" id="testMessage" placeholder="Ketik pesan test...">
                        <button class="btn btn-info" id="runTestBtn"><i class="ti ti-send"></i></button>
                    </div>
                    <div id="testResult" class="bg-light p-3 rounded" style="display:none"></div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
$(document).ready(function() {
    $('input[name="temperature"]').on('input', function() { $('#tempValue').text($(this).val()); });
    $('input[name="confidence_threshold"]').on('input', function() { $('#confValue').text(Math.round($(this).val() * 100) + '%'); });

    $('#aiConfigForm').on('submit', function(e) {
        e.preventDefault();
        $.ajax({
            url: '{{ route('client.autoreply.ai-config.update', $wabaPool) }}',
            method: 'POST',
            data: {
                system_prompt: $('textarea[name="system_prompt"]').val(),
                model: $('select[name="model"]').val(),
                language_mode: $('select[name="language_mode"]').val(),
                temperature: parseFloat($('input[name="temperature"]').val()),
                max_tokens: parseInt($('input[name="max_tokens"]').val()),
                confidence_threshold: parseFloat($('input[name="confidence_threshold"]').val()),
                forbidden_topics: $('input[name="forbidden_topics"]').val().split(',').map(s => s.trim()).filter(s => s),
                fallback_response: $('textarea[name="fallback_response"]').val()
            },
            headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
            success: function(response) { toastr.success(response.message); },
            error: function(xhr) { toastr.error(xhr.responseJSON?.message || 'Error'); }
        });
    });

    $('#testAiBtn').on('click', function() { $('#testPanel').slideToggle(); });
    
    $('#runTestBtn').on('click', function() {
        const message = $('#testMessage').val();
        if (!message) return toastr.warning('Masukkan pesan');
        $.ajax({
            url: '{{ route('client.autoreply.test') }}',
            method: 'POST',
            data: { waba_pool_id: {{ $wabaPool->id }}, message: message, test_type: 'ai' },
            headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
            success: function(r) { $('#testResult').show().html(r.success ? r.reply : '<span class="text-danger">' + r.error + '</span>'); },
            error: function() { $('#testResult').show().html('<span class="text-danger">Error</span>'); }
        });
    });
});
</script>
</script>
@endpush

@push('styles')
<style>
.active-menu {
    border-left: 3px solid var(--bs-primary) !important;
    background-color: var(--bs-light) !important;
}
.btn-check:checked + .label-card {
    border-color: var(--bs-primary);
}
</style>
@endpush