<style>
.chart-container-saas { background: #0f172a; border: 1px solid #1e293b; border-radius: 16px; padding: 1.5rem; position: relative; }
.insight-card { background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(5, 150, 105, 0.05) 100%); border-left: 4px solid #10b981; }
.insight-card.critical { background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(185, 28, 28, 0.05) 100%); border-left: 4px solid #ef4444; }
.chart-js-dark-theme { font-family: 'Inter', sans-serif !important; }
</style>

<div class="row fade-in mb-4 pb-2 border-bottom">
    <div class="col-md-8">
        <h1 class="h2 fw-bold text-dark mb-1"><i class="fa-solid fa-brain text-primary me-2"></i> مركز اتخاذ القرار</h1>
        <p class="text-secondary mb-0">تحليل وتوليف بيانات النظام بالكامل.</p>
    </div>
</div>

<div class="row g-4 fade-in">
    <!-- SYSTEM INSIGHT & ACTION MODULE -->
    <div class="col-12">
        <div class="card p-4 border-0 shadow-sm rounded-4 insight-card <?= ($disciplineScore < 50 || strpos($insight, 'تحذير') !== false) ? 'critical' : '' ?>">
            <div class="row align-items-center">
                <div class="col-md-7">
                    <h6 class="fw-bold text-uppercase" style="letter-spacing: 1px; color: <?= ($disciplineScore < 50 || strpos($insight, 'تحذير') !== false) ? '#ef4444' : '#10b981' ?>;">
                        <i class="fa-solid fa-robot me-2"></i> التحليل الخوارزمي
                    </h6>
                    <p class="fs-5 fw-semibold m-0 text-dark" style="line-height: 1.6;"><?= $insight ?></p>
                </div>
                <div class="col-md-5 mt-4 mt-md-0 border-start ps-md-4">
                    <h6 class="fw-bold text-uppercase text-secondary" style="letter-spacing: 1px;">الإجراءات الموصى بها</h6>
                    <ul class="list-unstyled m-0 mt-3 d-flex flex-column gap-2">
                        <?php foreach($actions as $idx => $action): ?>
                        <li class="d-flex align-items-start text-dark fw-semibold">
                            <i class="fa-solid fa-arrow-left text-primary mt-1 ms-2"></i>
                            <?= $action ?>
                        </li>
                        <?php endforeach; ?>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <!-- CHARTS -->
    <!-- Task Completion Trend -->
    <div class="col-12 col-lg-8">
        <div class="chart-container-saas shadow-sm h-100">
            <h5 class="fw-bold mb-1 text-white"><i class="fa-regular fa-square-check me-2 text-info"></i> مؤشر إنجاز المهام (30 يوم)</h5>
            <p class="text-secondary small mb-3">معدل الاستخراج والإنتاجية مع مرور الوقت</p>
            <canvas id="taskChart" height="160"></canvas>
        </div>
    </div>

    <!-- Skill Levels Bar -->
    <div class="col-12 col-lg-4">
        <div class="chart-container-saas shadow-sm h-100">
            <h5 class="fw-bold mb-1 text-white"><i class="fa-solid fa-graduation-cap me-2 text-warning"></i> مصفوفة المهارات </h5>
            <p class="text-secondary small mb-3">أعلى 10 قدرات مكتسبة وفعالة</p>
            <canvas id="skillChart" height="260"></canvas>
        </div>
    </div>

    <!-- Weight Trend -->
    <div class="col-12 col-lg-6">
        <div class="chart-container-saas shadow-sm h-100">
            <h5 class="fw-bold mb-1 text-white"><i class="fa-solid fa-weight-scale me-2 text-danger"></i> الكتلة البيولوجية (90 يوم)</h5>
            <p class="text-secondary small mb-3">مسار الوزن الجسدي</p>
            <?php if (empty(json_decode($weightDates))): ?>
            <div class="text-center py-5 text-secondary"><i class="fa-solid fa-satellite-dish fa-2x mb-3 opacity-25"></i><p>لا يوجد تدفق بيانات.</p></div>
            <?php else: ?>
            <canvas id="weightChart" height="180"></canvas>
            <?php endif; ?>
        </div>
    </div>

    <!-- Income vs Expense -->
    <div class="col-12 col-lg-6">
        <div class="chart-container-saas shadow-sm h-100">
            <h5 class="fw-bold mb-1 text-white"><i class="fa-solid fa-coins me-2 text-success"></i> التدفق المالي (6 شهور)</h5>
            <p class="text-secondary small mb-3">معدل الاستحواذ المالي مقابل الاستهلاك</p>
            <canvas id="finChart" height="180"></canvas>
        </div>
    </div>
</div>

<script>
Chart.defaults.color = '#94a3b8';
Chart.defaults.font.family = "'Inter', sans-serif";

// ─── Task Completion Chart ────────────────────────────────
const taskLabels  = <?= $taskLabels ?>;
const taskValues  = <?= $taskValues ?>;

new Chart(document.getElementById('taskChart'), {
    type: 'bar',
    data: {
        labels: taskLabels,
        datasets: [{
            label: 'Execution %',
            data: taskValues,
            backgroundColor: taskValues.map(v => v >= 80 ? '#10b981' : v >= 50 ? '#f59e0b' : '#ef4444'),
            borderRadius: 4,
            borderSkipped: false,
        }]
    },
    options: {
        responsive: true,
        plugins: { legend: { display: false } },
        scales: {
            y: { min: 0, max: 100, ticks: { callback: v => v + '%' }, grid: { color: '#334155' } },
            x: { ticks: { maxRotation: 45, font: { size: 10 } }, grid: { display: false } }
        }
    }
});

// ─── Weight Chart ─────────────────────────────────────────
const weightDates = <?= $weightDates ?>;
const weightVals  = <?= $weightVals ?>;

if (weightDates.length > 0) {
    new Chart(document.getElementById('weightChart'), {
        type: 'line',
        data: {
            labels: weightDates,
            datasets: [{
                label: 'Mass (kg)',
                data: weightVals,
                borderColor: '#ef4444',
                backgroundColor: 'rgba(239, 68, 68, 0.1)',
                tension: 0.4,
                fill: true,
                pointRadius: 3,
                pointBackgroundColor: '#0f172a'
            }]
        },
        options: { 
            responsive: true, 
            plugins: { legend: { display: false } },
            scales: {
                y: { grid: { color: '#334155' } },
                x: { grid: { display: false } }
            }
        }
    });
}

// ─── Finance Chart ────────────────────────────────────────
const finLabels  = <?= $finLabels ?>;
const finIncome  = <?= $finIncome ?>;
const finExpense = <?= $finExpense ?>;

new Chart(document.getElementById('finChart'), {
    type: 'line',
    data: {
        labels: finLabels,
        datasets: [
            { label: 'Ingoing (Income)', data: finIncome, borderColor: '#10b981', backgroundColor: 'rgba(16, 185, 129, 0.1)', fill: true, tension: 0.3 },
            { label: 'Outgoing (Expense)', data: finExpense, borderColor: '#ef4444', backgroundColor: 'transparent', borderDash: [5, 5], tension: 0.3 }
        ]
    },
    options: {
        responsive: true,
        plugins: { legend: { position: 'top', labels: { color: '#e2e8f0' } } },
        scales: { 
            y: { beginAtZero: true, grid: { color: '#334155' } },
            x: { grid: { display: false } }
        }
    }
});

// ─── Skill Chart ──────────────────────────────────────────
const skillNames  = <?= $skillNames ?>;
const skillLevels = <?= $skillLevels ?>;

new Chart(document.getElementById('skillChart'), {
    type: 'bar',
    data: {
        labels: skillNames,
        datasets: [{
            data: skillLevels,
            backgroundColor: '#8b5cf6',
            borderRadius: 4,
        }]
    },
    options: {
        indexAxis: 'y',
        responsive: true,
        plugins: { legend: { display: false } },
        scales: { 
            x: { min: 0, max: 10, ticks: { stepSize: 1 }, grid: { color: '#334155' } },
            y: { grid: { display: false } }
        }
    }
});
</script>
