<div class="container py-4">
    <!-- Page Header -->
    <div class="text-center mb-5">
        <span class="badge rounded-pill px-3 py-2 mb-2 fw-semibold text-uppercase"
              style="background:rgba(30,58,95,0.1);color:var(--primary);font-family:var(--font-heading);">
            <i class="fa-solid fa-brain me-1"></i> AI-Powered Analysis
        </span>
        <h2 class="fw-bold font-outfit text-dark display-6 mb-2">WASSCE Eligibility Analyzer</h2>
        <p class="text-muted mx-auto" style="max-width: 560px;">
            Predict your admission outcomes. Our AI engine compares your aggregate score and grades against 
            historical entry requirements across all public universities.
        </p>
    </div>

    <?php if (empty($wassce)): ?>
        <!-- No Grades State -->
        <div class="row justify-content-center">
            <div class="col-md-6">
                <div class="boafo-card text-center p-5">
                    <div class="mx-auto mb-4 d-flex align-items-center justify-content-center rounded-circle"
                         style="width:90px;height:90px;background:rgba(30,58,95,0.08);">
                        <i class="fa-solid fa-calculator" style="font-size:2.5rem;color:var(--primary);"></i>
                    </div>
                    <h4 class="fw-bold font-outfit mb-2" style="color:var(--dark);">No Grades on Record</h4>
                    <p class="mb-4" style="color:var(--muted);max-width:380px;margin:0 auto 1.5rem;">
                        To run the analyzer, you must first enter your WASSCE examination grades. 
                        We require at least 6 subjects (core + elective).
                    </p>
                    <a href="<?= APP_URL ?>/profile/wassce" class="btn-primary-boafo">
                        <i class="fa-solid fa-pen-to-square"></i> Manage WASSCE Grades
                    </a>
                </div>
            </div>
        </div>
    <?php else: ?>
        <!-- Summary Stats Row -->
        <div class="row g-4 mb-5">
            <!-- Aggregate Score -->
            <div class="col-md-4">
                <div class="stat-card primary h-100 text-center">
                    <div class="stat-icon mx-auto" style="background:rgba(30,58,95,0.1);">
                        <i class="fa-solid fa-scroll" style="color:var(--primary);"></i>
                    </div>
                    <div class="stat-value"><?= $analysis['aggregate'] ?? '--' ?></div>
                    <div class="stat-label">Your Aggregate Score</div>
                    <p class="mt-2 mb-0" style="font-size:0.78rem;color:var(--muted);">Lower scores indicate better grades</p>
                </div>
            </div>
            <!-- Readiness Score -->
            <div class="col-md-4">
                <div class="stat-card accent h-100 text-center">
                    <div class="stat-icon mx-auto" style="background:rgba(244,161,29,0.15);">
                        <i class="fa-solid fa-gauge-high" style="color:var(--accent-dark);"></i>
                    </div>
                    <div class="stat-value" style="color:var(--accent-dark);"><?= $analysis['readiness_score'] ?? 0 ?>%</div>
                    <div class="stat-label">Admission Readiness</div>
                    <p class="mt-2 mb-0" style="font-size:0.78rem;color:var(--muted);">Programs you qualify for</p>
                </div>
            </div>
            <!-- Eligible / Total Programs -->
            <div class="col-md-4">
                <div class="stat-card primary h-100 text-center">
                    <div class="stat-icon mx-auto" style="background:rgba(30,58,95,0.1);">
                        <i class="fa-solid fa-building-columns" style="color:var(--primary);"></i>
                    </div>
                    <div class="stat-value">
                        <?= $analysis['total_eligible'] ?? 0 ?>
                        <span style="font-size:1rem;opacity:0.5;">/ <?= $analysis['total_programs'] ?? 0 ?></span>
                    </div>
                    <div class="stat-label">Eligible Programs</div>
                    <p class="mt-2 mb-0" style="font-size:0.78rem;color:var(--muted);">Across all university departments</p>
                </div>
            </div>
        </div>

        <!-- Results Grid -->
        <div class="row g-4">
            <!-- Eligible Programs -->
            <div class="col-lg-6">
                <div class="boafo-card h-100">
                    <div class="card-header-custom">
                        <h5 class="fw-bold font-outfit m-0" style="color:var(--primary);">
                            <i class="fa-solid fa-circle-check me-2" style="color:var(--primary);"></i>
                            Qualified Programs
                        </h5>
                        <span class="badge" style="background:rgba(30,58,95,0.1);color:var(--primary);">
                            <?= count($analysis['eligible_programs'] ?? []) ?> Programs
                        </span>
                    </div>
                    <div class="card-body-custom">
                        <?php if (!empty($analysis['eligible_programs'])): ?>
                            <div class="list-group list-group-flush">
                                <?php foreach ($analysis['eligible_programs'] as $prog): ?>
                                    <div class="eligible-program mb-2">
                                        <div class="d-flex justify-content-between align-items-start">
                                            <div>
                                                <h6 class="fw-bold mb-1" style="color:var(--dark);font-size:0.9rem;">
                                                    <?= e($prog['name']) ?>
                                                </h6>
                                                <small style="color:var(--muted);">
                                                    <i class="fa-solid fa-school me-1" style="color:var(--primary);"></i>
                                                    <?= e($prog['university_name']) ?>
                                                </small>
                                            </div>
                                            <span class="badge ms-2 flex-shrink-0"
                                                  style="background:rgba(30,58,95,0.1);color:var(--primary);font-size:0.72rem;">
                                                <?= $prog['eligibility']['admission_score'] ?>% Match
                                            </span>
                                        </div>
                                    </div>
                                <?php endforeach; ?>
                            </div>
                        <?php else: ?>
                            <div class="empty-state py-4">
                                <div class="empty-icon"><i class="fa-solid fa-graduation-cap"></i></div>
                                <p class="mb-0">No programs meet your current grade requirements.<br>Consider improving your grades for the next WASSCE.</p>
                            </div>
                        <?php endif; ?>
                    </div>
                </div>
            </div>

            <!-- Ineligible Programs -->
            <div class="col-lg-6">
                <div class="boafo-card h-100">
                    <div class="card-header-custom">
                        <h5 class="fw-bold font-outfit m-0" style="color:var(--accent-dark);">
                            <i class="fa-solid fa-circle-xmark me-2" style="color:var(--accent);"></i>
                            Not Yet Qualified
                        </h5>
                        <span class="badge" style="background:rgba(244,161,29,0.12);color:var(--accent-dark);">
                            <?= count($analysis['ineligible_programs'] ?? []) ?> Programs
                        </span>
                    </div>
                    <div class="card-body-custom">
                        <?php if (!empty($analysis['ineligible_programs'])): ?>
                            <div class="list-group list-group-flush">
                                <?php foreach ($analysis['ineligible_programs'] as $prog): ?>
                                    <div class="ineligible-program mb-2">
                                        <div class="d-flex justify-content-between align-items-start mb-2">
                                            <div>
                                                <h6 class="fw-bold mb-1" style="color:var(--dark);font-size:0.9rem;">
                                                    <?= e($prog['name']) ?>
                                                </h6>
                                                <small style="color:var(--muted);">
                                                    <i class="fa-solid fa-school me-1" style="color:var(--primary);"></i>
                                                    <?= e($prog['university_name']) ?>
                                                </small>
                                            </div>
                                        </div>
                                        <div class="rounded p-2" style="background:rgba(244,161,29,0.08);border:1px solid rgba(244,161,29,0.15);">
                                            <span class="fw-bold d-block mb-1" style="font-size:0.72rem;color:var(--accent-dark);text-transform:uppercase;letter-spacing:0.5px;">Reason for ineligibility:</span>
                                            <ul class="mb-0 ps-3" style="font-size:0.8rem;color:var(--accent-dark);">
                                                <?php foreach ($prog['eligibility']['missing'] as $miss): ?>
                                                    <li><?= e($miss) ?></li>
                                                <?php endforeach; ?>
                                            </ul>
                                        </div>
                                    </div>
                                <?php endforeach; ?>
                            </div>
                        <?php else: ?>
                            <div class="empty-state py-4">
                                <div class="empty-icon"><i class="fa-solid fa-trophy"></i></div>
                                <p class="mb-0" style="color:var(--primary);">
                                    <strong>Congratulations!</strong><br>
                                    You meet qualification requirements for all logged university programs.
                                </p>
                            </div>
                        <?php endif; ?>
                    </div>
                </div>
            </div>
        </div>

        <!-- CTA Row -->
        <div class="row mt-4">
            <div class="col-12 text-center">
                <a href="<?= APP_URL ?>/profile/wassce" class="btn-outline-boafo me-3">
                    <i class="fa-solid fa-pen-to-square"></i> Update Grades
                </a>
                <a href="<?= APP_URL ?>/mentors/matched" class="btn-primary-boafo">
                    <i class="fa-solid fa-user-gear"></i> Find Matched Mentors
                </a>
            </div>
        </div>
    <?php endif; ?>
</div>
