<?php
require_once 'config/database.php';
require_once 'app/helpers/auth.php';
requireLogin();
require_once __DIR__ . '/app/helpers/rbac.php';
$userName = $_SESSION['user_name'] ?? 'User';
$page_js = 'ai_insights.js';
$canChat = isAdmin() || can('ai_insights.chat');
include 'views/layouts/header.php';
include 'views/layouts/sidebar.php';
?>
<main class="main-content">
<?php include 'views/layouts/topbar.php'; ?>
<div class="container-fluid p-3 p-md-4">
    <div id="alertBox" class="alert d-none"></div>

    <div class="card shadow-sm border-0 mb-4">
        <div class="card-body p-3 p-md-4">
            <div class="d-flex flex-column flex-md-row justify-content-between gap-3 align-items-md-center">
                <div>
                    <span class="badge bg-primary bg-opacity-10 text-primary mb-2 px-3 py-2"><i class="bi bi-robot me-1"></i> AI-Powered Insights</span>
                    <h3 class="mb-1">Fleet Intelligence Center</h3>
                    <p class="text-muted mb-0">Predictive analytics, driver behavior scoring, fuel forecasting, and utilization insights.</p>
                </div>
                <div class="d-flex gap-2">
                    <button type="button" class="btn btn-outline-primary" id="btnRefreshAll"><i class="bi bi-arrow-clockwise me-1"></i> Refresh All</button>
                </div>
            </div>
        </div>
    </div>

    <div class="row g-3 mb-4">
        <div class="col-6 col-md-3">
            <div class="card border-0 shadow-sm h-100" id="kpiCritical">
                <div class="card-body py-3 px-3">
                    <div class="d-flex align-items-center gap-3">
                        <div class="kpi-icon bg-danger bg-opacity-10 text-danger"><i class="bi bi-exclamation-triangle-fill"></i></div>
                        <div><div class="kpi-label">Critical Alerts</div><div class="kpi-value fs-4" id="kpiCriticalVal">-</div></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-6 col-md-3">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-body py-3 px-3">
                    <div class="d-flex align-items-center gap-3">
                        <div class="kpi-icon bg-warning bg-opacity-10 text-warning"><i class="bi bi-exclamation-circle-fill"></i></div>
                        <div><div class="kpi-label">Warnings</div><div class="kpi-value fs-4" id="kpiWarningsVal">-</div></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-6 col-md-3">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-body py-3 px-3">
                    <div class="d-flex align-items-center gap-3">
                        <div class="kpi-icon bg-info bg-opacity-10 text-info"><i class="bi bi-info-circle-fill"></i></div>
                        <div><div class="kpi-label">Insights</div><div class="kpi-value fs-4" id="kpiInfoVal">-</div></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-6 col-md-3">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-body py-3 px-3">
                    <div class="d-flex align-items-center gap-3">
                        <div class="kpi-icon bg-success bg-opacity-10 text-success"><i class="bi bi-graph-up-arrow"></i></div>
                        <div><div class="kpi-label">Avg Driver Score</div><div class="kpi-value fs-4" id="kpiDriverScore">-</div></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row g-3">
        <div class="col-lg-8">
            <div class="card shadow-sm border-0 mb-3">
                <div class="card-header bg-white d-flex justify-content-between align-items-center py-2">
                    <h6 class="mb-0"><i class="bi bi-tools me-1"></i> Predictive Maintenance</h6>
                    <button class="btn btn-sm btn-outline-primary" data-bs-toggle="collapse" data-bs-target="#predictivePanel">Toggle</button>
                </div>
                <div class="collapse show" id="predictivePanel">
                    <div class="card-body p-0">
                        <div id="predictiveContent" class="p-3 text-muted small">Loading maintenance predictions...</div>
                    </div>
                </div>
            </div>

            <div class="card shadow-sm border-0 mb-3">
                <div class="card-header bg-white d-flex justify-content-between align-items-center py-2">
                    <h6 class="mb-0"><i class="bi bi-people me-1"></i> Driver Behaviour Analysis</h6>
                    <button class="btn btn-sm btn-outline-primary" data-bs-toggle="collapse" data-bs-target="#driverPanel">Toggle</button>
                </div>
                <div class="collapse show" id="driverPanel">
                    <div class="card-body p-0">
                        <div id="driverContent" class="p-3 text-muted small">Loading driver analysis...</div>
                    </div>
                </div>
            </div>

            <div class="card shadow-sm border-0 mb-3">
                <div class="card-header bg-white d-flex justify-content-between align-items-center py-2">
                    <h6 class="mb-0"><i class="bi bi-fuel-pump me-1"></i> Fuel Consumption Prediction</h6>
                    <button class="btn btn-sm btn-outline-primary" data-bs-toggle="collapse" data-bs-target="#fuelPanel">Toggle</button>
                </div>
                <div class="collapse show" id="fuelPanel">
                    <div class="card-body p-0">
                        <div id="fuelContent" class="p-3 text-muted small">Loading fuel predictions...</div>
                    </div>
                </div>
            </div>

            <div class="card shadow-sm border-0 mb-3">
                <div class="card-header bg-white d-flex justify-content-between align-items-center py-2">
                    <h6 class="mb-0"><i class="bi bi-truck me-1"></i> Fleet Utilization Forecast</h6>
                    <button class="btn btn-sm btn-outline-primary" data-bs-toggle="collapse" data-bs-target="#utilPanel">Toggle</button>
                </div>
                <div class="collapse show" id="utilPanel">
                    <div class="card-body p-0">
                        <div id="utilContent" class="p-3 text-muted small">Loading utilization forecast...</div>
                    </div>
                </div>
            </div>

            <div class="card shadow-sm border-0 mb-3">
                <div class="card-header bg-white d-flex justify-content-between align-items-center py-2">
                    <h6 class="mb-0"><i class="bi bi-signpost-2 me-1"></i> Route Optimization Analysis</h6>
                    <button class="btn btn-sm btn-outline-primary" data-bs-toggle="collapse" data-bs-target="#routePanel">Toggle</button>
                </div>
                <div class="collapse show" id="routePanel">
                    <div class="card-body p-0">
                        <div id="routeContent" class="p-3 text-muted small">Loading route analysis...</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-4">
            <div class="card shadow-sm border-0 mb-3">
                <div class="card-header bg-white py-2">
                    <h6 class="mb-0"><i class="bi bi-lightbulb me-1"></i> AI Suggestions</h6>
                </div>
                <div class="card-body p-0" style="max-height:400px;overflow-y:auto">
                    <div id="suggestionsList" class="list-group list-group-flush small">
                        <div class="list-group-item text-muted text-center py-4">Loading suggestions...</div>
                    </div>
                </div>
            </div>

            <?php if ($canChat): ?>
            <div class="card shadow-sm border-0">
                <div class="card-header bg-white py-2">
                    <h6 class="mb-0"><i class="bi bi-chat-dots me-1"></i> AI Assistant</h6>
                </div>
                <div class="card-body p-0">
                    <div id="chatMessages" class="p-3" style="height:300px;overflow-y:auto">
                        <div class="text-muted text-center small py-4">Ask me anything about your fleet!</div>
                    </div>
                    <div class="border-top p-2 d-flex gap-2">
                        <input type="text" id="chatInput" class="form-control form-control-sm" placeholder="Ask about fleet status...">
                        <button class="btn btn-primary btn-sm" id="btnSendChat"><i class="bi bi-send"></i></button>
                    </div>
                </div>
            </div>
            <?php endif; ?>
        </div>
    </div>
</div>
</main>
<?php include 'views/layouts/footer.php'; ?>
