@extends('layouts.app')

@section('title', 'Agente de Dados e BI (IA)')
@section('topbar_title', 'Agente de BI • Text-to-SQL Sankhya / VIMAN')

@section('content')
<div class="bi-agent-wrapper">
    {{-- BARRA SUPERIOR DE CONTROLE DO AGENTE --}}
    <div class="bi-toolbar">
        <div class="bi-toolbar-left">
            <div class="bi-avatar-glow">
                <svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
                </svg>
            </div>
            <div>
                <div class="bi-title-group">
                    <h2 class="bi-title">Agente de BI &amp; Finanças</h2>
                    <span class="bi-badge-pill bi-badge-oracle">
                        <span class="bi-pulse-dot"></span>
                        Oracle Read-Only
                    </span>
                </div>
                <p class="bi-subtitle">Análise em linguagem natural com Text-to-SQL e Tool Calling</p>
            </div>
        </div>

        <div class="bi-toolbar-right">
            {{-- SELETOR DE PROVEDOR DE IA --}}
            <div class="bi-provider-group" title="Selecione o modelo de IA que processará a consulta">
                <span class="bi-provider-label">Motor de IA:</span>
                <div class="bi-provider-toggles">
                    <button type="button" 
                            id="btn-provider-gemini" 
                            class="bi-provider-btn {{ $provedorPadrao === 'gemini' ? 'active' : '' }}" 
                            onclick="setAiProvider('gemini')">
                        <svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor">
                            <path d="M12 24C12 17.373 6.627 12 0 12C6.627 12 12 6.627 12 0C12 6.627 17.373 12 24 12C17.373 12 12 17.373 12 24Z"/>
                        </svg>
                        <span>Gemini 2.5</span>
                    </button>
                    <button type="button" 
                            id="btn-provider-groq" 
                            class="bi-provider-btn {{ $provedorPadrao === 'groq' ? 'active' : '' }}" 
                            onclick="setAiProvider('groq')"
                            title="Groq Cloud - 100% Gratuito, ultrarrápido com Llama 3.3 70B">
                        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
                        </svg>
                        <span>Groq (Grátis)</span>
                    </button>
                    <button type="button" 
                            id="btn-provider-openai" 
                            class="bi-provider-btn {{ $provedorPadrao === 'openai' ? 'active' : '' }}" 
                            onclick="setAiProvider('openai')">
                        <svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor">
                            <path d="M22.28 9.5a5.57 5.57 0 0 0-.46-4.3 5.66 5.66 0 0 0-5.18-2.88 5.75 5.75 0 0 0-1.8.3A5.6 5.6 0 0 0 10.3 1a5.66 5.66 0 0 0-5.3 3.86 5.68 5.68 0 0 0-3.6 2.62 5.6 5.6 0 0 0 .7 6.46 5.6 5.6 0 0 0 .46 4.3 5.66 5.66 0 0 0 5.18 2.88 5.8 5.8 0 0 0 1.8-.3 5.6 5.6 0 0 0 4.54 1.62 5.66 5.66 0 0 0 5.3-3.86 5.68 5.68 0 0 0 3.6-2.62 5.6 5.6 0 0 0-.7-6.46z"/>
                        </svg>
                        <span>OpenAI GPT-4o</span>
                    </button>
                </div>
            </div>

            <button type="button" class="bi-btn-secondary" onclick="iniciarNovaConversa()" title="Iniciar nova sessão limpa de análise">
                <svg width="15" height="15" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
                </svg>
                <span>Nova Análise</span>
            </button>

            <button type="button" class="bi-btn-secondary" id="btn-toggle-sidebar" onclick="toggleSidebarHistorico()" title="Alternar painel de sessões e conversas anteriores">
                <svg width="15" height="15" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
                <span>Histórico</span>
                <span id="bi-conversas-badge" class="bi-badge-count">0</span>
            </button>

            <button type="button" class="bi-btn-secondary" onclick="abrirModalRegras()" title="Gerenciar Regras de Negócio e Conhecimento do Agente">
                <svg width="15" height="15" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
                </svg>
                <span>Ensinar Regras</span>
                <span id="bi-regras-badge" class="bi-badge-count">1</span>
            </button>

            <button type="button" class="bi-btn-secondary" onclick="limparConversa()" title="Limpar todo o histórico da tela">
                <svg width="15" height="15" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
                </svg>
                <span>Limpar</span>
            </button>
        </div>
    </div>

    {{-- ESTRUTURA PRINCIPAL: HISTÓRICO + CHAT --}}
    <div class="bi-main-layout">
        {{-- SIDEBAR DE HISTÓRICO DE SESSÕES --}}
        <aside class="bi-history-sidebar" id="bi-history-sidebar">
            <div class="bi-sidebar-header">
                <div style="display: flex; align-items: center; gap: 6px;">
                    <svg width="15" height="15" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                    <span class="bi-sidebar-title">Histórico de Sessões</span>
                </div>
                <button type="button" class="bi-btn-mini-add" onclick="iniciarNovaConversa()" title="Nova Conversa">
                    + Nova
                </button>
            </div>
            <div class="bi-history-list" id="bi-history-list">
                <div style="text-align: center; color: var(--text-muted); font-size: 0.8rem; padding: 20px;">Carregando histórico...</div>
            </div>
        </aside>

        {{-- CONTAINER DE CHAT E ENTRADA --}}
        <section class="bi-chat-container">
            {{-- FEED DE CONVERSAÇÃO / MENSAGENS --}}
            <div class="bi-chat-scroll" id="bi-chat-feed">
                {{-- EMPTY STATE (QUANDO AINDA NÃO HÁ PERGUNTAS) --}}
                <div class="bi-welcome-card" id="bi-welcome-card">
                    <div class="bi-welcome-icon">
                        <svg width="36" height="36" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
                        </svg>
                    </div>
                    <h3 class="bi-welcome-title">O que você gostaria de analisar hoje?</h3>
                    <p class="bi-welcome-desc">
                        Faça perguntas em linguagem natural sobre faturamento, vendas, parceiros e finanças do ERP Sankhya/VIMAN. 
                        O agente gera as queries Oracle com segurança, executa na conexão isolada e entrega a síntese executiva.
                    </p>

                    <div class="bi-chips-grid">
                        <button type="button" class="bi-chip-card" onclick="preencherPergunta('Qual foi o faturamento total dos últimos 3 meses agrupado por filial?')">
                            <div class="bi-chip-icon">📊</div>
                            <div class="bi-chip-text">
                                <strong>Faturamento trimestral</strong>
                                <span>Total faturado nos últimos 3 meses por filial</span>
                            </div>
                        </button>

                        <button type="button" class="bi-chip-card" onclick="preencherPergunta('Liste os 10 principais clientes com maior volume de compras no ano.')">
                            <div class="bi-chip-icon">🏆</div>
                            <div class="bi-chip-text">
                                <strong>Top 10 Clientes</strong>
                                <span>Maiores compradores com valor total consolidado</span>
                            </div>
                        </button>

                        <button type="button" class="bi-chip-card" onclick="preencherPergunta('Quais títulos a receber estão em aberto e já vencidos?')">
                            <div class="bi-chip-icon">⚠️</div>
                            <div class="bi-chip-text">
                                <strong>Inadimplência / Contas a Receber</strong>
                                <span>Títulos pendentes de liquidação com vencimento ultrapassado</span>
                            </div>
                        </button>

                        <button type="button" class="bi-chip-card" onclick="preencherPergunta('Quais foram os 5 produtos mais vendidos este mês em quantidade e valor?')">
                            <div class="bi-chip-icon">📦</div>
                            <div class="bi-chip-text">
                                <strong>Produtos Mais Vendidos</strong>
                                <span>Ranking por volume comercializado e receita</span>
                            </div>
                        </button>

                        <button type="button" class="bi-chip-card" onclick="preencherPergunta('Qual o total de despesas a pagar no próximo mês agrupado por centro de resultado?')">
                            <div class="bi-chip-icon">💳</div>
                            <div class="bi-chip-text">
                                <strong>Projeção de Despesas</strong>
                                <span>Contas a pagar por centro de custo/resultado</span>
                            </div>
                        </button>

                        <button type="button" class="bi-chip-card" onclick="preencherPergunta('Quantas notas fiscais foram canceladas em comparação às notas aprovadas?')">
                            <div class="bi-chip-icon">📈</div>
                            <div class="bi-chip-text">
                                <strong>Status de Notas Fiscais</strong>
                                <span>Comparativo de notas canceladas vs liberadas/aprovadas</span>
                            </div>
                        </button>
                    </div>
                </div>

                {{-- CONTAINER DE MENSAGENS INSERIDAS DINAMICAMENTE --}}
                <div id="bi-messages-list" class="bi-messages-list"></div>

                {{-- ANIMAÇÃO DE CARREGAMENTO / PENSANDO --}}
                <div id="bi-loading-indicator" class="bi-loading-container" style="display: none;">
                    <div class="bi-msg-avatar bi-avatar-ai">
                        <svg width="18" height="18" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
                        </svg>
                    </div>
                    <div class="bi-loading-card">
                        <div class="bi-loading-dots">
                            <span></span>
                            <span></span>
                            <span></span>
                        </div>
                        <div class="bi-loading-status" id="bi-loading-step-text">
                            Consultando dicionário de dados e formulando SQL Oracle...
                        </div>
                    </div>
                </div>
            </div>

            {{-- BARRA INFERIOR / COMPOSER DE ENTRADA --}}
            <div class="bi-composer-area">
                <form id="bi-prompt-form" onsubmit="enviarMensagem(event)" class="bi-form">
                    <div class="bi-input-container">
                        <textarea 
                            id="bi-prompt-input" 
                            class="bi-textarea" 
                            placeholder="Pergunte sobre faturamento, vendas, despesas ou clientes (Pressione Enter para enviar)..."
                            rows="1"
                            onkeydown="tratarKeyDown(event)"
                            oninput="ajustarAlturaTextarea(this)"
                            required
                        ></textarea>

                        <button type="submit" id="bi-btn-send" class="bi-btn-send" title="Enviar Pergunta (Enter)">
                            <svg width="18" height="18" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"/>
                            </svg>
                        </button>
                    </div>

                    <div class="bi-composer-footer">
                        <div class="bi-security-notice">
                            <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
                            </svg>
                            <span>Segurança Ativa: Conexão Oracle <code>erp_readonly</code> • Bloqueio de DML/DDL • Limitação <code>ROWNUM &le; 50</code></span>
                        </div>
                        <div class="bi-keyboard-hint">
                            <kbd>Enter</kbd> Enviar &nbsp;|&nbsp; <kbd>Shift + Enter</kbd> Nova linha
                        </div>
                    </div>
                </form>
            </div>
        </section>
    </div>
</div>

{{-- MODAL DE APRENDIZADO E REGRAS DE NEGÓCIO --}}
<div id="bi-modal-regras" class="bi-modal-overlay" style="display: none;" onclick="fecharModalRegrasSeClicarFora(event)">
    <div class="bi-modal-content">
        <div class="bi-modal-header">
            <div class="bi-modal-title-group">
                <span class="bi-modal-icon">🧠</span>
                <div>
                    <h3 class="bi-modal-title">Base de Conhecimento do Agente</h3>
                    <p class="bi-modal-subtitle">Ensine regras corporativas para o modelo respeitar nas consultas SQL</p>
                </div>
            </div>
            <button type="button" class="bi-modal-close" onclick="fecharModalRegras()">&times;</button>
        </div>

        <div class="bi-modal-body">
            {{-- Formulário para Nova Regra --}}
            <div class="bi-nova-regra-card">
                <h4 class="bi-section-heading">Nova Regra de Negócio</h4>
                <form id="form-nova-regra" onsubmit="salvarRegraForm(event)">
                    <div class="bi-form-group">
                        <label for="regra-titulo" class="bi-form-label">Título da Regra (ex: Operações Filial SP / Devoluções)</label>
                        <input type="text" id="regra-titulo" class="bi-modal-input" placeholder="Ex: Consumo Operacional Filial SP" required>
                    </div>
                    <div class="bi-form-group">
                        <label for="regra-descricao" class="bi-form-label">Diretriz para a IA (em linguagem natural)</label>
                        <textarea id="regra-descricao" class="bi-modal-textarea" rows="3" placeholder="Ex: Nas consultas de faturamento e vendas da filial SP, utilize a Empresa 6 e desconsidere notas de estorno ou auto-venda da Vitória Hospitalar." required></textarea>
                    </div>
                    <div style="display: flex; justify-content: flex-end;">
                        <button type="submit" id="btn-salvar-regra" class="bi-btn-primary">
                            <span>Salvar &amp; Ensinar ao Agente</span>
                        </button>
                    </div>
                </form>
            </div>

            {{-- Lista de Regras Já Cadastradas --}}
            <div class="bi-regras-list-container">
                <h4 class="bi-section-heading">Regras Ativas Ensinadas (<span id="regras-ativas-total">0</span>)</h4>
                <div id="lista-regras-cadastradas" class="bi-regras-cards-grid">
                    <div style="text-align: center; color: var(--text-muted); padding: 20px;">Carregando regras...</div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
/* ==========================================================================
   ESTILOS PREMIUM DO AGENTE DE BI (COMPATÍVEL COM DARK/LIGHT E FILAMENT)
   ========================================================================== */

.bi-agent-wrapper {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 80px);
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 16px 16px 16px;
    box-sizing: border-box;
}

/* --- TOOLBAR --- */
.bi-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    background: var(--bg-card, #ffffff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 14px;
    margin-bottom: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    flex-wrap: wrap;
    gap: 12px;
}

.bi-toolbar-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.bi-avatar-glow {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, #c8102e, #7c3aed);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(200, 16, 46, 0.25);
}

.bi-title-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.bi-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-main, #0f172a);
    margin: 0;
}

.bi-subtitle {
    font-size: 0.82rem;
    color: var(--text-muted, #64748b);
    margin: 2px 0 0 0;
}

.bi-badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.bi-badge-oracle {
    background: rgba(16, 185, 129, 0.12);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.25);
}

.bi-pulse-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #10b981;
    box-shadow: 0 0 8px #10b981;
    animation: bi-pulse 2s infinite;
}

@keyframes bi-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.85); }
}

.bi-toolbar-right {
    display: flex;
    align-items: center;
    gap: 14px;
}

.bi-provider-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.bi-provider-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted, #64748b);
}

.bi-provider-toggles {
    display: flex;
    background: var(--bg-base, #f8fafc);
    padding: 3px;
    border-radius: 10px;
    border: 1px solid var(--border-color, #e2e8f0);
}

.bi-provider-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 7px;
    font-size: 0.8rem;
    font-weight: 600;
    border: none;
    background: transparent;
    color: var(--text-muted, #64748b);
    cursor: pointer;
    transition: all 0.2s ease;
}

.bi-provider-btn.active {
    background: var(--bg-card, #ffffff);
    color: var(--text-main, #0f172a);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.bi-btn-secondary {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--bg-base, #f8fafc);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-muted, #64748b);
    cursor: pointer;
    transition: all 0.2s ease;
}

.bi-btn-secondary:hover {
    background: rgba(200, 16, 46, 0.08);
    color: #c8102e;
    border-color: rgba(200, 16, 46, 0.25);
}

/* --- LAYOUT PRINCIPAL (HISTÓRICO + CHAT) --- */
.bi-main-layout {
    display: flex;
    gap: 16px;
    flex: 1;
    min-height: 0;
    height: calc(100vh - 165px);
    overflow: hidden;
}

.bi-history-sidebar {
    width: 290px;
    flex-shrink: 0;
    background: var(--bg-card, #ffffff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: all 0.25s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.bi-history-sidebar.collapsed {
    width: 0;
    padding: 0;
    margin: 0;
    border: none;
    opacity: 0;
    pointer-events: none;
}

.bi-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
    background: var(--bg-base, #f8fafc);
}

.bi-sidebar-title {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-main, #0f172a);
}

.bi-btn-mini-add {
    background: #c8102e;
    color: #ffffff;
    border: none;
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 0.74rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s ease;
}

.bi-btn-mini-add:hover {
    background: #a50b23;
}

.bi-history-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.bi-history-card {
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--bg-base, #f8fafc);
    border: 1px solid transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    transition: all 0.2s ease;
}

.bi-history-card:hover {
    background: var(--bg-card, #ffffff);
    border-color: rgba(200, 16, 46, 0.3);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.bi-history-card.active {
    background: rgba(200, 16, 46, 0.06);
    border-color: #c8102e;
}

.bi-history-card-content {
    flex: 1;
    min-width: 0;
}

.bi-history-card-title {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-main, #0f172a);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.bi-history-card-meta {
    font-size: 0.7rem;
    color: var(--text-muted, #64748b);
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 3px;
}

.bi-history-btn-del {
    background: transparent;
    border: none;
    color: var(--text-muted, #94a3b8);
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.2s ease;
}

.bi-history-card:hover .bi-history-btn-del {
    opacity: 1;
}

.bi-history-btn-del:hover {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}

.bi-chat-container {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

/* --- FEED DE CONVERSAÇÃO --- */
.bi-chat-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 10px 4px 20px 4px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* --- WELCOME CARD & CHIPS --- */
.bi-welcome-card {
    background: var(--bg-card, #ffffff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 16px;
    padding: 32px 24px;
    text-align: center;
    max-width: 900px;
    margin: 20px auto;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

.bi-welcome-icon {
    width: 68px;
    height: 68px;
    margin: 0 auto 16px auto;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(200, 16, 46, 0.1), rgba(124, 58, 237, 0.1));
    color: #c8102e;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bi-welcome-title {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--text-main, #0f172a);
    margin: 0 0 8px 0;
}

.bi-welcome-desc {
    font-size: 0.92rem;
    color: var(--text-muted, #64748b);
    max-width: 650px;
    margin: 0 auto 28px auto;
    line-height: 1.5;
}

.bi-chips-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 12px;
    text-align: left;
}

.bi-chip-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background: var(--bg-base, #f8fafc);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    width: 100%;
    box-sizing: border-box;
}

.bi-chip-card:hover {
    border-color: #c8102e;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(200, 16, 46, 0.08);
    background: var(--bg-card, #ffffff);
}

.bi-chip-icon {
    font-size: 1.3rem;
    line-height: 1;
}

.bi-chip-text strong {
    display: block;
    font-size: 0.88rem;
    color: var(--text-main, #0f172a);
    margin-bottom: 3px;
}

.bi-chip-text span {
    display: block;
    font-size: 0.78rem;
    color: var(--text-muted, #64748b);
    line-height: 1.3;
}

/* --- MENSAGENS NO CHAT --- */
.bi-messages-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.bi-msg-row {
    display: flex;
    gap: 14px;
    max-width: 90%;
    animation: bi-fade-in 0.3s ease;
}

@keyframes bi-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.bi-msg-row.user {
    align-self: flex-end;
    flex-direction: row-reverse;
}

.bi-msg-row.assistant {
    align-self: flex-start;
    max-width: 95%;
}

.bi-msg-avatar {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-weight: 700;
    font-size: 0.85rem;
}

.bi-avatar-user {
    background: linear-gradient(135deg, #1e293b, #0f172a);
    color: #ffffff;
}

.bi-avatar-ai {
    background: linear-gradient(135deg, #c8102e, #7c3aed);
    color: #ffffff;
    box-shadow: 0 2px 10px rgba(200, 16, 46, 0.25);
}

.bi-msg-bubble {
    padding: 16px 20px;
    border-radius: 14px;
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--text-main, #0f172a);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.bi-msg-row.user .bi-msg-bubble {
    background: #c8102e;
    color: #ffffff;
    border-bottom-right-radius: 2px;
}

.bi-msg-row.assistant .bi-msg-bubble {
    background: var(--bg-card, #ffffff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-bottom-left-radius: 2px;
    width: 100%;
}

.bi-msg-meta {
    font-size: 0.72rem;
    color: var(--text-muted, #64748b);
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.bi-msg-row.user .bi-msg-meta {
    color: rgba(255, 255, 255, 0.8);
    justify-content: flex-end;
}

/* --- TABELAS E FORMATAÇÃO NO MARKDOWN --- */
.bi-rendered-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 14px 0;
    font-size: 0.88rem;
}

.bi-rendered-content th, 
.bi-rendered-content td {
    padding: 10px 14px;
    border: 1px solid var(--border-color, #e2e8f0);
    text-align: left;
}

.bi-rendered-content th {
    background: var(--bg-base, #f8fafc);
    font-weight: 700;
    color: var(--text-main, #0f172a);
}

.bi-rendered-content tr:hover td {
    background: var(--bg-card-hover, #f1f5f9);
}

.bi-rendered-content code {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.84rem;
    background: var(--bg-base, #f8fafc);
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid var(--border-color, #e2e8f0);
    color: #c8102e;
}

.bi-rendered-content pre {
    background: #0f172a;
    color: #f8fafc;
    padding: 14px;
    border-radius: 8px;
    overflow-x: auto;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.82rem;
}

.bi-rendered-content pre code {
    background: transparent;
    border: none;
    color: inherit;
    padding: 0;
}

/* --- LOADING ANIMATION --- */
.bi-loading-container {
    display: flex;
    gap: 14px;
    align-items: center;
    margin: 8px 0;
}

.bi-loading-card {
    background: var(--bg-card, #ffffff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 12px;
    padding: 12px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.bi-loading-dots {
    display: flex;
    gap: 4px;
}

.bi-loading-dots span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #c8102e;
    animation: bi-bounce 1.4s infinite ease-in-out both;
}

.bi-loading-dots span:nth-child(1) { animation-delay: -0.32s; }
.bi-loading-dots span:nth-child(2) { animation-delay: -0.16s; }

@keyframes bi-bounce {
    0%, 80%, 100% { transform: scale(0); opacity: 0.4; }
    40% { transform: scale(1); opacity: 1; }
}

.bi-loading-status {
    font-size: 0.85rem;
    color: var(--text-muted, #64748b);
    font-weight: 500;
}

/* --- COMPOSER FOOTER --- */
.bi-composer-area {
    background: var(--bg-card, #ffffff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 16px;
    padding: 14px 18px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.bi-input-container {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    background: var(--bg-base, #f8fafc);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 12px;
    padding: 8px 12px;
    transition: border-color 0.2s ease;
}

.bi-input-container:focus-within {
    border-color: #c8102e;
    box-shadow: 0 0 0 3px rgba(200, 16, 46, 0.1);
}

.bi-textarea {
    flex: 1;
    border: none;
    background: transparent;
    color: var(--text-main, #0f172a);
    font-family: inherit;
    font-size: 0.94rem;
    resize: none;
    max-height: 180px;
    padding: 6px 0;
    line-height: 1.5;
    outline: none;
}

.bi-btn-send {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #c8102e;
    color: #ffffff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.bi-btn-send:hover {
    background: #a50b23;
    transform: scale(1.04);
}

.bi-btn-send:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.bi-composer-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
    padding: 0 4px;
    font-size: 0.76rem;
    color: var(--text-muted, #64748b);
    flex-wrap: wrap;
    gap: 8px;
}

.bi-security-notice {
    display: flex;
    align-items: center;
    gap: 6px;
}

.bi-security-notice code {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.72rem;
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
    padding: 1px 4px;
    border-radius: 4px;
}

.bi-keyboard-hint kbd {
    background: var(--bg-base, #f8fafc);
    border: 1px solid var(--border-color, #e2e8f0);
    padding: 1px 4px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-family: inherit;
}

/* --- MODAL DE REGRAS & BASE DE CONHECIMENTO --- */
.bi-badge-count {
    background: #c8102e;
    color: #ffffff;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 10px;
    margin-left: 2px;
}

.bi-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    animation: bi-fade-in 0.2s ease;
}

.bi-modal-content {
    background: var(--bg-card, #ffffff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 18px;
    width: 90%;
    max-width: 750px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    overflow: hidden;
}

.bi-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
}

.bi-modal-title-group {
    display: flex;
    align-items: center;
    gap: 12px;
}

.bi-modal-icon {
    font-size: 1.6rem;
}

.bi-modal-title {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--text-main, #0f172a);
    margin: 0;
}

.bi-modal-subtitle {
    font-size: 0.8rem;
    color: var(--text-muted, #64748b);
    margin: 2px 0 0 0;
}

.bi-modal-close {
    background: transparent;
    border: none;
    font-size: 1.8rem;
    color: var(--text-muted, #64748b);
    cursor: pointer;
    line-height: 1;
    padding: 0 4px;
}

.bi-modal-close:hover {
    color: #c8102e;
}

.bi-modal-body {
    padding: 24px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.bi-section-heading {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-main, #0f172a);
    margin: 0 0 12px 0;
}

.bi-nova-regra-card {
    background: var(--bg-base, #f8fafc);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 14px;
    padding: 18px;
}

.bi-form-group {
    margin-bottom: 14px;
}

.bi-form-label {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-main, #0f172a);
    margin-bottom: 6px;
}

.bi-modal-input, .bi-modal-textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 14px;
    background: var(--bg-card, #ffffff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 8px;
    color: var(--text-main, #0f172a);
    font-family: inherit;
    font-size: 0.88rem;
    outline: none;
    transition: border-color 0.2s ease;
}

.bi-modal-input:focus, .bi-modal-textarea:focus {
    border-color: #c8102e;
    box-shadow: 0 0 0 3px rgba(200, 16, 46, 0.1);
}

.bi-btn-primary {
    background: #c8102e;
    color: #ffffff;
    border: none;
    padding: 9px 18px;
    border-radius: 8px;
    font-size: 0.84rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bi-btn-primary:hover {
    background: #a50b23;
}

.bi-regras-cards-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.bi-regra-item {
    background: var(--bg-card, #ffffff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}

.bi-regra-item-info strong {
    display: block;
    font-size: 0.9rem;
    color: var(--text-main, #0f172a);
    margin-bottom: 4px;
}

.bi-regra-item-info p {
    font-size: 0.84rem;
    color: var(--text-muted, #64748b);
    margin: 0;
    line-height: 1.4;
}

.bi-btn-trash {
    background: transparent;
    border: none;
    color: #ef4444;
    cursor: pointer;
    padding: 6px;
    border-radius: 6px;
    transition: background 0.2s ease;
}

.bi-btn-trash:hover {
    background: rgba(239, 68, 68, 0.1);
}

.bi-msg-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--border-color-subtle, #edf2f7);
}

.bi-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted, #64748b);
    background: var(--bg-base, #f8fafc);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 6px;
    padding: 4px 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bi-action-btn:hover {
    color: #c8102e;
    border-color: rgba(200, 16, 46, 0.3);
    background: rgba(200, 16, 46, 0.05);
}
</style>
@endsection

@section('scripts')
<script>
let currentProvider = '{{ $provedorPadrao }}';
let currentConversaUuid = null;
const loadingSteps = [
    'Consultando dicionário de dados e estruturando consulta...',
    'Gerando SQL otimizado para o SGBD Oracle...',
    'Executando query segura em erp_readonly (ROWNUM <= 50)...',
    'Consolidando dados e sintetizando análise executiva de BI...'
];
let stepInterval = null;

function setAiProvider(provider) {
    currentProvider = provider;
    document.getElementById('btn-provider-gemini')?.classList.toggle('active', provider === 'gemini');
    document.getElementById('btn-provider-groq')?.classList.toggle('active', provider === 'groq');
    document.getElementById('btn-provider-openai')?.classList.toggle('active', provider === 'openai');
}

function preencherPergunta(texto) {
    const input = document.getElementById('bi-prompt-input');
    input.value = texto;
    ajustarAlturaTextarea(input);
    input.focus();
}

function tratarKeyDown(event) {
    if (event.key === 'Enter' && !event.shiftKey) {
        event.preventDefault();
        document.getElementById('bi-prompt-form').dispatchEvent(new Event('submit'));
    }
}

function ajustarAlturaTextarea(textarea) {
    textarea.style.height = 'auto';
    textarea.style.height = Math.min(textarea.scrollHeight, 180) + 'px';
}

function limparConversa() {
    const isDark = document.documentElement.getAttribute('data-theme') === 'dark' || document.body.classList.contains('erp-theme-dark');
    Swal.fire({
        title: 'Limpar Conversa',
        text: 'Deseja realmente limpar as mensagens da tela?',
        icon: 'question',
        showCancelButton: true,
        confirmButtonColor: '#c8102e',
        cancelButtonColor: '#64748b',
        confirmButtonText: 'Sim, limpar',
        cancelButtonText: 'Cancelar',
        background: isDark ? '#111827' : '#ffffff',
        color: isDark ? '#f3f4f6' : '#0f172a'
    }).then((res) => {
        if (res.isConfirmed) {
            document.getElementById('bi-messages-list').innerHTML = '';
            document.getElementById('bi-welcome-card').style.display = 'block';
        }
    });
}

async function enviarMensagem(event) {
    event.preventDefault();
    const input = document.getElementById('bi-prompt-input');
    const sendBtn = document.getElementById('bi-btn-send');
    const mensagem = input.value.trim();

    if (!mensagem) return;

    // 1. Ocultar Welcome Card
    document.getElementById('bi-welcome-card').style.display = 'none';

    // 2. Adicionar mensagem do Usuário
    adicionarMensagemUsuario(mensagem);
    input.value = '';
    ajustarAlturaTextarea(input);
    input.disabled = true;
    sendBtn.disabled = true;

    // 3. Exibir Loading com animação dos passos
    iniciarLoading();

    try {
        const response = await fetch('/api/bi-agent/chat', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || ''
            },
            body: JSON.stringify({
                mensagem: mensagem,
                provedor: currentProvider,
                conversa_uuid: currentConversaUuid
            })
        });

        const data = await lerRespostaJson(response);

        pararLoading();

        if (response.ok && data.sucesso) {
            currentConversaUuid = data.conversa_uuid;
            adicionarMensagemAssistente(data.resposta);
            carregarHistoricoConversas();
        } else {
            const erroMsg = data.erro || data.message || 'Erro inesperado ao processar a resposta do agente.';
            adicionarMensagemAssistente(`⚠️ **Erro ao consultar o Agente:** ${erroMsg}\n\n*Dica: Verifique se as credenciais de API (${currentProvider.toUpperCase()}) e a conexão Oracle erp_readonly estão ativas no .env.*`);
        }
    } catch (err) {
        pararLoading();
        adicionarMensagemAssistente(`⚠️ **Falha de rede/servidor:** ${err.message}`);
    } finally {
        input.disabled = false;
        sendBtn.disabled = false;
        input.focus();
        rolarFinalChat();
    }
}

async function lerRespostaJson(response) {
    const texto = await response.text();

    try {
        return JSON.parse(texto);
    } catch (erro) {
        const contentType = response.headers.get('content-type') || '';
        const detalhe = contentType.includes('text/html') || texto.trim().startsWith('<')
            ? 'O servidor retornou uma página HTML em vez de JSON.'
            : `Resposta inválida do servidor: ${texto.slice(0, 180)}`;

        return {
            sucesso: false,
            erro: `${detalhe} HTTP ${response.status}. Verifique o log do Laravel e a rota /api/bi-agent/chat.`,
        };
    }
}

function iniciarLoading() {
    const loader = document.getElementById('bi-loading-indicator');
    const stepText = document.getElementById('bi-loading-step-text');
    loader.style.display = 'flex';
    
    let stepIndex = 0;
    stepText.textContent = loadingSteps[0];
    
    clearInterval(stepInterval);
    stepInterval = setInterval(() => {
        stepIndex = (stepIndex + 1) % loadingSteps.length;
        stepText.textContent = loadingSteps[stepIndex];
    }, 2800);

    rolarFinalChat();
}

function pararLoading() {
    clearInterval(stepInterval);
    document.getElementById('bi-loading-indicator').style.display = 'none';
}

function adicionarMensagemUsuario(texto) {
    const list = document.getElementById('bi-messages-list');
    const hora = new Date().toLocaleTimeString('pt-BR', { hour: '2-digit', minute: '2-digit' });

    const html = `
        <div class="bi-msg-row user">
            <div class="bi-msg-avatar bi-avatar-user">Você</div>
            <div class="bi-msg-bubble">
                <div style="white-space: pre-wrap;">${escapeHtml(texto)}</div>
                <div class="bi-msg-meta">
                    <span>${hora}</span>
                </div>
            </div>
        </div>
    `;

    list.insertAdjacentHTML('beforeend', html);
    rolarFinalChat();
}

function adicionarMensagemAssistente(respostaMarkdown) {
    const list = document.getElementById('bi-messages-list');
    const hora = new Date().toLocaleTimeString('pt-BR', { hour: '2-digit', minute: '2-digit' });
    const renderedHtml = parseMarkdown(respostaMarkdown);

    const html = `
        <div class="bi-msg-row assistant">
            <div class="bi-msg-avatar bi-avatar-ai">
                <svg width="18" height="18" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
                </svg>
            </div>
            <div class="bi-msg-bubble">
                <div class="bi-rendered-content">${renderedHtml}</div>
                <div class="bi-msg-meta">
                    <span>${hora}</span>
                    <span>•</span>
                    <span style="text-transform: capitalize;">${currentProvider}</span>
                </div>
                <div class="bi-msg-actions">
                    <button type="button" class="bi-action-btn" onclick="abrirModalRegras('', 'Com base nesta resposta, considere a seguinte regra: ')" title="Ensinar ou refinar uma regra de negócio com base nesta resposta">
                        <svg width="13" height="13" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/>
                        </svg>
                        <span>Ensinar Regra / Corrigir</span>
                    </button>
                </div>
            </div>
        </div>
    `;

    list.insertAdjacentHTML('beforeend', html);
    rolarFinalChat();
}

function rolarFinalChat() {
    const feed = document.getElementById('bi-chat-feed');
    feed.scrollTop = feed.scrollHeight;
}

function escapeHtml(text) {
    const div = document.createElement('div');
    div.textContent = text;
    return div.innerHTML;
}

// --- FUNÇÕES DO MODAL DE REGRAS E APRENDIZADO ---
async function carregarRegras() {
    try {
        const response = await fetch('/api/bi-agent/regras');
        const data = await response.json();

        if (response.ok && data.sucesso) {
            const regras = data.regras || [];
            const badge = document.getElementById('bi-regras-badge');
            const totalSpan = document.getElementById('regras-ativas-total');
            const lista = document.getElementById('lista-regras-cadastradas');

            if (badge) badge.textContent = regras.length;
            if (totalSpan) totalSpan.textContent = regras.length;

            if (regras.length === 0) {
                lista.innerHTML = '<div style="text-align: center; color: var(--text-muted); padding: 15px;">Nenhuma regra cadastrada ainda. Ensine a primeira regra acima!</div>';
                return;
            }

            let cardsHtml = '';
            regras.forEach(r => {
                cardsHtml += `
                    <div class="bi-regra-item">
                        <div class="bi-regra-item-info">
                            <strong>${escapeHtml(r.titulo)}</strong>
                            <p>${escapeHtml(r.regra)}</p>
                        </div>
                        <button type="button" class="bi-btn-trash" onclick="excluirRegra(${r.id})" title="Excluir regra">
                            <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                            </svg>
                        </button>
                    </div>
                `;
            });
            lista.innerHTML = cardsHtml;
        }
    } catch (err) {
        console.error('Erro ao carregar regras do agente:', err);
    }
}

function abrirModalRegras(prefillTitulo = '', prefillDesc = '') {
    const modal = document.getElementById('bi-modal-regras');
    modal.style.display = 'flex';

    if (prefillTitulo) document.getElementById('regra-titulo').value = prefillTitulo;
    if (prefillDesc) {
        const descInput = document.getElementById('regra-descricao');
        descInput.value = prefillDesc;
        descInput.focus();
    }
    carregarRegras();
}

function fecharModalRegras() {
    document.getElementById('bi-modal-regras').style.display = 'none';
}

function fecharModalRegrasSeClicarFora(event) {
    if (event.target.id === 'bi-modal-regras') {
        fecharModalRegras();
    }
}

async function salvarRegraForm(event) {
    event.preventDefault();
    const tituloInput = document.getElementById('regra-titulo');
    const descInput = document.getElementById('regra-descricao');
    const btn = document.getElementById('btn-salvar-regra');

    const titulo = tituloInput.value.trim();
    const regra = descInput.value.trim();

    if (!titulo || !regra) return;

    btn.disabled = true;
    btn.innerHTML = '<span>Salvando...</span>';

    try {
        const response = await fetch('/api/bi-agent/regras', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || ''
            },
            body: JSON.stringify({
                titulo: titulo,
                regra: regra,
                ativo: true
            })
        });

        const data = await response.json();

        if (response.ok && data.sucesso) {
            tituloInput.value = '';
            descInput.value = '';
            await carregarRegras();
        } else {
            Swal.fire({
                icon: 'error',
                title: 'Erro ao Salvar Regra',
                text: data.message || data.erro || 'Erro desconhecido',
                confirmButtonColor: '#c8102e'
            });
        }
    } catch (err) {
        Swal.fire({
            icon: 'error',
            title: 'Falha na Requisição',
            text: 'Falha na requisição ao salvar regra: ' + err.message,
            confirmButtonColor: '#c8102e'
        });
    } finally {
        btn.disabled = false;
        btn.innerHTML = '<span>Salvar &amp; Ensinar ao Agente</span>';
    }
}

async function excluirRegra(id) {
    const isDark = document.documentElement.getAttribute('data-theme') === 'dark' || document.body.classList.contains('erp-theme-dark');
    const res = await Swal.fire({
        title: 'Excluir Regra',
        text: 'Deseja realmente remover esta regra de conhecimento do Agente?',
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#c8102e',
        cancelButtonColor: '#64748b',
        confirmButtonText: 'Sim, remover',
        cancelButtonText: 'Cancelar',
        background: isDark ? '#111827' : '#ffffff',
        color: isDark ? '#f3f4f6' : '#0f172a'
    });

    if (!res.isConfirmed) return;

    try {
        const response = await fetch(`/api/bi-agent/regras/${id}`, {
            method: 'DELETE',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || ''
            }
        });

        const data = await response.json();
        if (response.ok && data.sucesso) {
            await carregarRegras();
        } else {
            Swal.fire({
                icon: 'error',
                title: 'Erro ao Excluir Regra',
                text: data.message || data.erro || 'Erro desconhecido',
                confirmButtonColor: '#c8102e'
            });
        }
    } catch (err) {
        Swal.fire({
            icon: 'error',
            title: 'Falha na Requisição',
            text: 'Falha na requisição ao excluir regra: ' + err.message,
            confirmButtonColor: '#c8102e'
        });
    }
}

// --- FUNÇÕES DE HISTÓRICO DE SESSÕES & CONVERSAS ---
function toggleSidebarHistorico() {
    const sidebar = document.getElementById('bi-history-sidebar');
    sidebar.classList.toggle('collapsed');
}

function iniciarNovaConversa() {
    currentConversaUuid = null;
    document.getElementById('bi-messages-list').innerHTML = '';
    document.getElementById('bi-welcome-card').style.display = 'block';
    
    // Desmarcar todas as conversas ativas na sidebar
    document.querySelectorAll('.bi-history-card').forEach(card => card.classList.remove('active'));

    const input = document.getElementById('bi-prompt-input');
    input.value = '';
    ajustarAlturaTextarea(input);
    input.focus();
}

async function carregarHistoricoConversas() {
    try {
        const response = await fetch('/api/bi-agent/conversas');
        const data = await response.json();

        if (response.ok && data.sucesso) {
            const conversas = data.conversas || [];
            const badge = document.getElementById('bi-conversas-badge');
            const lista = document.getElementById('bi-history-list');

            if (badge) badge.textContent = conversas.length;

            if (conversas.length === 0) {
                lista.innerHTML = '<div style="text-align: center; color: var(--text-muted); font-size: 0.8rem; padding: 20px;">Nenhuma análise salva ainda. Envie uma pergunta para começar!</div>';
                return;
            }

            let cardsHtml = '';
            conversas.forEach(c => {
                const isActive = (c.uuid === currentConversaUuid);
                const dataFormatada = new Date(c.updated_at).toLocaleDateString('pt-BR', { day: '2-digit', month: '2-digit' }) + ' ' + new Date(c.updated_at).toLocaleTimeString('pt-BR', { hour: '2-digit', minute: '2-digit' });

                cardsHtml += `
                    <div class="bi-history-card ${isActive ? 'active' : ''}" id="card-conversa-${c.uuid}" onclick="carregarConversa('${c.uuid}')">
                        <div class="bi-history-card-content">
                            <span class="bi-history-card-title" title="${escapeHtml(c.titulo)}">${escapeHtml(c.titulo)}</span>
                            <div class="bi-history-card-meta">
                                <span>${dataFormatada}</span>
                                <span>•</span>
                                <span>${c.mensagens_count} msgs</span>
                            </div>
                        </div>
                        <button type="button" class="bi-history-btn-del" onclick="excluirConversa('${c.uuid}', event)" title="Excluir esta sessão">
                            <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
                            </svg>
                        </button>
                    </div>
                `;
            });
            lista.innerHTML = cardsHtml;
        }
    } catch (err) {
        console.error('Erro ao listar conversas:', err);
    }
}

async function carregarConversa(uuid) {
    try {
        const response = await fetch(`/api/bi-agent/conversas/${uuid}`);
        const data = await response.json();

        if (response.ok && data.sucesso) {
            const conversa = data.conversa;
            currentConversaUuid = conversa.uuid;

            // Atualiza classe active na lista
            document.querySelectorAll('.bi-history-card').forEach(card => card.classList.remove('active'));
            const activeCard = document.getElementById(`card-conversa-${uuid}`);
            if (activeCard) activeCard.classList.add('active');

            // Limpa chat e esconde welcome card
            const list = document.getElementById('bi-messages-list');
            list.innerHTML = '';
            document.getElementById('bi-welcome-card').style.display = 'none';

            // Renderiza mensagens
            const mensagens = conversa.mensagens || [];
            mensagens.forEach(m => {
                if (m.role === 'user') {
                    adicionarMensagemUsuario(m.conteudo);
                } else if (m.role === 'assistant') {
                    adicionarMensagemAssistente(m.conteudo);
                }
            });

            rolarFinalChat();
        }
    } catch (err) {
        Swal.fire({
            icon: 'error',
            title: 'Erro ao Carregar Sessão',
            text: 'Erro ao carregar sessão de análise: ' + err.message,
            confirmButtonColor: '#c8102e'
        });
    }
}

async function excluirConversa(uuid, event) {
    if (event) event.stopPropagation();
    const isDark = document.documentElement.getAttribute('data-theme') === 'dark' || document.body.classList.contains('erp-theme-dark');
    const res = await Swal.fire({
        title: 'Excluir Sessão',
        text: 'Deseja realmente excluir esta sessão de análise do histórico?',
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#c8102e',
        cancelButtonColor: '#64748b',
        confirmButtonText: 'Sim, excluir',
        cancelButtonText: 'Cancelar',
        background: isDark ? '#111827' : '#ffffff',
        color: isDark ? '#f3f4f6' : '#0f172a'
    });

    if (!res.isConfirmed) return;

    try {
        const response = await fetch(`/api/bi-agent/conversas/${uuid}`, {
            method: 'DELETE',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || ''
            }
        });

        const data = await response.json();
        if (response.ok && data.sucesso) {
            if (currentConversaUuid === uuid) {
                iniciarNovaConversa();
            }
            await carregarHistoricoConversas();
        }
    } catch (err) {
        Swal.fire({
            icon: 'error',
            title: 'Falha ao Excluir Conversa',
            text: err.message,
            confirmButtonColor: '#c8102e'
        });
    }
}

document.addEventListener('DOMContentLoaded', () => {
    carregarRegras();
    carregarHistoricoConversas();
});

// Parser Markdown leve embutido (Tabelas, Negrito, Listas, Código, etc.)
function parseMarkdown(md) {
    if (!md) return '';
    let html = md;

    // Bloco de código (```sql ... ```)
    html = html.replace(/```([a-z]*)\n([\s\S]*?)```/gi, function(match, lang, code) {
        return `<pre><code class="language-${lang}">${escapeHtml(code.trim())}</code></pre>`;
    });

    // Código inline (`...`)
    html = html.replace(/`([^`]+)`/g, '<code>$1</code>');

    // Títulos (###, ##, #)
    html = html.replace(/^### (.*$)/gim, '<h4 style="font-size: 1.05rem; font-weight: 700; margin: 12px 0 6px 0;">$1</h4>');
    html = html.replace(/^## (.*$)/gim, '<h3 style="font-size: 1.15rem; font-weight: 800; margin: 14px 0 8px 0;">$1</h3>');
    html = html.replace(/^# (.*$)/gim, '<h2 style="font-size: 1.25rem; font-weight: 800; margin: 16px 0 10px 0;">$1</h2>');

    // Negrito e Itálico
    html = html.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>');
    html = html.replace(/\*([^*]+)\*/g, '<em>$1</em>');

    // Tabelas Markdown (| col1 | col2 |)
    const lines = html.split('\n');
    let inTable = false;
    let tableHtml = '';
    let parsedLines = [];

    for (let i = 0; i < lines.length; i++) {
        const line = lines[i].trim();
        if (line.startsWith('|') && line.endsWith('|')) {
            if (!inTable) {
                inTable = true;
                tableHtml = '<table><thead>';
                // Header
                const headers = line.split('|').filter(c => c.trim() !== '');
                tableHtml += '<tr>' + headers.map(h => `<th>${h.trim()}</th>`).join('') + '</tr></thead><tbody>';
                // Pula linha divisória (|---|---|)
                if (i + 1 < lines.length && lines[i + 1].includes('---')) {
                    i++;
                }
            } else {
                const cells = line.split('|').filter(c => c.trim() !== '');
                tableHtml += '<tr>' + cells.map(c => `<td>${c.trim()}</td>`).join('') + '</tr>';
            }
        } else {
            if (inTable) {
                inTable = false;
                tableHtml += '</tbody></table>';
                parsedLines.push(tableHtml);
            }
            parsedLines.push(line);
        }
    }
    if (inTable) {
        tableHtml += '</tbody></table>';
        parsedLines.push(tableHtml);
    }

    html = parsedLines.join('\n');

    // Listas com marcadores (- item ou * item)
    html = html.replace(/^\s*[-*]\s+(.*)$/gim, '<li style="margin-left: 18px;">$1</li>');

    // Quebras de linha
    html = html.replace(/\n\n/g, '<br><br>');

    return html;
}
</script>
@endsection