<?php
$sourceColors = [
    'health'  => ['color' => 'danger',  'bg' => '#dc354520'],
    'finance' => ['color' => 'success', 'bg' => '#19875420'],
    'skill'   => ['color' => 'primary', 'bg' => '#0d6efd20'],
];
?>

<!-- Header -->
<div class="d-flex align-items-center justify-content-between mb-4">
    <div>
        <h1 class="h3 fw-bold mb-0"><i class="fa-solid fa-bullseye text-primary me-2"></i>مركز الأهداف الموحد</h1>
        <p class="text-muted mb-0">جميع أهدافك في مكان واحد — صحة، مالية، ومهارات</p>
    </div>
    <!-- Overall Score -->
    <div class="text-center">
        <div class="rounded-circle d-flex align-items-center justify-content-center shadow" style="width:80px;height:80px;border:4px solid <?= $score >= 70 ? '#198754' : ($score >= 40 ? '#ffc107' : '#dc3545') ?>;">
            <div>
                <div class="fw-bold fs-4 lh-1"><?= $score ?>%</div>
                <small class="text-muted" style="font-size:0.6rem">إنجاز عام</small>
            </div>
        </div>
    </div>
</div>

<?php if (empty($goals)): ?>
<div class="text-center py-5">
    <i class="fa-solid fa-bullseye fa-4x text-muted mb-3"></i>
    <h4 class="text-muted">لا توجد أهداف مسجلة بعد</h4>
    <p class="text-secondary">أضف أهدافاً صحية من <a href="<?= BASE_URL ?>/health?tab=goals">مركز الصحة</a>، أو أهداف توفير من <a href="<?= BASE_URL ?>/finance?tab=savings">المالية</a>.</p>
</div>
<?php else: ?>

<!-- Summary Bar -->
<div class="row g-3 mb-4">
    <?php
    $counts = ['health' => 0, 'finance' => 0, 'skill' => 0];
    foreach ($goals as $g) $counts[$g['source']]++;
    ?>
    <div class="col-4">
        <div class="card border-0 rounded-4 text-center p-3" style="background:#dc354515;">
            <div class="fw-bold fs-3 text-danger"><?= $counts['health'] ?></div>
            <small class="text-muted">أهداف صحية</small>
        </div>
    </div>
    <div class="col-4">
        <div class="card border-0 rounded-4 text-center p-3" style="background:#19875415;">
            <div class="fw-bold fs-3 text-success"><?= $counts['finance'] ?></div>
            <small class="text-muted">أهداف توفير</small>
        </div>
    </div>
    <div class="col-4">
        <div class="card border-0 rounded-4 text-center p-3" style="background:#0d6efd15;">
            <div class="fw-bold fs-3 text-primary"><?= $counts['skill'] ?></div>
            <small class="text-muted">مسارات مهارية</small>
        </div>
    </div>
</div>

<!-- Goals List -->
<div class="row g-3">
    <?php foreach ($goals as $g): ?>
    <?php
        $sc = $sourceColors[$g['source']] ?? ['color' => 'secondary', 'bg' => '#6c757d20'];
        $pct = $g['pct'];
        $progressColor = $pct >= 75 ? '#198754' : ($pct >= 40 ? '#ffc107' : '#dc3545');
    ?>
    <div class="col-12 col-md-6">
        <div class="card border-0 shadow-sm rounded-4 h-100" style="border-right: 5px solid <?= $progressColor ?> !important;">
            <div class="card-body p-4">
                <!-- Header Row -->
                <div class="d-flex justify-content-between align-items-start mb-3">
                    <div class="d-flex align-items-center gap-2">
                        <div class="rounded-circle d-flex align-items-center justify-content-center" style="width:40px;height:40px;background:<?= $sc['bg'] ?>">
                            <i class="fa-solid <?= htmlspecialchars($g['icon']) ?> text-<?= $sc['color'] ?>"></i>
                        </div>
                        <div>
                            <div class="fw-bold lh-1"><?= htmlspecialchars($g['title']) ?></div>
                            <small>
                                <span class="badge bg-<?= $sc['color'] ?>-subtle text-<?= $sc['color'] ?> rounded-pill">
                                    <?= htmlspecialchars($g['source_label']) ?>
                                </span>
                            </small>
                        </div>
                    </div>
                    <span class="fw-bold fs-5" style="color:<?= $progressColor ?>"><?= $pct ?>%</span>
                </div>

                <!-- Progress -->
                <div class="progress mb-2" style="height:10px; border-radius:10px;">
                    <div class="progress-bar" style="width:<?= $pct ?>%; background:<?= $progressColor ?>; border-radius:10px;"></div>
                </div>

                <!-- Current / Target -->
                <div class="d-flex justify-content-between align-items-center">
                    <small class="text-muted">
                        الحالي: <strong><?= htmlspecialchars((string)$g['current']) ?> <?= htmlspecialchars($g['unit']) ?></strong>
                        &nbsp;/&nbsp;
                        الهدف: <strong><?= htmlspecialchars((string)$g['target']) ?> <?= htmlspecialchars($g['unit']) ?></strong>
                    </small>
                    <?php if ($g['due']): ?>
                    <small class="text-muted"><i class="fa-regular fa-calendar me-1"></i><?= $g['due'] ?></small>
                    <?php endif; ?>
                </div>

                <!-- Link -->
                <a href="<?= BASE_URL . htmlspecialchars($g['link']) ?>" class="stretched-link"></a>
            </div>
        </div>
    </div>
    <?php endforeach; ?>
</div>

<?php endif; ?>
