@extends('layouts.app')

@section('title', isset($platform) ? $platform . ' Apps' : (isset($category) ? $category->name : 'Discover Apps'))

@push('styles')
<style>
    .hero-section {
        position: relative;
        padding: clamp(2rem, 8vw, 5rem) 1.5rem;
        background: var(--bg-card);
        border-radius: 2rem;
        margin-bottom: 3rem;
        overflow: hidden;
        border: 1px solid var(--border-color);
        transition: var(--transition);
    }

    [data-theme="light"] .hero-section {
        background: linear-gradient(135deg, #f0f9ff 0%, #ffffff 100%);
    }

    .hero-section::after {
        content: '';
        position: absolute;
        top: -50%;
        right: -20%;
        width: 80%;
        height: 200%;
        background: radial-gradient(circle, rgba(0, 102, 255, 0.03) 0%, transparent 70%);
        z-index: 0;
        pointer-events: none;
    }

    /* Animated Icon Disc Visualization */
    .icon-disc-container {
        position: relative;
        width: 100%;
        height: 380px;
        display: flex;
        align-items: center;
        justify-content: center;
        perspective: 1200px;
    }

    .disc-base {
        position: relative;
        width: 320px;
        height: 320px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        transform-style: preserve-3d;
        transform: rotateX(60deg) rotateZ(0deg);
        animation: rotateDisc 25s linear infinite;
    }

    @keyframes rotateDisc {
        from { transform: rotateX(60deg) rotateZ(0deg); }
        to { transform: rotateX(60deg) rotateZ(360deg); }
    }

    .orbit-track {
        position: absolute;
        width: 260px;
        height: 260px;
        border: 2px dashed var(--primary-blue);
        border-radius: 50%;
        opacity: 0.15;
    }

    .disc-item-wrapper {
        position: absolute;
        width: 60px;
        height: 60px;
        transform-style: preserve-3d;
    }

    .disc-app-icon {
        width: 60px;
        height: 60px;
        border-radius: 1.1rem;
        padding: 4px;
        background: var(--bg-card);
        border: 1px solid var(--border-color);
        box-shadow: 0 10px 20px rgba(0,0,0,0.15);
        overflow: hidden;
        /* Counter-rotate to stay upright */
        animation: stayUpright 25s linear infinite, floatIcon 4s ease-in-out infinite;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    @keyframes stayUpright {
        from { transform: rotateZ(0deg) rotateX(-60deg); }
        to { transform: rotateZ(-360deg) rotateX(-60deg); }
    }

    @keyframes floatIcon {
        0%, 100% { margin-top: 0; }
        50% { margin-top: -15px; }
    }

    .disc-app-icon img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 0.9rem;
    }

    .center-core {
        position: absolute;
        width: 100px;
        height: 100px;
        background: var(--primary-blue);
        color: white;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 2.8rem;
        box-shadow: 0 0 40px rgba(0, 102, 255, 0.4);
        z-index: 10;
        /* Counter-tilt from the 60deg parent */
        transform: rotateX(-60deg);
        animation: pulseCore 3s infinite;
    }

    @keyframes pulseCore {
        0%, 100% { transform: rotateX(-60deg) scale(1); box-shadow: 0 0 30px rgba(0, 102, 255, 0.3); }
        50% { transform: rotateX(-60deg) scale(1.1); box-shadow: 0 0 50px rgba(0, 102, 255, 0.5); }
    }

    /* Grid System */
    .app-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 350px), 1fr));
        gap: 1.5rem;
        width: 100%;
    }

    /* Modern App Card */
    .app-card {
        background: var(--bg-card);
        border: 1px solid var(--border-color);
        border-radius: 1.5rem;
        padding: 1.5rem;
        display: flex;
        flex-direction: column;
        transition: var(--transition);
        height: 100%;
        position: relative;
    }

    .app-card:hover {
        transform: translateY(-8px);
        box-shadow: var(--card-hover-shadow);
        border-color: rgba(0, 102, 255, 0.2);
    }

    /* Icon Styling */
    .app-icon-container {
        width: 72px;
        height: 72px;
        border-radius: 1.1rem;
        overflow: hidden;
        background: var(--bg-body);
        flex-shrink: 0;
        box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    }

    .app-icon-container img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* Text & Badges */
    .platform-tag {
        font-size: 0.65rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        padding: 0.25rem 0.6rem;
        border-radius: 2rem;
        display: inline-flex;
        align-items: center;
    }

    .tag-android { background: #ecfdf5; color: #059669; }
    .tag-pc { background: #eff6ff; color: #2563eb; }
    .tag-ios { background: var(--bg-body); color: var(--text-main); border: 1px solid var(--border-color); }
    .tag-macos { background: #f5f3ff; color: #5b21b6; }

    [data-theme="dark"] .tag-android { background: rgba(5, 150, 105, 0.1); color: #10b981; }
    [data-theme="dark"] .tag-pc { background: rgba(37, 99, 235, 0.1); color: #60a5fa; }
    [data-theme="dark"] .tag-macos { background: rgba(91, 33, 182, 0.15); color: #c4b5fd; }

    .app-title {
        font-size: 1.2rem;
        font-weight: 700;
        color: var(--text-main);
        margin-top: 0.5rem;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .app-category {
        font-size: 0.85rem;
        color: var(--text-muted);
        font-weight: 500;
    }

    .app-description-wrapper {
        margin: 1.25rem 0;
    }

    .app-description {
        font-size: 0.9rem;
        color: var(--text-muted);
        line-height: 1.5;
        white-space: pre-line;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        max-height: 4.5em; /* Show 3 lines by default */
        transition: max-height 0.2s ease;
    }

    .app-description.expanded {
        display: block;
        -webkit-line-clamp: unset;
        max-height: none;
    }

    .description-toggle {
        border: none;
        background: transparent;
        color: var(--primary-blue);
        font-size: 0.88rem;
        font-weight: 700;
        padding: 0;
        cursor: pointer;
        margin-top: 0.35rem;
    }

    .description-toggle:hover,
    .description-toggle:focus {
        text-decoration: underline;
    }

    /* Stats bar */
    .app-stats-bar {
        background: var(--bg-body);
        border-radius: 1rem;
        padding: 0.75rem 1rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1.25rem;
        transition: var(--transition);
    }

    .stat-item {
        display: flex;
        flex-direction: column;
    }

    .stat-label {
        font-size: 0.65rem;
        text-transform: uppercase;
        color: var(--text-muted);
        font-weight: 700;
        letter-spacing: 0.02em;
    }

    .stat-value {
        font-size: 0.85rem;
        font-weight: 700;
        color: var(--text-main);
    }

    /* Category Navigation */
    .scroll-nav {
        display: flex;
        overflow-x: auto;
        gap: 0.75rem;
        padding-bottom: 1rem;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .scroll-nav::-webkit-scrollbar { display: none; }

    .nav-pill-custom {
        white-space: nowrap;
        padding: 0.6rem 1.25rem;
        border-radius: 100px;
        background: var(--bg-card);
        border: 1px solid var(--border-color);
        color: var(--text-muted);
        font-weight: 600;
        font-size: 0.9rem;
        transition: all 0.2s;
        text-decoration: none;
    }

    .nav-pill-custom:hover {
        border-color: var(--primary-blue);
        color: var(--text-main);
    }

    .nav-pill-custom.active {
        background: var(--primary-blue);
        border-color: var(--primary-blue);
        color: #ffffff;
        box-shadow: 0 4px 12px rgba(0, 102, 255, 0.25);
    }

    /* Responsive Adjustments */
    @media (max-width: 768px) {
        .hero-section { border-radius: 1.5rem; }
        .app-grid { gap: 1rem; }
        .app-card { padding: 1.25rem; }
    }
</style>
@endpush

@section('content')
<!-- Adaptive Hero -->
<div class="hero-section shadow-sm">
    <div class="row align-items-center g-4">
        <div class="col-lg-7 text-center text-lg-start position-relative" style="z-index: 1;">
            <span class="badge rounded-pill px-3 py-2 mb-3" style="background: rgba(0,102,255,0.08); color: #0066ff; font-weight: 700;">
                <i class="bi bi-rocket-takeoff-fill me-1"></i>
                @if(isset($platform)) {{ $platform }} Platform @else HBU App Store @endif
            </span>
            <h1 class="mb-3">
                @if(isset($platform))
                    The Best Apps for <span style="color: #0066ff">{{ $platform }}</span>
                @elseif(isset($category))
                    Apps in <span style="color: #0066ff">{{ $category->name }}</span>
                @else
                    Discover Your Next <span style="color: #0066ff">Favorite</span> App
                @endif
            </h1>
            <p class="lead text-secondary mb-4 mx-auto mx-lg-0" style="max-width: 550px;">
                Secure downloads for all your devices. Browse the latest high-performance applications carefully selected for you.
            </p>
        </div>

        <div class="col-lg-5 d-none d-lg-block">
            <div class="icon-disc-container">
                <!-- Center Core -->
                <div class="center-core">
                    <img src="{{ asset('hbu.png') }}" alt="HBU App Store Logo" class="img-fluid" style="border-radius: 50%; width: 100%; height: 100%; object-fit: cover;">
                </div>

                <!-- Orbiting Disc -->
                <div class="disc-base">
                    <div class="orbit-track"></div>

                    @php
                        $heroApps = $applications->whereNotNull('icon_path')->take(6);
                        $count = $heroApps->count();
                    @endphp

                    @foreach($heroApps as $index => $app)
                        @php
                            $angle = ($index / max(1, $count)) * 360;
                            $radius = 130;
                            $x = $radius * cos(deg2rad($angle));
                            $y = $radius * sin(deg2rad($angle));
                        @endphp
                        <div class="disc-item-wrapper" style="transform: translate({{ $x }}px, {{ $y }}px);">
                            <div class="disc-app-icon" style="animation-delay: -{{ $index * 0.7 }}s;">
                                <img src="{{ $app->icon_url ?? 'https://via.placeholder.com/72' }}" alt="{{ $app->name }}" onerror="this.onerror=null;this.src='https://via.placeholder.com/72?text=App';">
                            </div>
                        </div>
                    @endforeach

                    {{-- Dynamic spacers if apps are few --}}
                    @for($i = $count; $i < 4; $i++)
                         @php
                            $angle = ($i / 4) * 360;
                            $x = 130 * cos(deg2rad($angle));
                            $y = 130 * sin(deg2rad($angle));
                        @endphp
                        <div class="disc-item-wrapper" style="transform: translate({{ $x }}px, {{ $y }}px);">
                            <div class="disc-app-icon opacity-25">
                                <i class="bi bi-app text-muted"></i>
                            </div>
                        </div>
                    @endfor
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Category Filter -->
<div class="mb-5">
    <div class="d-flex align-items-center justify-content-between mb-3">
        <h5 class="fw-800 mb-0">Browse Categories</h5>
    </div>
    <div class="scroll-nav">
        <a href="{{ route('home') }}" class="nav-pill-custom {{ empty($category) ? 'active' : '' }}">All Applications</a>
        @foreach($categories as $cat)
            <a href="{{ route('category.show', $cat) }}" class="nav-pill-custom {{ (isset($category) && $category->id === $cat->id) ? 'active' : '' }}">
                {{ $cat->name }}
                <span class="badge rounded-pill bg-light text-dark ms-1 small opacity-50">{{ $cat->applications_count }}</span>
            </a>
        @endforeach
    </div>
</div>

<!-- App Listings -->
<div class="d-flex align-items-center justify-content-between mb-4">
    <h4 class="fw-800 mb-0">
        @if(isset($platform))
            {{ $platform }} Apps
        @elseif(isset($category))
            {{ $category->name }}
        @else
            Featured Apps
        @endif
    </h4>
    <span class="text-muted small fw-600">{{ count($applications) }} Apps Available</span>
</div>

<div class="app-grid">
    @forelse($applications as $app)
        <div class="app-card shadow-sm">
            <div class="d-flex align-items-start gap-3">
                <div class="app-icon-container">
                    <img src="{{ $app->icon_url ?? 'https://via.placeholder.com/72' }}" alt="{{ $app->name }}" loading="lazy" onerror="this.onerror=null;this.src='https://via.placeholder.com/72?text=App';">
                </div>
                <div class="flex-grow-1 min-w-0">
                    <span class="platform-tag {{ $app->platform == 'Android' ? 'tag-android' : ($app->platform == 'PC' ? 'tag-pc' : ($app->platform == 'macOS' ? 'tag-macos' : 'tag-ios')) }}">
                        <i class="bi bi-{{ $app->platform == 'Android' ? 'android2' : ($app->platform == 'PC' ? 'windows' : ($app->platform == 'macOS' ? 'laptop' : 'apple')) }} me-1"></i>
                        {{ $app->platform }}
                    </span>
                    <h5 class="app-title" title="{{ $app->name }}">{{ $app->name }}</h5>
                    <div class="app-category">{{ $app->category->name ?? 'Uncategorized' }}</div>
                </div>
            </div>

            <div class="app-description-wrapper">
                <p class="app-description">{!! nl2br(e($app->description)) !!}</p>
                <button type="button" class="description-toggle" aria-expanded="false">Show more</button>
            </div>

            <div class="app-stats-bar">
                <div class="stat-item">
                    <span class="stat-label">Downloads</span>
                    <span class="stat-value text-primary"><i class="bi bi-download me-1"></i>{{ number_format($app->downloads) }}</span>
                </div>
                <div class="stat-item text-end">
                    <span class="stat-label">File Size</span>
                    <span class="stat-value">{{ $app->download_size_human ?? 'Unknown' }}</span>
                </div>
            </div>

            <div class="mt-auto">
                @if($app->files->count() > 1)
                    <div class="dropdown">
                        <button class="btn btn-primary w-100 py-2 rounded-pill shadow-sm dropdown-toggle" type="button" data-bs-toggle="dropdown">
                            Download Now
                        </button>
                        <ul class="dropdown-menu w-100 shadow-lg border-0 mt-2 rounded-4">
                            <li class="dropdown-header small text-uppercase fw-bold text-muted">Select Architecture</li>
                            @foreach($app->files as $file)
                                <li>
                                    <a class="dropdown-item d-flex justify-content-between align-items-center py-2 px-3" href="{{ route('download', ['id' => $app->id, 'file_id' => $file->id]) }}">
                                        <div>
                                            <div class="fw-bold">{{ $file->architecture }}</div>
                                            <div class="small text-muted">{{ $file->file_size_human }}</div>
                                        </div>
                                        <i class="bi bi-download text-primary"></i>
                                    </a>
                                </li>
                            @endforeach
                        </ul>
                    </div>
                @else
                    @php
                        $firstFile = $app->files->first();
                        $downloadUrl = $firstFile
                            ? route('download', ['id' => $app->id, 'file_id' => $firstFile->id])
                            : route('download', ['id' => $app->id]);
                    @endphp
                    <a href="{{ $downloadUrl }}" class="btn btn-primary w-100 py-2 rounded-pill shadow-sm">
                        Download Now
                    </a>
                @endif
            </div>
        </div>
    @empty
        <div class="text-center py-5 w-100">
            <div class="p-5 border rounded-4 glass-card shadow-sm">
                <i class="bi bi-inbox text-muted display-4"></i>
                <h5 class="mt-3 text-muted">No applications found</h5>
                <p class="text-muted mb-0">Try checking another category or platform.</p>
            </div>
        </div>
    @endforelse
</div>

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function () {
        document.querySelectorAll('.app-description-wrapper').forEach(function (wrapper) {
            var description = wrapper.querySelector('.app-description');
            var toggle = wrapper.querySelector('.description-toggle');
            if (!description || !toggle) return;

            var isOverflowing = description.scrollHeight > description.clientHeight + 2;
            if (!isOverflowing) {
                toggle.style.display = 'none';
                return;
            }

            toggle.addEventListener('click', function () {
                var expanded = description.classList.toggle('expanded');
                toggle.textContent = expanded ? 'Show less' : 'Show more';
                toggle.setAttribute('aria-expanded', expanded ? 'true' : 'false');
            });
        });
    });
</script>
@endpush
@endsection