@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-900'])

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => 'Dashboard Chat'])

    <div class="container-fluid py-4">
        {{-- Filtros --}}
        <div class="row">
            <div class="col-12">
                <div class="card mb-4">
                    <div class="card-body">
                        <div class="row align-items-end">
                            <div class="col-md-3 col-sm-6 mb-3">
                                <label class="form-label text-sm">Período</label>
                                <div class="input-group">
                                    <input type="text" id="chat-dashboard-date" class="form-control" placeholder="Últimos 60 dias">
                                    <span class="input-group-text"><i class="fa fa-calendar"></i></span>
                                </div>
                            </div>
                            <div class="col-md-3 col-sm-6 mb-3">
                                <label class="form-label text-sm">Agente</label>
                                <select id="chat-dashboard-agente" class="form-select">
                                    <option value="">Todos (panorama geral)</option>
                                    @foreach($agentes as $a)
                                        <option value="{{ $a->idagente }}">{{ $a->nome }}{{ $a->especialidade ? ' - ' . $a->especialidade : '' }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-6 col-sm-6 mb-3">
                                <button type="button" id="chat-dashboard-buscar" class="btn btn-primary btn-sm">
                                    <i class="fa fa-search me-1"></i> Buscar
                                </button>
                                <button type="button" id="chat-dashboard-limpar" class="btn btn-outline-secondary btn-sm ms-1">
                                    <i class="fa fa-times me-1"></i> Limpar
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Agente selecionado: foto, nome e modelo (canto superior esquerdo) --}}
        <div class="row" id="chat-dashboard-agente-card" style="display: none;">
            <div class="col-12">
                <div class="card mb-4">
                    <div class="card-body d-flex align-items-center">
                        <div id="chat-dashboard-agente-foto" class="rounded-circle border border-2 border-success me-3" style="width: 80px; height: 80px; overflow: hidden; background: #10a37f; display: flex; align-items: center; justify-content: center; color: white; font-size: 2rem; font-weight: bold;"></div>
                        <div class="flex-grow-1">
                            <h5 class="mb-0" id="chat-dashboard-agente-nome"></h5>
                            <small class="text-muted d-block" id="chat-dashboard-agente-especialidade"></small>
                            <small class="text-muted">Dados filtrados por este agente</small>
                            <div class="mt-1">
                                <span class="badge bg-dark text-white" id="chat-dashboard-agente-modelo">Modelo: -</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Linha 1: Interações, Curtidas, Não curtidas (cards iguais) --}}
        <div class="row">
            <div class="col-xl-4 col-sm-6 mb-4">
                <div class="card h-100">
                    <div class="card-body p-3">
                        <div class="d-flex">
                            <div class="icon icon-shape bg-gradient-success shadow text-center border-radius-md" style="min-width: 48px; min-height: 48px;">
                                <i class="fa fa-comments text-lg opacity-10 mt-2"></i>
                            </div>
                            <div class="ms-3 min-w-0">
                                <p class="text-sm mb-0 text-uppercase font-weight-bold">Interações</p>
                                <h4 class="mb-0 font-weight-bold" id="stat-interacoes">-</h4>
                                <span class="text-xs">Total de mensagens</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-4 col-sm-6 mb-4">
                <div class="card h-100">
                    <div class="card-body p-3">
                        <div class="d-flex">
                            <div class="icon icon-shape bg-gradient-info shadow text-center border-radius-md" style="min-width: 48px; min-height: 48px;">
                                <i class="fa fa-thumbs-up text-lg opacity-10 mt-2"></i>
                            </div>
                            <div class="ms-3 min-w-0">
                                <p class="text-sm mb-0 text-uppercase font-weight-bold">Curtidas</p>
                                <h4 class="mb-0 font-weight-bold" id="stat-curtidas">-</h4>
                                <span class="text-xs">Feedback positivo</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-4 col-sm-6 mb-4">
                <div class="card h-100">
                    <div class="card-body p-3">
                        <div class="d-flex">
                            <div class="icon icon-shape bg-gradient-danger shadow text-center border-radius-md" style="min-width: 48px; min-height: 48px;">
                                <i class="fa fa-thumbs-down text-lg opacity-10 mt-2"></i>
                            </div>
                            <div class="ms-3 min-w-0">
                                <p class="text-sm mb-0 text-uppercase font-weight-bold">Não curtidas</p>
                                <h4 class="mb-0 font-weight-bold" id="stat-nao-curtidas">-</h4>
                                <span class="text-xs">Feedback negativo</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Linha 2: Média usuário, Média dia, Tempo médio por interação, Custo médio por interação --}}
        <div class="row">
            <div class="col-xl-3 col-sm-6 mb-4">
                <div class="card h-100">
                    <div class="card-body p-3">
                        <div class="d-flex">
                            <div class="icon icon-shape bg-gradient-warning shadow text-center border-radius-md" style="min-width: 48px; min-height: 48px;">
                                <i class="fa fa-user-friends text-lg opacity-10 mt-2"></i>
                            </div>
                            <div class="ms-3 min-w-0">
                                <p class="text-sm mb-0 text-uppercase font-weight-bold">Média por usuário</p>
                                <h4 class="mb-0 font-weight-bold" id="stat-media-usuario">-</h4>
                                <span class="text-xs">Interações / usuários únicos</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-3 col-sm-6 mb-4">
                <div class="card h-100">
                    <div class="card-body p-3">
                        <div class="d-flex">
                            <div class="icon icon-shape bg-gradient-secondary shadow text-center border-radius-md" style="min-width: 48px; min-height: 48px;">
                                <i class="fa fa-calendar-day text-lg opacity-10 mt-2"></i>
                            </div>
                            <div class="ms-3 min-w-0">
                                <p class="text-sm mb-0 text-uppercase font-weight-bold">Média por dia</p>
                                <h4 class="mb-0 font-weight-bold" id="stat-media-dia">-</h4>
                                <span class="text-xs">Interações / dia no período</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-3 col-sm-6 mb-4">
                <div class="card h-100">
                    <div class="card-body p-3">
                        <div class="d-flex">
                            <div class="icon icon-shape bg-gradient-primary shadow text-center border-radius-md" style="min-width: 48px; min-height: 48px;">
                                <i class="fa fa-clock text-lg opacity-10 mt-2"></i>
                            </div>
                            <div class="ms-3 min-w-0">
                                <p class="text-sm mb-0 text-uppercase font-weight-bold">Tempo médio por interação</p>
                                <h4 class="mb-0 font-weight-bold" id="stat-tempo-medio-interacao">-</h4>
                                <span class="text-xs">Da mensagem do usuário até a resposta</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-3 col-sm-6 mb-4">
                <div class="card h-100">
                    <div class="card-body p-3">
                        <div class="d-flex">
                            <div class="icon icon-shape bg-gradient-success shadow text-center border-radius-md" style="min-width: 48px; min-height: 48px;">
                                <i class="fa fa-dollar-sign text-lg opacity-10 mt-2"></i>
                            </div>
                            <div class="ms-3 min-w-0">
                                <p class="text-sm mb-0 text-uppercase font-weight-bold">Custo médio por interação</p>
                                <h4 class="mb-0 font-weight-bold text-success" id="stat-custo-medio-interacao">-</h4>
                                <span class="text-xs">USD por mensagem (assistente)</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Linha 3: Custo médio por dia, Custo médio em 30 dias (cards iguais) --}}
        <div class="row">
            <div class="col-xl-4 col-sm-6 mb-4">
                <div class="card h-100">
                    <div class="card-body p-3">
                        <div class="d-flex">
                            <div class="icon icon-shape bg-gradient-info shadow text-center border-radius-md" style="min-width: 48px; min-height: 48px;">
                                <i class="fa fa-calendar-alt text-lg opacity-10 mt-2"></i>
                            </div>
                            <div class="ms-3 min-w-0">
                                <p class="text-sm mb-0 text-uppercase font-weight-bold">Custo médio por dia</p>
                                <h4 class="mb-0 font-weight-bold text-success" id="stat-custo-medio-dia">-</h4>
                                <span class="text-xs">USD / dia no período</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-4 col-sm-6 mb-4">
                <div class="card h-100">
                    <div class="card-body p-3">
                        <div class="d-flex">
                            <div class="icon icon-shape bg-gradient-dark shadow text-center border-radius-md" style="min-width: 48px; min-height: 48px;">
                                <i class="fa fa-chart-line text-lg opacity-10 mt-2"></i>
                            </div>
                            <div class="ms-3 min-w-0">
                                <p class="text-sm mb-0 text-uppercase font-weight-bold">Custo médio em 30 dias</p>
                                <h4 class="mb-0 font-weight-bold text-success" id="stat-custo-medio-30-dias">-</h4>
                                <span class="text-xs">Projeção (média/dia × 30)</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-4 col-sm-6 mb-4">
                <div class="card h-100">
                    <div class="card-body p-3">
                        <div class="d-flex">
                            <div class="icon icon-shape bg-gradient-primary shadow text-center border-radius-md" style="min-width: 48px; min-height: 48px;">
                                <i class="fa fa-coins text-lg opacity-10 mt-2"></i>
                            </div>
                            <div class="ms-3 min-w-0">
                                <p class="text-sm mb-0 text-uppercase font-weight-bold">Custo total (período)</p>
                                <h4 class="mb-0 font-weight-bold text-success" id="stat-custo-total-periodo">-</h4>
                                <span class="text-xs">USD no intervalo filtrado</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Linha 4: Consumo de tokens e custo da IA (card largo, exceção) --}}
        <div class="row">
            <div class="col-12 mb-4">
                <div class="card">
                    <div class="card-header pb-0 pt-3">
                        <h6 class="mb-0">Consumo de tokens e custo da IA</h6>
                        <p class="text-xs text-muted mb-0">Valores em USD. Dados por interação quando o N8N envia usage no webhook.</p>
                    </div>
                    <div class="card-body p-3">
                        <div class="row">
                            <div class="col-6 col-md-3 mb-2">
                                <p class="text-xs mb-0 text-uppercase font-weight-bold text-muted">Tokens total</p>
                                <p class="mb-0 font-weight-bold" id="stat-tokens-total">-</p>
                            </div>
                            <div class="col-6 col-md-3 mb-2">
                                <p class="text-xs mb-0 text-uppercase font-weight-bold text-muted">Tokens entrada</p>
                                <p class="mb-0 font-weight-bold" id="stat-tokens-prompt">-</p>
                            </div>
                            <div class="col-6 col-md-3 mb-2">
                                <p class="text-xs mb-0 text-uppercase font-weight-bold text-muted">Tokens saída</p>
                                <p class="mb-0 font-weight-bold" id="stat-tokens-completion">-</p>
                            </div>
                            <div class="col-6 col-md-3 mb-2">
                                <p class="text-xs mb-0 text-uppercase font-weight-bold text-muted">Custo estimado (USD)</p>
                                <p class="mb-0 font-weight-bold text-success" id="stat-custo-estimado">-</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            {{-- Gráfico de uso --}}
            <div class="col-lg-8 mb-4">
                <div class="card h-100">
                    <div class="card-header pb-0 pt-3">
                        <h6 class="mb-0">Uso por dia</h6>
                        <p class="text-sm mb-0" id="chart-subtitle">Últimos 60 dias</p>
                    </div>
                    <div class="card-body p-3">
                        <div class="chart" style="min-height: 300px;">
                            <canvas id="chart-chat-uso" height="300"></canvas>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Top usuários que interagem --}}
            <div class="col-lg-4 mb-4">
                <div class="card h-100">
                    <div class="card-header pb-0 pt-3">
                        <h6 class="mb-0">Top usuários que interagem</h6>
                    </div>
                    <div class="card-body p-3">
                        <div class="table-responsive">
                            <table class="table table-sm table-hover align-items-center">
                                <thead>
                                    <tr>
                                        <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Usuário</th>
                                        <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 text-end">Mensagens</th>
                                    </tr>
                                </thead>
                                <tbody id="top-usuarios-tbody">
                                    <tr><td colspan="2" class="text-muted text-center">Carregando...</td></tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @push('scripts')
    <script src="/assets/js/plugins/chartjs.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
    <script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/pt.js"></script>
    <script>
    document.addEventListener('DOMContentLoaded', function() {
        var dateEl = document.getElementById('chat-dashboard-date');
        var agenteEl = document.getElementById('chat-dashboard-agente');
        var buscarBtn = document.getElementById('chat-dashboard-buscar');
        var limparBtn = document.getElementById('chat-dashboard-limpar');

        var hoje = new Date();
        var sessentaDiasAtras = new Date(hoje);
        sessentaDiasAtras.setDate(sessentaDiasAtras.getDate() - 60);

        var fp = flatpickr(dateEl, {
            mode: 'range',
            dateFormat: 'Y-m-d',
            defaultDate: [sessentaDiasAtras, hoje],
            locale: 'pt',
            onChange: function(selectedDates, dateStr) {
                if (selectedDates.length === 2) loadStats();
            }
        });

        function getParams() {
            var dates = fp.selectedDates;
            var dataInicio = dates.length >= 1 ? fp.formatDate(dates[0], 'Y-m-d') : null;
            var dataFim = dates.length === 2 ? fp.formatDate(dates[1], 'Y-m-d') : null;
            var idagente = agenteEl.value || '';
            return { data_inicio: dataInicio, data_fim: dataFim, idagente: idagente };
        }

        function loadStats() {
            var params = getParams();
            var qs = new URLSearchParams(params).toString();
            fetch('{{ route("dashboards.chat.stats") }}?' + qs, {
                headers: { 'X-Requested-With': 'XMLHttpRequest', 'Accept': 'application/json' }
            })
            .then(function(r) { return r.json(); })
            .then(function(data) {
                document.getElementById('stat-interacoes').textContent = data.interacoes ?? 0;
                document.getElementById('stat-curtidas').textContent = data.curtidas ?? 0;
                document.getElementById('stat-nao-curtidas').textContent = data.nao_curtidas ?? 0;
                document.getElementById('stat-media-usuario').textContent = (data.media_por_usuario ?? 0) !== 0 ? (data.media_por_usuario).toLocaleString('pt-BR') : '-';
                document.getElementById('stat-media-dia').textContent = (data.media_por_dia ?? 0) !== 0 ? (data.media_por_dia).toLocaleString('pt-BR') : '-';
                var tempoMedioEl = document.getElementById('stat-tempo-medio-interacao');
                if (tempoMedioEl) {
                    var seg = data.media_tempo_resposta_segundos;
                    if (seg != null && seg > 0) {
                        if (seg >= 60) {
                            var m = Math.floor(seg / 60);
                            var s = Math.round(seg % 60);
                            tempoMedioEl.textContent = s > 0 ? (m + 'm ' + s + 's') : (m + 'm');
                        } else {
                            tempoMedioEl.textContent = (Math.round(seg * 10) / 10) + 's';
                        }
                    } else {
                        tempoMedioEl.textContent = '-';
                    }
                }
                var custoSimb = data.custo_simbolo || '$';
                function fmtUsd(v) { return (v > 0) ? custoSimb + ' ' + Number(v).toLocaleString('en-US', { minimumFractionDigits: 4, maximumFractionDigits: 6 }) : '-'; }
                document.getElementById('stat-custo-medio-interacao').textContent = fmtUsd(data.custo_medio_interacao ?? 0);
                document.getElementById('stat-custo-medio-dia').textContent = fmtUsd(data.custo_medio_dia ?? 0);
                document.getElementById('stat-custo-medio-30-dias').textContent = fmtUsd(data.custo_medio_30_dias ?? 0);
                document.getElementById('stat-custo-total-periodo').textContent = fmtUsd(data.custo_estimado ?? 0);
                document.getElementById('stat-tokens-total').textContent = (data.tokens_total ?? 0) > 0 ? (data.tokens_total).toLocaleString('pt-BR') : '-';
                document.getElementById('stat-tokens-prompt').textContent = (data.tokens_prompt ?? 0) > 0 ? (data.tokens_prompt).toLocaleString('pt-BR') : '-';
                document.getElementById('stat-tokens-completion').textContent = (data.tokens_completion ?? 0) > 0 ? (data.tokens_completion).toLocaleString('pt-BR') : '-';
                document.getElementById('stat-custo-estimado').textContent = fmtUsd(data.custo_estimado ?? 0);

                var agenteCard = document.getElementById('chat-dashboard-agente-card');
                var agenteFoto = document.getElementById('chat-dashboard-agente-foto');
                var agenteNome = document.getElementById('chat-dashboard-agente-nome');
                var agenteModelo = document.getElementById('chat-dashboard-agente-modelo');
                if (data.agente && data.agente.nome) {
                    agenteCard.style.display = '';
                    agenteNome.textContent = data.agente.nome;
                    var agenteEspEl = document.getElementById('chat-dashboard-agente-especialidade');
                    if (agenteEspEl) {
                        agenteEspEl.textContent = data.agente.especialidade || '';
                        agenteEspEl.style.display = data.agente.especialidade ? 'block' : 'none';
                    }
                    agenteModelo.textContent = data.agente.modelo_label ? ('Modelo: ' + data.agente.modelo_label) : 'Modelo: -';
                    agenteFoto.innerHTML = '';
                    agenteFoto.style.background = '';
                    if (data.agente.foto_url) {
                        var img = document.createElement('img');
                        img.src = data.agente.foto_url;
                        img.alt = data.agente.nome;
                        img.style.width = '100%'; img.style.height = '100%'; img.style.objectFit = 'cover';
                        agenteFoto.appendChild(img);
                    } else {
                        agenteFoto.style.background = '#10a37f';
                        agenteFoto.style.color = 'white';
                        agenteFoto.style.display = 'flex';
                        agenteFoto.style.alignItems = 'center';
                        agenteFoto.style.justifyContent = 'center';
                        agenteFoto.style.fontSize = '2rem';
                        agenteFoto.textContent = (data.agente.nome || 'A').charAt(0).toUpperCase();
                    }
                } else {
                    agenteCard.style.display = 'none';
                }

                var tbody = document.getElementById('top-usuarios-tbody');
                if (data.top_usuarios && data.top_usuarios.length) {
                    tbody.innerHTML = data.top_usuarios.map(function(u, i) {
                        return '<tr><td><span class="text-sm font-weight-bold">' + (i+1) + '. ' + (u.nome || 'Usuário') + '</span></td><td class="text-end"><span class="badge bg-success">' + u.total + '</span></td></tr>';
                    }).join('');
                } else {
                    tbody.innerHTML = '<tr><td colspan="2" class="text-muted text-center">Nenhum dado no período.</td></tr>';
                }

                if (data.grafico && data.grafico.labels && data.grafico.data) {
                    updateChart(data.grafico.labels, data.grafico.data);
                }
                var sub = document.getElementById('chart-subtitle');
                if (params.data_inicio && params.data_fim) {
                    sub.textContent = params.data_inicio + ' até ' + params.data_fim;
                } else {
                    sub.textContent = 'Últimos 60 dias';
                }
            })
            .catch(function() {
                document.getElementById('stat-interacoes').textContent = '-';
                document.getElementById('stat-curtidas').textContent = '-';
                document.getElementById('stat-nao-curtidas').textContent = '-';
                document.getElementById('stat-media-usuario').textContent = '-';
                document.getElementById('stat-media-dia').textContent = '-';
                document.getElementById('stat-custo-medio-interacao').textContent = '-';
                document.getElementById('stat-custo-medio-dia').textContent = '-';
                document.getElementById('stat-custo-medio-30-dias').textContent = '-';
                document.getElementById('stat-custo-total-periodo').textContent = '-';
                document.getElementById('stat-tokens-total').textContent = '-';
                document.getElementById('stat-tokens-prompt').textContent = '-';
                document.getElementById('stat-tokens-completion').textContent = '-';
                document.getElementById('stat-custo-estimado').textContent = '-';
                document.getElementById('top-usuarios-tbody').innerHTML = '<tr><td colspan="2" class="text-danger text-center">Erro ao carregar.</td></tr>';
            });
        }

        var chartInstance = null;
        function updateChart(labels, data) {
            var ctx = document.getElementById('chart-chat-uso').getContext('2d');
            if (chartInstance) {
                chartInstance.data.labels = labels;
                chartInstance.data.datasets[0].data = data;
                chartInstance.update();
                return;
            }
            chartInstance = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: labels,
                    datasets: [{
                        label: 'Mensagens',
                        backgroundColor: 'rgba(16, 163, 127, 0.8)',
                        borderColor: 'rgba(16, 163, 127, 1)',
                        borderWidth: 1,
                        data: data,
                        maxBarThickness: 40
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: { legend: { display: false } },
                    scales: {
                        y: {
                            beginAtZero: true,
                            grid: { color: 'rgba(255,255,255,0.06)' },
                            ticks: { color: '#999' }
                        },
                        x: {
                            grid: { display: false },
                            ticks: { color: '#999', maxTicksLimit: 15 }
                        }
                    }
                }
            });
        }

        buscarBtn.addEventListener('click', loadStats);
        limparBtn.addEventListener('click', function() {
            fp.setDate([sessentaDiasAtras, hoje]);
            agenteEl.value = '';
            loadStats();
        });

        loadStats();
    });
    </script>
    @endpush
@endsection