@extends('layout.layout')

@section('content')
    <div class="app-bg catalog-page">
        <div class="page-shell">
            @include('components.alert')

            <div class="catalog-head">
                <div>
                    <div class="catalog-title">Course Catalog</div>
                    <p class="catalog-subtitle">Choose a course, review the details, reserve your schedule, then complete payment to activate enrollment.</p>
                </div>

                <a href="{{ route('student.payments.index') }}" class="catalog-icon-btn" title="Open payments" aria-label="Open payments">
                    <i class="fa-solid fa-credit-card"></i>
                </a>
            </div>

            <div class="catalog-toolbar">
                <label class="catalog-search" for="catalogSearch">
                    <i class="fa-solid fa-magnifying-glass"></i>
                    <input id="catalogSearch" type="search" placeholder="Search courses">
                </label>

                <div class="catalog-filter" role="group" aria-label="Audience filter">
                    <button type="button" class="is-active" data-audience-filter="all">All</button>
                    <button type="button" data-audience-filter="Kids">Kids</button>
                    <button type="button" data-audience-filter="Teens">Teens</button>
                    <button type="button" data-audience-filter="Adults">Adults</button>
                </div>
            </div>

            <div id="catalogGrid" class="catalog-grid" aria-live="polite">
                <article class="catalog-skeleton"></article>
                <article class="catalog-skeleton"></article>
                <article class="catalog-skeleton"></article>
            </div>
        </div>
    </div>
@endsection

@push('styles')
    <style>
        .catalog-page {
            background: #f6f8fb;
            color: #0f172a;
        }

        .catalog-head,
        .catalog-toolbar {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 1rem;
            margin-bottom: 1rem;
        }

        .catalog-title {
            color: #071b3d;
            font-size: 1.15rem;
            font-weight: 850;
            line-height: 1.2;
        }

        .catalog-subtitle {
            max-width: 720px;
            margin: 0.3rem 0 0;
            color: #64748b;
            font-size: 0.9rem;
        }

        .catalog-icon-btn {
            width: 44px;
            height: 44px;
            border: 1px solid #dbe7f6;
            border-radius: 8px;
            background: #fff;
            color: #0f1724;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            text-decoration: none;
            box-shadow: 0 10px 24px rgba(7, 27, 61, 0.06);
        }

        .catalog-search {
            width: min(100%, 440px);
            min-height: 46px;
            border: 1px solid #dbe7f6;
            border-radius: 8px;
            background: #fff;
            color: #64748b;
            display: flex;
            align-items: center;
            gap: 0.7rem;
            padding: 0 0.9rem;
            box-shadow: 0 10px 24px rgba(7, 27, 61, 0.04);
        }

        .catalog-search input {
            width: 100%;
            border: 0;
            outline: 0;
            color: #0f172a;
            font-size: 0.9rem;
        }

        .catalog-filter {
            display: inline-flex;
            gap: 0.35rem;
            padding: 0.3rem;
            border: 1px solid #dbe7f6;
            border-radius: 8px;
            background: #fff;
            box-shadow: 0 10px 24px rgba(7, 27, 61, 0.04);
        }

        .catalog-filter button {
            min-height: 38px;
            border: 0;
            border-radius: 7px;
            background: transparent;
            color: #475569;
            padding: 0 0.85rem;
            font-size: 0.8rem;
            font-weight: 800;
        }

        .catalog-filter button.is-active {
            background: #071b3d;
            color: #fff;
        }

        .catalog-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 1rem;
        }

        .course-card {
            min-height: 520px;
            border: 1px solid #dbe7f6;
            border-radius: 8px;
            background: #fff;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            box-shadow: 0 14px 30px rgba(7, 27, 61, 0.06);
            transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
            cursor: pointer;
        }

        .course-card:hover {
            border-color: #93b9f4;
            box-shadow: 0 18px 38px rgba(7, 27, 61, 0.11);
            transform: translateY(-2px);
        }

        .course-card__image {
            position: relative;
            height: 164px;
            background: #eaf2ff;
            overflow: hidden;
        }

        .course-card__image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        .course-card__category {
            position: absolute;
            left: 0.75rem;
            top: 0.75rem;
            max-width: calc(100% - 1.5rem);
            padding: 0.3rem 0.6rem;
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.92);
            color: #071b3d;
            font-size: 0.7rem;
            font-weight: 850;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .course-card__body {
            display: flex;
            flex: 1;
            flex-direction: column;
            gap: 0.75rem;
            padding: 1rem;
        }

        .course-card__title {
            min-height: 2.7rem;
            color: #071b3d;
            font-size: 1rem;
            font-weight: 850;
            line-height: 1.35;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .course-card__meta {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 0.55rem;
        }

        .course-meta {
            min-height: 58px;
            border: 1px solid #e7eef8;
            border-radius: 8px;
            background: #f8fbff;
            display: grid;
            gap: 0.15rem;
            padding: 0.65rem;
        }

        .course-meta small {
            color: #64748b;
            font-size: 0.68rem;
            font-weight: 750;
        }

        .course-meta strong {
            color: #0f1724;
            font-size: 0.85rem;
            font-weight: 850;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .course-card__chips {
            display: flex;
            flex-wrap: wrap;
            gap: 0.35rem;
            min-height: 30px;
        }

        .course-chip {
            min-height: 26px;
            padding: 0.25rem 0.55rem;
            border-radius: 999px;
            background: #eaf2ff;
            color: #0f1724;
            font-size: 0.72rem;
            font-weight: 850;
        }

        .course-card__description {
            color: #475569;
            font-size: 0.84rem;
            line-height: 1.55;
        }

        .course-card__description:not(.is-expanded) {
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .course-card__more {
            align-self: flex-start;
            border: 0;
            background: transparent;
            color: #0f1724;
            padding: 0;
            font-size: 0.78rem;
            font-weight: 850;
        }

        .course-card__footer {
            margin-top: auto;
            padding-top: 0.35rem;
        }

        .course-subscribe {
            width: 100%;
            min-height: 44px;
            border: 0;
            border-radius: 8px;
            background: #0f1724;
            color: #fff;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            text-decoration: none;
            font-size: 0.88rem;
            font-weight: 850;
            box-shadow: 0 12px 22px rgba(11, 79, 197, 0.2);
        }

        .course-subscribe:hover {
            color: #fff;
            background: #071b3d;
        }

        .catalog-empty,
        .catalog-error {
            grid-column: 1 / -1;
            min-height: 260px;
            border: 1px solid #dbe7f6;
            border-radius: 8px;
            background: #fff;
            display: grid;
            place-items: center;
            text-align: center;
            padding: 2rem;
        }

        .catalog-empty i,
        .catalog-error i {
            color: #0f1724;
            font-size: 2rem;
            margin-bottom: 0.8rem;
        }

        .catalog-empty strong,
        .catalog-error strong {
            display: block;
            color: #071b3d;
            font-size: 1rem;
            font-weight: 850;
        }

        .catalog-empty p,
        .catalog-error p {
            max-width: 440px;
            margin: 0.35rem auto 0;
            color: #64748b;
        }

        .catalog-skeleton {
            min-height: 520px;
            border: 1px solid #dbe7f6;
            border-radius: 8px;
            background:
                linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.7), transparent) -120px 0 / 120px 100% no-repeat,
                linear-gradient(#e7eef8 0 0) 0 0 / 100% 164px no-repeat,
                linear-gradient(#eef4fb 0 0) 1rem 190px / 72% 20px no-repeat,
                linear-gradient(#eef4fb 0 0) 1rem 232px / calc(100% - 2rem) 58px no-repeat,
                linear-gradient(#eef4fb 0 0) 1rem 314px / calc(100% - 2rem) 70px no-repeat,
                #fff;
            animation: catalog-shimmer 1.25s infinite linear;
        }

        @keyframes catalog-shimmer {
            to {
                background-position:
                    calc(100% + 120px) 0,
                    0 0,
                    1rem 190px,
                    1rem 232px,
                    1rem 314px,
                    0 0;
            }
        }

        @media (max-width: 760px) {
            .catalog-head,
            .catalog-toolbar {
                flex-direction: column;
                align-items: stretch;
            }

            .catalog-search,
            .catalog-icon-btn {
                width: 100%;
            }

            .catalog-filter {
                overflow-x: auto;
            }

            .course-card {
                min-height: 500px;
            }
        }

        @media (max-width: 1100px) {
            .catalog-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
        }

        @media (max-width: 680px) {
            .catalog-grid {
                grid-template-columns: 1fr;
            }
        }
    </style>
@endpush

@push('scripts')
    <script>
        (function () {
            const endpoint = @json(route('course-catalog.options'));
            const grid = document.getElementById('catalogGrid');
            const searchInput = document.getElementById('catalogSearch');
            const filterButtons = document.querySelectorAll('[data-audience-filter]');
            let courses = [];
            let activeAudience = 'all';

            document.addEventListener('DOMContentLoaded', loadCourses);
            searchInput?.addEventListener('input', renderCourses);
            filterButtons.forEach(button => {
                button.addEventListener('click', () => {
                    activeAudience = button.dataset.audienceFilter;
                    filterButtons.forEach(item => item.classList.toggle('is-active', item === button));
                    renderCourses();
                });
            });

            async function loadCourses() {
                try {
                    const response = await fetch(endpoint, { headers: { 'Accept': 'application/json' } });
                    const data = await response.json();

                    if (!response.ok) {
                        throw new Error(data.message || 'Could not load courses.');
                    }

                    courses = data.courses || [];
                    renderCourses();
                } catch (error) {
                    grid.innerHTML = stateMarkup('catalog-error', 'fa-solid fa-triangle-exclamation', 'Courses could not be loaded', error.message || 'Please try again later.');
                }
            }

            function renderCourses() {
                const query = String(searchInput?.value || '').toLowerCase().trim();
                const filtered = courses.filter(course => {
                    const matchesSearch = !query || [course.name, course.description, course.category].some(value => String(value || '').toLowerCase().includes(query));
                    const matchesAudience = activeAudience === 'all' || (course.audiences || []).includes(activeAudience);

                    return matchesSearch && matchesAudience;
                });

                if (!filtered.length) {
                    grid.innerHTML = stateMarkup('catalog-empty', 'fa-regular fa-folder-open', 'No courses available', 'Try another search or audience filter.');
                    return;
                }

                grid.innerHTML = filtered.map(courseCard).join('');
            }

            function courseCard(course) {
                return `
                    <article class="course-card" tabindex="0" data-details-url="${escapeHtml(course.details_url || course.subscribe_url)}" onclick="window.location.href = this.dataset.detailsUrl" onkeydown="if(event.key === 'Enter'){ window.location.href = this.dataset.detailsUrl }">
                        <div class="course-card__image">
                            <img src="${escapeHtml(course.image_url)}" alt="${escapeHtml(course.name)}">
                            ${course.category ? `<span class="course-card__category">${escapeHtml(course.category)}</span>` : ''}
                        </div>
                        <div class="course-card__body">
                            <div class="course-card__title" title="${escapeHtml(course.name)}">${escapeHtml(course.name)}</div>
                            <div class="course-card__meta">
                                <div class="course-meta">
                                    <small>Total levels</small>
                                    <strong>${Number(course.levels_count || 0) || '-'}</strong>
                                </div>
                                <div class="course-meta">
                                    <small>Tracks</small>
                                    <strong>${escapeHtml((course.modes || []).join(', ') || '-')}</strong>
                                </div>
                            </div>
                            <div class="course-card__chips">
                                ${(course.audiences || []).map(audience => `<span class="course-chip">${escapeHtml(audience)}</span>`).join('')}
                            </div>
                            <p class="course-card__description">${escapeHtml(course.description)}</p>
                            <button type="button" class="course-card__more" onclick="event.stopPropagation(); toggleDescription(this)">See More</button>
                            <div class="course-card__footer">
                                <a href="${escapeHtml(course.details_url || course.subscribe_url)}" class="course-subscribe" onclick="event.stopPropagation()">
                                    <i class="fa-solid fa-arrow-right"></i>
                                    <span>View Details</span>
                                </a>
                            </div>
                        </div>
                    </article>
                `;
            }

            function stateMarkup(className, icon, title, message) {
                return `
                    <div class="${className}">
                        <div>
                            <i class="${icon}"></i>
                            <strong>${escapeHtml(title)}</strong>
                            <p>${escapeHtml(message)}</p>
                        </div>
                    </div>
                `;
            }

            window.toggleDescription = function (button) {
                const description = button.closest('.course-card__body')?.querySelector('.course-card__description');

                if (!description) {
                    return;
                }

                const expanded = description.classList.toggle('is-expanded');
                button.textContent = expanded ? 'See Less' : 'See More';
            };

            function escapeHtml(value) {
                return String(value ?? '')
                    .replace(/&/g, '&amp;')
                    .replace(/</g, '&lt;')
                    .replace(/>/g, '&gt;')
                    .replace(/"/g, '&quot;')
                    .replace(/'/g, '&#039;');
            }
        })();
    </script>
@endpush