<?php

namespace Modules\BI\Controllers;

use Gestoreasy\Core\Http\Request;
use Gestoreasy\Core\Http\Response;

class BIViewsController {
    public function dashboard(Request $req): Response {
        $html = <<<HTML
<!DOCTYPE html>
<html>
<head>
    <title>BI - Dashboard</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; background: #f5f5f5; }
        .kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-bottom: 30px; }
        .kpi-card { background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
        .kpi-value { font-size: 32px; font-weight: bold; color: #d32f2f; }
        .kpi-label { color: #666; margin-top: 5px; }
        .chart-container { background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); margin-bottom: 20px; }
        .chart-title { font-size: 18px; font-weight: bold; margin-bottom: 15px; }
    </style>
</head>
<body>
    <h1>📊 Dashboard BI</h1>
    
    <div class="kpi-grid" id="kpis"></div>
    
    <div class="chart-container">
        <div class="chart-title">Vendas</div>
        <canvas id="vendasChart"></canvas>
    </div>
    
    <div class="chart-container">
        <div class="chart-title">Financeiro</div>
        <canvas id="financeiroChart"></canvas>
    </div>

    <script>
        async function loadKPIs() {
            const res = await fetch('/api/bi/dashboard/kpis');
            const {data} = await res.json();
            
            const kpisDiv = document.getElementById('kpis');
            kpisDiv.innerHTML = \`
                <div class="kpi-card">
                    <div class="kpi-value">R\$ \${data.vendas_mes_atual.toLocaleString('pt-BR', {minimumFractionDigits: 2})}</div>
                    <div class="kpi-label">Vendas do Mês</div>
                </div>
                <div class="kpi-card">
                    <div class="kpi-value">\${data.crescimento_vendas.toFixed(1)}%</div>
                    <div class="kpi-label">Crescimento</div>
                </div>
                <div class="kpi-card">
                    <div class="kpi-value">R\$ \${data.contas_receber.toLocaleString('pt-BR', {minimumFractionDigits: 2})}</div>
                    <div class="kpi-label">A Receber</div>
                </div>
                <div class="kpi-card">
                    <div class="kpi-value">\${data.estoque_baixo}</div>
                    <div class="kpi-label">Estoque Baixo</div>
                </div>
            \`;
        }

        async function loadVendasChart() {
            const res = await fetch('/api/bi/dashboard/vendas?periodo=30d');
            const {data} = await res.json();
            
            new Chart(document.getElementById('vendasChart'), {
                type: 'line',
                data: {
                    labels: data.labels,
                    datasets: [{
                        label: 'Vendas',
                        data: data.values,
                        borderColor: '#d32f2f',
                        backgroundColor: 'rgba(211, 47, 47, 0.1)',
                    }]
                },
                options: {
                    responsive: true,
                    scales: {
                        y: { beginAtZero: true }
                    }
                }
            });
        }

        async function loadFinanceiroChart() {
            const res = await fetch('/api/bi/dashboard/financeiro?periodo=30d');
            const {data} = await res.json();
            
            new Chart(document.getElementById('financeiroChart'), {
                type: 'line',
                data: {
                    labels: data.labels,
                    datasets: [
                        {
                            label: 'Recebimentos',
                            data: data.recebimentos,
                            borderColor: '#4caf50',
                        },
                        {
                            label: 'Pagamentos',
                            data: data.pagamentos,
                            borderColor: '#f44336',
                        }
                    ]
                },
                options: {
                    responsive: true,
                    scales: { y: { beginAtZero: true } }
                }
            });
        }

        loadKPIs();
        loadVendasChart();
        loadFinanceiroChart();
    </script>
</body>
</html>
HTML;

        return new Response(200, [], $html);
    }

    public function relatorios(Request $req): Response {
        return new Response(200, [], '<h1>Relatórios Gerenciais</h1><p>Em desenvolvimento...</p>');
    }

    public function config(Request $req): Response {
        return new Response(200, [], '<h1>Configurações BI</h1><p>Em desenvolvimento...</p>');
    }
}

