<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">My Academic & Mentoring Sessions</h2>
            <p class="text-muted mb-0">Manage your scheduled virtual counseling classes and academic review calendars.</p>
        </div>
        <?php if (Auth::isStudent()): ?>
            <a href="<?= APP_URL ?>/mentors" class="btn btn-primary rounded-pill px-4 shadow-sm"><i class="fa-regular fa-calendar-check me-2"></i>Book New Session</a>
        <?php endif; ?>
    </div>

    <!-- Sessions List -->
    <div class="row g-4">
        <div class="col-12">
            <div class="card border-0 shadow-sm p-4">
                <?php if (!empty($sessions)): ?>
                    <div class="table-responsive">
                        <table class="table align-middle">
                            <thead>
                                <tr class="text-muted text-xs uppercase font-outfit border-bottom">
                                    <th>Session Topic</th>
                                    <th>Partner</th>
                                    <th>Type</th>
                                    <th>Scheduled Time</th>
                                    <th>Duration</th>
                                    <th>Status</th>
                                    <th class="text-end">Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                <?php foreach ($sessions as $sess): ?>
                                    <tr class="border-bottom border-light">
                                        <td>
                                            <h6 class="fw-bold text-dark mb-0"><?= htmlspecialchars($sess['title']) ?></h6>
                                            <small class="text-xs text-muted d-block text-truncate" style="max-width: 260px;" title="<?= htmlspecialchars($sess['description']) ?>"><?= htmlspecialchars($sess['description']) ?></small>
                                        </td>
                                        <td>
                                            <div class="d-flex align-items-center">
                                                <?php
                                                $pName = Auth::isStudent()
                                                    ? $sess['mentor_first'] . ' ' . $sess['mentor_last']
                                                    : $sess['student_first'] . ' ' . $sess['student_last'];
                                                $pAvatar = Auth::isStudent() ? $sess['mentor_avatar'] : $sess['student_avatar'];
                                                ?>
                                                <img src="<?= avatarUrl($pAvatar, $pName) ?>" alt="Avatar" class="avatar-sm rounded-circle me-2">
                                                <span class="text-sm font-medium text-dark"><?= htmlspecialchars($pName) ?></span>
                                            </div>
                                        </td>
                                        <td>
                                            <span class="badge bg-light text-dark text-capitalize text-xs"><?= str_replace('_', ' ', htmlspecialchars($sess['session_type'])) ?></span>
                                        </td>
                                        <td class="text-sm text-dark font-medium">
                                            <?= formatDateTime($sess['scheduled_at']) ?>
                                        </td>
                                        <td class="text-sm text-muted">
                                            <?= $sess['duration_min'] ?> Mins
                                        </td>
                                        <td>
                                            <?= statusBadge($sess['status']) ?>
                                        </td>
                                        <td class="text-end">
                                            <div class="d-flex justify-content-end gap-2">
                                                <!-- Action buttons depending on status and role -->
                                                <?php if ($sess['status'] === 'pending' && Auth::isMentor()): ?>
                                                    <form action="<?= APP_URL ?>/sessions/<?= $sess['id'] ?>/confirm" method="POST" class="d-inline">
                                                        <?= csrf_field() ?>
                                                        <button type="submit" class="btn btn-xs btn-success rounded-pill px-3"><i class="fa-solid fa-check me-1"></i> Confirm</button>
                                                    </form>
                                                <?php endif; ?>

                                                <?php if ($sess['status'] === 'confirmed'): ?>
                                                    <!-- Join Video Call (in-app) -->
                                                    <a href="<?= APP_URL ?>/sessions/<?= $sess['id'] ?>/meeting" class="btn btn-xs btn-info text-white rounded-pill px-3">
                                                        <i class="fa-solid fa-video me-1"></i> Join Call
                                                    </a>

                                                    <!-- Add to Calendar Dropdown -->
                                                    <div class="dropdown d-inline">
                                                        <button class="btn btn-xs btn-outline-secondary rounded-pill px-3 dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                                            <i class="fa-regular fa-calendar-plus me-1"></i> Calendar
                                                        </button>
                                                        <ul class="dropdown-menu dropdown-menu-end shadow-sm border-0 rounded-3" style="min-width:200px;">
                                                            <?php
                                                            $gcTitle    = urlencode($sess['title']);
                                                            $gcStart    = gmdate('Ymd\THis\Z', strtotime($sess['scheduled_at']));
                                                            $gcEnd      = gmdate('Ymd\THis\Z', strtotime($sess['scheduled_at']) + $sess['duration_min'] * 60);
                                                            $gcDetails  = urlencode('Join via BOAFO: ' . APP_URL . '/sessions/' . $sess['id'] . '/meeting');
                                                            $gcLocation = urlencode(APP_URL . '/sessions/' . $sess['id'] . '/meeting');
                                                            $gcUrl = "https://calendar.google.com/calendar/render?action=TEMPLATE&text={$gcTitle}&dates={$gcStart}/{$gcEnd}&details={$gcDetails}&location={$gcLocation}";
                                                            ?>
                                                            <li>
                                                                <a class="dropdown-item d-flex align-items-center gap-2 py-2" href="<?= $gcUrl ?>" target="_blank">
                                                                    <img src="https://ssl.gstatic.com/calendar/images/dynamiclogo_2020q4/calendar_16_2x.png" width="16" alt="Google Calendar">
                                                                    <span class="text-sm">Google Calendar</span>
                                                                </a>
                                                            </li>
                                                            <li>
                                                                <a class="dropdown-item d-flex align-items-center gap-2 py-2" href="<?= APP_URL ?>/sessions/<?= $sess['id'] ?>/ics">
                                                                    <i class="fa-regular fa-calendar-check text-primary" style="width:16px;"></i>
                                                                    <span class="text-sm">Download .ics</span>
                                                                </a>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                <?php endif; ?>

                                                <?php if (in_array($sess['status'], ['pending', 'confirmed'])): ?>
                                                    <?php if ($sess['status'] === 'confirmed'): ?>
                                                        <form action="<?= APP_URL ?>/sessions/<?= $sess['id'] ?>/done" method="POST" class="d-inline">
                                                            <?= csrf_field() ?>
                                                            <button type="submit" class="btn btn-xs btn-outline-success rounded-pill px-3" onclick="return confirm('Are you sure you want to mark this session as done?')"><i class="fa-solid fa-check-double me-1"></i> Done</button>
                                                        </form>
                                                    <?php endif; ?>
                                                    <form action="<?= APP_URL ?>/sessions/<?= $sess['id'] ?>/cancel" method="POST" class="d-inline">
                                                        <?= csrf_field() ?>
                                                        <button type="submit" class="btn btn-xs btn-outline-danger rounded-pill px-3" onclick="return confirm('Are you sure you want to cancel this session?')"><i class="fa-solid fa-xmark me-1"></i> Cancel</button>
                                                    </form>
                                                <?php endif; ?>

                                                <?php if ($sess['status'] === 'confirmed' && Auth::isStudent() && strtotime($sess['scheduled_at']) < time()): ?>
                                                    <!-- Enable rating if session is in past -->
                                                    <button type="button" class="btn btn-xs btn-warning rounded-pill px-3 text-dark font-weight-bold" data-bs-toggle="modal" data-bs-target="#rateModal<?= $sess['id'] ?>"><i class="fa-regular fa-star me-1"></i> Rate Session</button>

                                                    <!-- Rate Modal -->
                                                    <div class="modal fade" id="rateModal<?= $sess['id'] ?>" tabindex="-1" aria-hidden="true">
                                                        <div class="modal-dialog modal-dialog-centered">
                                                            <div class="modal-content border-0 shadow-lg rounded-4 text-start">
                                                                <div class="modal-header border-0 pb-0">
                                                                    <h5 class="fw-bold font-outfit text-dark m-0">Review Mentorship Session</h5>
                                                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                                                </div>
                                                                <form action="<?= APP_URL ?>/sessions/<?= $sess['id'] ?>/rate" method="POST">
                                                                    <?= csrf_field() ?>
                                                                    <div class="modal-body p-4">
                                                                        <p class="text-muted text-xs mb-3">Provide feedback on your counseling meeting with <?= htmlspecialchars($pName) ?>. This helps us maintain mentor quality.</p>
                                                                        
                                                                        <div class="mb-3">
                                                                            <label class="form-label text-sm fw-medium d-block">Rating Stars</label>
                                                                            <div class="star-rating-selector d-flex gap-2 justify-content-center py-2 bg-light rounded-3">
                                                                                <?php for ($star = 5; $star >= 1; $star--): ?>
                                                                                    <input type="radio" id="star<?= $star ?>_<?= $sess['id'] ?>" name="rating" value="<?= $star ?>" <?= $star === 5 ? 'checked' : '' ?> class="d-none star-radio">
                                                                                    <label for="star<?= $star ?>_<?= $sess['id'] ?>" class="star-label fs-3 text-muted" style="cursor:pointer;"><i class="fa-solid fa-star"></i></label>
                                                                                <?php endfor; ?>
                                                                            </div>
                                                                        </div>

                                                                        <div class="mb-0">
                                                                            <label for="feedback<?= $sess['id'] ?>" class="form-label text-sm fw-medium">Review Message</label>
                                                                            <textarea class="form-control rounded-3 text-sm" id="feedback<?= $sess['id'] ?>" name="feedback" rows="3" required placeholder="Write a short summary of how this session helped you..."></textarea>
                                                                        </div>
                                                                    </div>
                                                                    <div class="modal-footer border-0 pt-0">
                                                                        <button type="button" class="btn btn-outline-secondary rounded-pill px-3" data-bs-dismiss="modal">Close</button>
                                                                        <button type="submit" class="btn btn-primary rounded-pill px-4 shadow-sm">Submit Review</button>
                                                                    </div>
                                                                </form>
                                                            </div>
                                                        </div>
                                                    </div>
                                                <?php endif; ?>

                                                <?php if ($sess['status'] === 'completed'): ?>
                                                    <span class="text-xs text-muted"><i class="fa-solid fa-check-double text-success me-1"></i> Completed & Reviewed</span>
                                                <?php endif; ?>
                                            </div>
                                        </td>
                                    </tr>
                                <?php endforeach; ?>
                            </tbody>
                        </table>
                    </div>
                <?php else: ?>
                    <div class="text-center py-5 text-muted">
                        <i class="fa-regular fa-calendar-times display-4 mb-3"></i>
                        <h5>No Sessions Logged</h5>
                        <p class="text-xs max-w-sm mx-auto">You do not have any upcoming or completed classes recorded in your session profile.</p>
                    </div>
                <?php endif; ?>
            </div>
        </div>
    </div>
</div>

<style>
/* Star rating visual selection CSS toggle */
.star-radio:checked ~ .star-label {
    color: #ffc107 !important;
}
.star-label:hover,
.star-label:hover ~ .star-label {
    color: #ffca08 !important;
}
</style>
