<div class="container py-4">
    <!-- Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h2 class="fw-bold font-outfit text-dark m-0"><i class="fa-solid fa-user-gear text-primary me-2"></i>AI Mentor Matching</h2>
            <p class="text-muted mb-0">Connect with university students and alumni matching your targeted courses and preferred schools.</p>
        </div>
        <a href="<?= APP_URL ?>/mentors" class="btn btn-outline-secondary rounded-pill px-4">Browse Directory</a>
    </div>

    <!-- Match Results -->
    <div class="row g-4">
        <?php if (!empty($matches)): ?>
            <?php foreach ($matches as $mentor): ?>
                <?php
                // Map compatibility score to color
                $compColor = 'danger';
                if ($mentor['compatibility_score'] >= 70) $compColor = 'success';
                elseif ($mentor['compatibility_score'] >= 40) $compColor = 'warning';
                ?>
                <div class="col-lg-6">
                    <div class="card border-0 shadow-sm h-100 card-hover-effect border-start border-4 border-<?= $compColor ?>">
                        <div class="card-body p-4 d-flex flex-column">
                            <div class="d-flex align-items-start gap-3 mb-3">
                                <img src="<?= avatarUrl($mentor['avatar'], $mentor['first_name'] . ' ' . $mentor['last_name']) ?>" alt="Avatar" class="avatar-lg rounded-circle border border-2 border-white shadow-sm" style="width: 72px; height: 72px; object-fit: cover;">
                                <div class="flex-grow-1">
                                    <h5 class="fw-bold font-outfit text-dark mb-1"><?= htmlspecialchars($mentor['first_name'] . ' ' . $mentor['last_name']) ?></h5>
                                    <p class="text-xs text-muted mb-1"><i class="fa-solid fa-school text-primary me-1"></i> <?= htmlspecialchars($mentor['university_name'] ?? 'University') ?></p>
                                    <p class="text-xs text-muted mb-0"><i class="fa-solid fa-book-open text-primary me-1"></i> <?= htmlspecialchars($mentor['program'] ?? 'Academic Program') ?></p>
                                </div>
                                <div class="text-end">
                                    <div class="display-6 fw-bold font-outfit text-<?= $compColor ?> mb-0"><?= $mentor['compatibility_score'] ?>%</div>
                                    <small class="text-uppercase text-2xs fw-bold text-muted"><?= htmlspecialchars($mentor['compatibility_label']) ?></small>
                                </div>
                            </div>

                            <p class="text-muted text-sm flex-grow-1"><?= truncate(htmlspecialchars($mentor['bio']), 120) ?></p>

                            <!-- Match Explanations -->
                            <?php if (!empty($mentor['compatibility_reasons'])): ?>
                                <div class="bg-light rounded p-3 mb-3">
                                    <small class="text-xs fw-bold text-dark d-block mb-1"><i class="fa-solid fa-link me-2 text-primary"></i>Why You Matched</small>
                                    <ul class="list-unstyled text-xs text-muted mb-0">
                                        <?php foreach ($mentor['compatibility_reasons'] as $reason): ?>
                                            <li><i class="fa-solid fa-circle-check text-success me-2"></i> <?= htmlspecialchars($reason) ?></li>
                                        <?php endforeach; ?>
                                    </ul>
                                </div>
                            <?php endif; ?>

                            <div class="d-flex gap-2 mt-auto pt-3 border-top">
                                <a href="<?= APP_URL ?>/mentors/<?= $mentor['user_id'] ?>" class="btn btn-sm btn-primary rounded-pill px-4 font-outfit fw-bold flex-grow-1">View Profile</a>
                                <a href="<?= APP_URL ?>/sessions/book/<?= $mentor['user_id'] ?>" class="btn btn-sm btn-outline-primary rounded-pill px-3"><i class="fa-regular fa-calendar-check"></i> Book Session</a>
                            </div>
                        </div>
                    </div>
                </div>
            <?php endforeach; ?>
        <?php else: ?>
            <div class="col-12 text-center py-5 text-muted">
                <i class="fa-solid fa-users display-4 text-muted mb-3"></i>
                <h5 class="fw-bold">No Mentors Matched</h5>
                <p class="text-muted text-xs mx-auto" style="max-width: 360px;">To compute mentor matching, make sure to add your biography, intended program, and preferred school in your profile.</p>
                <a href="<?= APP_URL ?>/profile/edit" class="btn btn-primary rounded-pill px-4 mt-2">Update Profile</a>
            </div>
        <?php endif; ?>
    </div>
</div>
