<?php
/**
 * Career Assessment Results View
 * Displays AI-matched career recommendations after completing the assessment.
 */
?>
<div class="container py-4">
    <div class="text-center mb-5">
        <span class="badge bg-success-subtle text-success rounded-pill px-3 py-1 font-outfit fw-bold mb-2 text-uppercase" style="letter-spacing:1px;font-size:11px;"><i class="fa-solid fa-check-circle me-1"></i> Assessment Complete</span>
        <h2 class="fw-bold font-outfit text-dark">Your Career Matches</h2>
        <p class="text-muted col-md-6 mx-auto">Based on your interests, strengths, and goals, here are the career pathways best suited for you.</p>
    </div>

    <!-- Top Match Highlight -->
    <?php if (!empty($results)): ?>
    <?php $top = $results[0]; ?>
    <div class="card border-0 shadow mb-5 overflow-hidden" style="background: linear-gradient(135deg, #0d6efd15, #6610f215);">
        <div class="card-body p-5">
            <div class="row align-items-center g-4">
                <div class="col-md-8">
                    <span class="badge bg-warning-subtle text-warning rounded-pill px-3 py-1 font-outfit fw-bold text-xs mb-2">🏆 TOP MATCH</span>
                    <h2 class="fw-bold font-outfit text-dark mb-2"><?= htmlspecialchars($top['title']) ?></h2>
                    <p class="text-muted mb-3"><?= htmlspecialchars($top['overview']) ?></p>
                    <div class="d-flex align-items-center gap-3 mb-4">
                        <div class="progress flex-grow-1" style="height: 10px;">
                            <div class="progress-bar bg-success rounded-pill" style="width: <?= $top['match_score'] ?>%;"></div>
                        </div>
                        <span class="fw-bold text-success font-outfit fs-5"><?= $top['match_score'] ?>%</span>
                    </div>
                    <div class="d-flex flex-wrap gap-2 mb-4">
                        <?php foreach ($top['match_reasons'] ?? [] as $reason): ?>
                            <span class="badge bg-primary-subtle text-primary rounded-pill px-3 py-1 text-xs font-outfit"><?= htmlspecialchars($reason) ?></span>
                        <?php endforeach; ?>
                    </div>
                    <a href="<?= APP_URL ?>/careers/<?= $top['id'] ?>" class="btn btn-primary rounded-pill px-5 fw-bold font-outfit">
                        <i class="fa-solid fa-compass me-2"></i>Explore This Career
                    </a>
                </div>
                <div class="col-md-4 text-center d-none d-md-block">
                    <div style="font-size: 8rem; line-height:1; opacity: 0.12;">🎯</div>
                </div>
            </div>
        </div>
    </div>

    <!-- All Results -->
    <h5 class="fw-bold font-outfit text-dark mb-4">All Career Matches <small class="text-muted fw-normal">(<?= count($results) ?> found)</small></h5>
    <div class="row g-4">
        <?php foreach ($results as $idx => $career): ?>
            <div class="col-md-4">
                <div class="card border-0 shadow-sm h-100 hover-lift">
                    <div class="card-body p-4">
                        <div class="d-flex justify-content-between align-items-start mb-3">
                            <span class="badge bg-<?= $idx === 0 ? 'warning' : ($idx === 1 ? 'light text-secondary' : 'light text-secondary') ?> rounded-pill text-xs font-outfit">#<?= $idx + 1 ?></span>
                            <span class="fw-bold font-outfit text-<?= $career['match_score'] >= 70 ? 'success' : ($career['match_score'] >= 50 ? 'warning' : 'muted') ?> fs-6"><?= $career['match_score'] ?>%</span>
                        </div>
                        <h5 class="fw-bold font-outfit text-dark mb-2"><?= htmlspecialchars($career['title']) ?></h5>
                        <p class="text-muted text-sm mb-3 line-clamp-2"><?= htmlspecialchars($career['overview']) ?></p>
                        <div class="progress rounded-pill mb-3" style="height: 6px;">
                            <div class="progress-bar bg-primary rounded-pill" style="width: <?= $career['match_score'] ?>%;"></div>
                        </div>
                        <div class="d-flex flex-wrap gap-1 mb-3">
                            <?php foreach (array_slice($career['match_reasons'] ?? [], 0, 2) as $reason): ?>
                                <span class="badge bg-primary-subtle text-primary rounded-pill text-xs"><?= htmlspecialchars($reason) ?></span>
                            <?php endforeach; ?>
                        </div>
                        <a href="<?= APP_URL ?>/careers/<?= $career['id'] ?>" class="btn btn-outline-primary btn-sm rounded-pill px-3 w-100 font-outfit fw-bold">View Roadmap</a>
                    </div>
                </div>
            </div>
        <?php endforeach; ?>
    </div>
    <?php else: ?>
        <div class="text-center py-5">
            <div class="text-6xl mb-3">🤔</div>
            <h5 class="fw-bold font-outfit text-dark">No Strong Matches Found</h5>
            <p class="text-muted">Try expanding your interests or adjusting your goals to get better recommendations.</p>
            <a href="<?= APP_URL ?>/careers/assessment" class="btn btn-primary rounded-pill px-5 font-outfit fw-bold mt-2">Retake Assessment</a>
        </div>
    <?php endif; ?>

    <!-- Action Footer -->
    <div class="card border-0 shadow-sm p-4 mt-5 text-center bg-glass">
        <h6 class="fw-bold font-outfit text-dark mb-2">Want to explore further?</h6>
        <p class="text-muted text-sm mb-3">Browse all career guides or speak with a mentor in your field of interest.</p>
        <div class="d-flex justify-content-center flex-wrap gap-3">
            <a href="<?= APP_URL ?>/careers" class="btn btn-outline-primary rounded-pill px-4 font-outfit fw-bold"><i class="fa-solid fa-compass me-2"></i>Browse All Careers</a>
            <a href="<?= APP_URL ?>/mentors" class="btn btn-primary rounded-pill px-4 font-outfit fw-bold"><i class="fa-solid fa-user-tie me-2"></i>Find a Mentor</a>
            <a href="<?= APP_URL ?>/careers/assessment" class="btn btn-outline-secondary rounded-pill px-4 font-outfit fw-bold"><i class="fa-solid fa-rotate me-2"></i>Retake Assessment</a>
        </div>
    </div>
</div>
