@extends('profile.profile')

@section('page_content')
    <div class="container">
        <!-- Top Cards Row -->
        <div class="row">
            <div class="col-md-4">
                <div class="card shadow-sm h-100">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5 class="mb-0"><span class="iconify" data-icon="mdi:play-circle-outline"></span> Last Watched</h5>
                        <a href="#" class="text-decoration-none small">View All</a>
                    </div>
                    <div class="card-body text-center">
                        @if($lastWatched)
                            <div class="position-relative mb-3">
                                <a href="#" class="d-block">
                                    <img src="http://image.tmdb.org/t/p/w342/{{ $lastWatched->poster_path }}" alt="{{ $lastWatched->title ?? $lastWatched->name }}" class="img-fluid rounded shadow-sm">
                                    <div class="overlay-play">
                                        <span class="iconify" data-icon="mdi:play-circle" data-width="48"></span>
                                    </div>
                                </a>
                            </div>
                            <h6 class="mb-1">{{ $lastWatched->title ?? $lastWatched->name }}</h6>
                            <div class="text-muted small">Watched on {{ now()->subDays(rand(1, 5))->format('M d, Y') }}</div>
                        @else
                            <div class="alert alert-light text-center p-4 mb-0">
                                <span class="iconify mb-3" data-icon="mdi:movie-off" data-width="48"></span>
                                <h6>Nothing watched yet!</h6>
                                <p class="mb-0 text-muted small">Start watching to track your viewing history.</p>
                            </div>
                        @endif
                    </div>
                </div>
            </div>

            <div class="col-md-4">
                <div class="card shadow-sm h-100">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5 class="mb-0"><span class="iconify" data-icon="mdi:chart-timeline-variant"></span> Watching Stats</h5>
                        <a href="#" class="text-decoration-none small">Details</a>
                    </div>
                    <div class="card-body">
                        <h6 class="text-uppercase text-muted small mb-3">Last 30 Days</h6>
                        <div class="d-flex justify-content-between mb-2">
                            <span><span class="iconify" data-icon="mdi:television"></span> Shows</span>
                            <span class="badge bg-primary rounded-pill">147 eps</span>
                        </div>
                        <div class="progress mb-3" style="height: 8px;">
                            <div class="progress-bar bg-primary" role="progressbar" style="width: 75%;" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
                        </div>

                        <div class="d-flex justify-content-between mb-2">
                            <span><span class="iconify" data-icon="mdi:movie"></span> Movies</span>
                            <span class="badge bg-success rounded-pill">12 movies</span>
                        </div>
                        <div class="progress mb-4" style="height: 8px;">
                            <div class="progress-bar bg-success" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                        </div>

                        <h6 class="text-uppercase text-muted small mb-3">All Time</h6>
                        <div class="row text-center">
                            <div class="col-6">
                                <h4 class="mb-0">12,095</h4>
                                <div class="small text-muted">Episodes</div>
                            </div>
                            <div class="col-6">
                                <h4 class="mb-0">568</h4>
                                <div class="small text-muted">Movies</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-md-4">
                <div class="card shadow-sm h-100">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5 class="mb-0"><span class="iconify" data-icon="mdi:format-list-bulleted"></span> Featured List</h5>
                        <a href="{{ route('profile.list.index', $user->slug) }}" class="text-decoration-none small">All Lists</a>
                    </div>
                    <div class="card-body">
                        <div class="featured-list">
                            <h6 class="mb-3">My Favorite Sci-Fi Movies</h6>
                            <div class="list-posters d-flex mb-3">
                                <div class="poster-thumbnail me-2">
                                    <img src="https://image.tmdb.org/t/p/w92/rEm96ib0sPiZBADNKBHKBv5bve9.jpg" class="rounded shadow-sm" alt="Movie poster">
                                </div>
                                <div class="poster-thumbnail me-2">
                                    <img src="https://image.tmdb.org/t/p/w92/5KlRFKKSbyCiyYpZSS3A6G5bW0K.jpg" class="rounded shadow-sm" alt="Movie poster">
                                </div>
                                <div class="poster-thumbnail me-2">
                                    <img src="https://image.tmdb.org/t/p/w92/wuMc08IPKEatf9rnMNXvIDxqP4W.jpg" class="rounded shadow-sm" alt="Movie poster">
                                </div>
                                <div class="poster-thumbnail more-posters d-flex justify-content-center align-items-center rounded">
                                    <span>+12</span>
                                </div>
                            </div>
                            <a href="#" class="btn btn-sm btn-outline-primary w-100">View List</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Favorites Section -->
        <div class="row mt-4">
            <div class="col-12">
                <div class="card shadow-sm">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5 class="mb-0"><span class="iconify" data-icon="mdi:heart"></span> Favorites</h5>
                        <a href="#" class="text-decoration-none small">View All</a>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            @for ($i = 0; $i < 6; $i++)
                                <div class="col-md-2 col-sm-4 col-6 mb-3">
                                    <div class="favorite-item text-center">
                                        <a href="#" class="d-block mb-2">
                                            <img src="https://picsum.photos/seed/{{ $i }}/185/278" class="img-fluid rounded shadow-sm" alt="Favorite item">
                                        </a>
                                        <h6 class="mb-0 text-truncate">Favorite Title</h6>
                                        <div class="small text-muted">
                                            <span class="iconify" data-icon="mdi:star" data-width="14"></span> 8.5
                                        </div>
                                    </div>
                                </div>
                            @endfor
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Recent Activity Sections -->
        <div class="row mt-4">
            <div class="col-md-6">
                <div class="card shadow-sm">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5 class="mb-0"><span class="iconify" data-icon="mdi:television"></span> Recent Episodes</h5>
                        <a href="#" class="text-decoration-none small">View All</a>
                    </div>
                    <div class="card-body p-0">
                        <ul class="list-group list-group-flush">
                            @for ($i = 0; $i < 5; $i++)
                                <li class="list-group-item">
                                    <div class="d-flex">
                                        <div class="flex-shrink-0 me-3">
                                            <img src="https://picsum.photos/seed/ep{{ $i }}/120/68" class="rounded shadow-sm" alt="Episode thumbnail">
                                        </div>
                                        <div>
                                            <h6 class="mb-0">Show Title</h6>
                                            <div class="small text-muted mb-1">S{{ rand(1, 5) }}E{{ rand(1, 20) }} • {{ rand(20, 45) }} min</div>
                                            <div class="small">Watched {{ rand(1, 30) }} days ago</div>
                                        </div>
                                    </div>
                                </li>
                            @endfor
                        </ul>
                    </div>
                </div>
            </div>

            <div class="col-md-6">
                <div class="card shadow-sm">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5 class="mb-0"><span class="iconify" data-icon="mdi:movie"></span> Recent Movies</h5>
                        <a href="#" class="text-decoration-none small">View All</a>
                    </div>
                    <div class="card-body p-0">
                        <ul class="list-group list-group-flush">
                            @for ($i = 0; $i < 5; $i++)
                                <li class="list-group-item">
                                    <div class="d-flex">
                                        <div class="flex-shrink-0 me-3">
                                            <img src="https://picsum.photos/seed/mv{{ $i }}/120/68" class="rounded shadow-sm" alt="Movie thumbnail">
                                        </div>
                                        <div>
                                            <h6 class="mb-0">Movie Title</h6>
                                            <div class="small text-muted mb-1">{{ rand(90, 180) }} min • {{ rand(2010, 2023) }}</div>
                                            <div class="small">
                                                <span class="badge bg-light text-dark me-1">Action</span>
                                                <span class="badge bg-light text-dark">Drama</span>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                            @endfor
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <!-- Bottom Sections -->
        <div class="row mt-4">
            <div class="col-md-6">
                <div class="card shadow-sm">
                    <div class="card-header">
                        <h5 class="mb-0"><span class="iconify" data-icon="mdi:chart-pie"></span> Most Watched Genres</h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            @foreach(['Action', 'Drama', 'Comedy', 'Sci-Fi', 'Thriller', 'Horror'] as $index => $genre)
                                <div class="col-6 mb-3">
                                    <div class="d-flex justify-content-between align-items-center mb-1">
                                        <span>{{ $genre }}</span>
                                        <span class="small text-muted">{{ rand(10, 150) }}</span>
                                    </div>
                                    <div class="progress" style="height: 6px;">
                                        <div class="progress-bar bg-{{ ['primary', 'success', 'info', 'warning', 'danger', 'secondary'][$index] }}"
                                             role="progressbar"
                                             style="width: {{ rand(20, 95) }}%;"
                                             aria-valuenow="{{ rand(20, 95) }}"
                                             aria-valuemin="0"
                                             aria-valuemax="100"></div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-md-6">
                <div class="card shadow-sm">
                    <div class="card-header">
                        <h5 class="mb-0"><span class="iconify" data-icon="mdi:star"></span> Ratings Distribution</h5>
                    </div>
                    <div class="card-body">
                        <div class="ratings-chart">
                            @for ($i = 10; $i >= 1; $i--)
                                <div class="d-flex align-items-center mb-2">
                                    <div class="rating-label me-2">{{ $i }}</div>
                                    <div class="progress flex-grow-1" style="height: 12px;">
                                        <div class="progress-bar bg-{{ $i >= 8 ? 'success' : ($i >= 5 ? 'warning' : 'danger') }}"
                                             role="progressbar"
                                             style="width: {{ $i == 8 ? 25 : ($i == 7 ? 20 : ($i == 9 ? 15 : rand(5, 10))) }}%;"
                                             aria-valuenow="{{ $i == 8 ? 25 : ($i == 7 ? 20 : ($i == 9 ? 15 : rand(5, 10))) }}"
                                             aria-valuemin="0"
                                             aria-valuemax="100"></div>
                                    </div>
                                    <div class="rating-count ms-2 small">{{ $i == 8 ? 25 : ($i == 7 ? 20 : ($i == 9 ? 15 : rand(5, 10))) }}</div>
                                </div>
                            @endfor
                            <div class="text-center mt-3">
                                <div class="small text-muted">Average rating: <strong>7.5</strong> from <strong>142</strong> ratings</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Comments Section -->
        <div class="row mt-4 mb-3">
            <div class="col-12">
                <div class="card shadow-sm">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5 class="mb-0"><span class="iconify" data-icon="mdi:comment-multiple"></span> Recent Comments</h5>
                        <a href="#" class="text-decoration-none small">View All</a>
                    </div>
                    <div class="card-body p-0">
                        <ul class="list-group list-group-flush">
                            @for ($i = 0; $i < 3; $i++)
                                <li class="list-group-item">
                                    <div class="d-flex">
                                        <div class="flex-shrink-0 me-3">
                                            <img src="https://picsum.photos/seed/user{{ $i }}/50/50" class="rounded-circle" alt="User avatar">
                                        </div>
                                        <div>
                                            <div class="d-flex align-items-center mb-1">
                                                <h6 class="mb-0 me-2">User Name</h6>
                                                <small class="text-muted">on <a href="#" class="text-decoration-none">Movie Title</a></small>
                                            </div>
                                            <p class="mb-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris.</p>
                                            <div class="small text-muted">{{ rand(1, 30) }} days ago</div>
                                        </div>
                                    </div>
                                </li>
                            @endfor
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection