@extends('layouts.admin')

@section('title', 'Chatbot - Configurações')

@section('content')
<div class="container-fluid px-4">
    <!-- Page Heading -->
    <div class="d-sm-flex align-items-center justify-content-between mb-4">
        <h1 class="h3 text-gray-800">
            <i class="bi bi-robot me-2"></i>Chatbot - Configurações
        </h1>
        <a href="{{ route('admin.chatbot.index') }}" class="btn btn-secondary btn-sm">
            <i class="bi bi-arrow-left me-1"></i>Base de Conhecimento
        </a>
    </div>

    @if(session('success'))
    <div class="alert alert-success alert-dismissible fade show" role="alert">
        {{ session('success') }}
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
    @endif

    @if($errors->any())
    <div class="alert alert-danger">
        <ul class="mb-0">
            @foreach($errors->all() as $error)
            <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
    @endif

    @php
        $totalTokens = (int) \App\Models\Setting::get('chatbot_total_tokens_used', 0);
        $totalMessages = \App\Modules\Chatbot\Models\ChatbotMessage::where('role', 'assistant')->count();
        $totalConversations = \App\Modules\Chatbot\Models\ChatbotConversation::whereNotNull('visitor_name')->count();
    @endphp

    <!-- Token Usage Stats -->
    <div class="row mb-4">
        <div class="col-xl-4 col-md-6 mb-4">
            <div class="card border-left-primary shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">Total de Tokens Consumidos</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ number_format($totalTokens, 0, ',', '.') }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="bi bi-cpu text-primary" style="font-size: 2rem;"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-4 col-md-6 mb-4">
            <div class="card border-left-success shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-success text-uppercase mb-1">Respostas da IA</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ number_format($totalMessages, 0, ',', '.') }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="bi bi-robot text-success" style="font-size: 2rem;"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-4 col-md-6 mb-4">
            <div class="card border-left-info shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-info text-uppercase mb-1">Conversas com Visitantes</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ number_format($totalConversations, 0, ',', '.') }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="bi bi-chat-dots text-info" style="font-size: 2rem;"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <form action="{{ route('admin.chatbot.settings.update') }}" method="POST">
        @csrf
        @method('POST')

        <!-- General Settings -->
        <div class="card shadow mb-4">
            <div class="card-header py-3">
                <h6 class="m-0 font-weight-bold text-primary">
                    <i class="bi bi-toggle-on me-1"></i>Ativação
                </h6>
            </div>
            <div class="card-body">
                <div class="form-group row">
                    <div class="col-sm-10 offset-sm-2">
                        <div class="custom-control custom-checkbox">
                            <input type="checkbox" class="custom-control-input" id="chatbot_enabled" name="chatbot_enabled"
                                {{ ($settings['chatbot_enabled'] ?? 'off') === 'on' ? 'checked' : '' }}>
                            <label class="custom-control-label" for="chatbot_enabled">
                                <strong>Ativar Chatbot</strong> — Exibe o widget de chat no site público
                            </label>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Provider Selection -->
        <div class="card shadow mb-4">
            <div class="card-header py-3">
                <h6 class="m-0 font-weight-bold text-primary">
                    <i class="bi bi-cpu me-1"></i>Provedor de IA
                </h6>
            </div>
            <div class="card-body">
                <div class="form-group row">
                    <label for="chatbot_provider" class="col-sm-3 col-form-label">Provedor <span class="text-danger">*</span></label>
                    <div class="col-sm-9">
                        <select class="form-control" id="chatbot_provider" name="chatbot_provider" onchange="toggleProviderFields()">
                            <option value="openrouter" {{ ($settings['chatbot_provider'] ?? 'openrouter') === 'openrouter' ? 'selected' : '' }}>OpenRouter.ai (nuvem)</option>
                            <option value="llamacpp" {{ ($settings['chatbot_provider'] ?? 'openrouter') === 'llamacpp' ? 'selected' : '' }}>llama.cpp (local)</option>
                        </select>
                        <small class="text-muted">Escolha entre usar a API do OpenRouter.ai na nuvem ou um servidor llama.cpp local.</small>
                    </div>
                </div>
            </div>
        </div>

        <!-- OpenRouter Settings -->
        <div class="card shadow mb-4" id="openrouter-settings">
            <div class="card-header py-3">
                <h6 class="m-0 font-weight-bold text-primary">
                    <i class="bi bi-key me-1"></i>API OpenRouter
                </h6>
            </div>
            <div class="card-body">
                <div class="alert alert-info">
                    <i class="bi bi-info-circle me-1"></i>
                    O Chatbot pode utilizar a API do <a href="https://openrouter.ai" target="_blank">OpenRouter.ai</a> para gerar respostas inteligentes.
                    Crie uma conta gratuita em openrouter.ai, obtenha sua chave de API e configure abaixo.
                </div>

                <div class="form-group row">
                    <label for="chatbot_openrouter_api_key" class="col-sm-3 col-form-label">Chave da API <span class="text-danger">*</span></label>
                    <div class="col-sm-9">
                        <input type="password" class="form-control" id="chatbot_openrouter_api_key"
                            name="chatbot_openrouter_api_key"
                            value="{{ $settings['chatbot_openrouter_api_key'] ?? '' }}"
                            placeholder="sk-or-v1-...">
                        <small class="text-muted">Sua chave de API do OpenRouter.ai. Mantenha este campo seguro.</small>
                    </div>
                </div>

                <div class="form-group row">
                    <label for="chatbot_openrouter_model" class="col-sm-3 col-form-label">Modelo de IA</label>
                    <div class="col-sm-9">
                        <input type="text" class="form-control" id="chatbot_openrouter_model"
                            name="chatbot_openrouter_model"
                            value="{{ $settings['chatbot_openrouter_model'] ?? 'meta-llama/llama-3.1-8b-instruct' }}"
                            placeholder="meta-llama/llama-3.1-8b-instruct">
                        <small class="text-muted">Digite o ID do modelo (ex: meta-llama/llama-3.2-1b-instruct). Verifique os modelos disponíveis no <a href="https://openrouter.ai/models" target="_blank">OpenRouter.ai</a>.</small>
                    </div>
                </div>
            </div>
        </div>

        <!-- llama.cpp Settings -->
        <div class="card shadow mb-4" id="llamacpp-settings">
            <div class="card-header py-3">
                <h6 class="m-0 font-weight-bold text-primary">
                    <i class="bi bi-server me-1"></i>llama.cpp (Servidor Local)
                </h6>
            </div>
            <div class="card-body">
                <div class="alert alert-info">
                    <i class="bi bi-info-circle me-1"></i>
                    Utilize um servidor <a href="https://github.com/ggerganov/llama.cpp" target="_blank">llama.cpp</a> rodando localmente para processar as respostas.
                    O servidor deve estar acessível com API compatível com OpenAI (<code>/v1/chat/completions</code>).
                </div>

                <div class="form-group row">
                    <label for="chatbot_llamacpp_base_url" class="col-sm-3 col-form-label">URL Base <span class="text-danger">*</span></label>
                    <div class="col-sm-9">
                        <input type="text" class="form-control" id="chatbot_llamacpp_base_url"
                            name="chatbot_llamacpp_base_url"
                            value="{{ $settings['chatbot_llamacpp_base_url'] ?? 'http://172.17.0.1:8080' }}"
                            placeholder="http://172.17.0.1:8080">
                        <small class="text-muted">URL do servidor llama.cpp (ex: http://172.17.0.1:8080). O servidor deve expor a rota <code>/v1/chat/completions</code>.</small>
                    </div>
                </div>

                <div class="form-group row">
                    <label for="chatbot_llamacpp_model" class="col-sm-3 col-form-label">Nome do Modelo</label>
                    <div class="col-sm-9">
                        <input type="text" class="form-control" id="chatbot_llamacpp_model"
                            name="chatbot_llamacpp_model"
                            value="{{ $settings['chatbot_llamacpp_model'] ?? '' }}"
                            placeholder="opcional">
                        <small class="text-muted">Algumas configurações do llama.cpp exigem o nome do modelo. Deixe em branco se não for necessário.</small>
                    </div>
                </div>
            </div>
        </div>

        <!-- Parameters -->
        <div class="card shadow mb-4">
            <div class="card-header py-3">
                <h6 class="m-0 font-weight-bold text-primary">
                    <i class="bi bi-sliders me-1"></i>Parâmetros da IA
                </h6>
            </div>
            <div class="card-body">
                <div class="form-group row">
                    <label for="chatbot_max_tokens" class="col-sm-3 col-form-label">Máx. Tokens de Resposta</label>
                    <div class="col-sm-9">
                        <input type="number" class="form-control" id="chatbot_max_tokens"
                            name="chatbot_max_tokens" min="50" max="2000"
                            value="{{ $settings['chatbot_max_tokens'] ?? '500' }}">
                        <small class="text-muted">Controla o tamanho máximo da resposta (50-2000). Recomendado: 500.</small>
                    </div>
                </div>

                <div class="form-group row">
                    <label for="chatbot_temperature" class="col-sm-3 col-form-label">Temperatura</label>
                    <div class="col-sm-9">
                        <input type="number" class="form-control" id="chatbot_temperature"
                            name="chatbot_temperature" min="0" max="2" step="0.1"
                            value="{{ $settings['chatbot_temperature'] ?? '0.7' }}">
                        <small class="text-muted">Controla a criatividade das respostas (0.0 = preciso, 2.0 = criativo). Recomendado: 0.7.</small>
                    </div>
                </div>
            </div>
        </div>

        <!-- Appearance Settings -->
        <div class="card shadow mb-4">
            <div class="card-header py-3">
                <h6 class="m-0 font-weight-bold text-primary">
                    <i class="bi bi-chat-dots me-1"></i>Aparência e Mensagens
                </h6>
            </div>
            <div class="card-body">
                <div class="form-group row">
                    <label for="chatbot_welcome_message" class="col-sm-3 col-form-label">Mensagem de Boas-vindas</label>
                    <div class="col-sm-9">
                        <input type="text" class="form-control" id="chatbot_welcome_message"
                            name="chatbot_welcome_message"
                            value="{{ $settings['chatbot_welcome_message'] ?? 'Olá! Como posso ajudar você hoje?' }}"
                            maxlength="500">
                        <small class="text-muted">Primeira mensagem exibida quando o visitante abre o chat.</small>
                    </div>
                </div>

                <div class="form-group row">
                    <label for="chatbot_custom_instructions" class="col-sm-3 col-form-label">Instruções Personalizadas</label>
                    <div class="col-sm-9">
                        <textarea class="form-control" id="chatbot_custom_instructions"
                            name="chatbot_custom_instructions" rows="4"
                            placeholder="Ex: Sempre ofereça o WhatsApp como canal de contato para agendamentos.">{{ $settings['chatbot_custom_instructions'] ?? '' }}</textarea>
                        <small class="text-muted">Instruções extras para o comportamento do assistente. Estas são adicionadas ao prompt do sistema.</small>
                    </div>
                </div>
            </div>
        </div>

        <div class="form-group">
            <button type="submit" class="btn btn-primary">
                <i class="bi bi-check-circle me-1"></i>Salvar Configurações
            </button>
            <a href="{{ route('admin.chatbot.index') }}" class="btn btn-secondary ml-2">Cancelar</a>
        </div>
    </form>
</div>

<script>
function toggleProviderFields() {
    const provider = document.getElementById('chatbot_provider').value;
    document.getElementById('openrouter-settings').style.display = provider === 'openrouter' ? 'block' : 'none';
    document.getElementById('llamacpp-settings').style.display = provider === 'llamacpp' ? 'block' : 'none';
}

// Run on page load
document.addEventListener('DOMContentLoaded', function() {
    toggleProviderFields();
});
</script>
@endsection