@extends('layouts.app')

@section('title', 'Activity Feed — LoreKeepers')

@section('content')
<div class="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8 py-10">

    <div class="flex items-center justify-between mb-6">
        <h1 class="text-2xl font-bold text-white">Activity Feed</h1>
        <div class="flex gap-2">
            <a href="{{ route('activity.index') }}"
               class="text-sm px-3 py-1.5 rounded-lg {{ request()->routeIs('activity.index') ? 'bg-purple-600 text-white' : 'text-slate-400 hover:text-slate-200' }} transition-colors">
                Following
            </a>
            <a href="{{ route('activity.global') }}"
               class="text-sm px-3 py-1.5 rounded-lg {{ request()->routeIs('activity.global') ? 'bg-purple-600 text-white' : 'text-slate-400 hover:text-slate-200' }} transition-colors">
                Global
            </a>
        </div>
    </div>

    @if($activities->isEmpty())
    <div class="text-center py-20">
        <div class="w-16 h-16 rounded-full bg-[#16161d] flex items-center justify-center mx-auto mb-4">
            <svg class="w-8 h-8 text-slate-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13 10V3L4 14h7v7l9-11h-7z"/>
            </svg>
        </div>
        <h3 class="text-lg font-medium text-slate-300 mb-2">No activity yet</h3>
        <p class="text-slate-500 mb-6">Follow some users to see their activity here.</p>
        <a href="{{ route('games.index') }}" class="inline-flex items-center gap-2 px-5 py-2.5 bg-purple-600 hover:bg-purple-700 text-white font-semibold rounded-lg transition-colors">
            Browse Games
        </a>
    </div>
    @else
    <div class="space-y-3">
        @foreach($activities as $activity)
        @php
            $game = $activity->subject;
        @endphp
        <div class="bg-[#16161d] border border-white/5 rounded-xl p-4 flex items-start gap-4">
            {{-- User avatar --}}
            <a href="{{ $activity->user ? route('users.show', $activity->user->slug) : '#' }}" class="flex-shrink-0">
                @if($activity->user?->avatar)
                    <img src="{{ $activity->user->avatar }}" class="w-9 h-9 rounded-full object-cover border border-white/10" alt="">
                @else
                    <div class="w-9 h-9 rounded-full bg-purple-700 flex items-center justify-center text-sm font-bold text-white">
                        {{ strtoupper(substr($activity->user?->name ?? '?', 0, 1)) }}
                    </div>
                @endif
            </a>

            {{-- Game thumbnail --}}
            @if($game && $game->cover_thumb_url)
            <a href="{{ route('games.show', $game->slug) }}" class="flex-shrink-0">
                <img src="{{ $game->cover_thumb_url }}" alt="{{ $game->title }}"
                     class="w-10 h-14 object-cover rounded border border-white/10 bg-[#0f0f13]">
            </a>
            @endif

            {{-- Activity text --}}
            <div class="flex-1 min-w-0">
                <p class="text-sm text-slate-300">
                    <a href="{{ $activity->user ? route('users.show', $activity->user->slug) : '#' }}"
                       class="font-semibold text-white hover:text-purple-300 transition-colors">
                        {{ $activity->user?->slug ?? 'Unknown' }}
                    </a>

                    @if($activity->type === 'added_to_library')
                        added
                        @if($game)
                        <a href="{{ route('games.show', $game->slug) }}" class="text-purple-400 hover:text-purple-300 font-medium transition-colors">{{ $game->title }}</a>
                        @endif
                        to their library
                        @if(!empty($activity->data['status']))
                        <span class="text-slate-500">as <span class="text-slate-400">{{ str_replace('_', ' ', $activity->data['status']) }}</span></span>
                        @endif

                    @elseif($activity->type === 'rated_game')
                        rated
                        @if($game)
                        <a href="{{ route('games.show', $game->slug) }}" class="text-purple-400 hover:text-purple-300 font-medium transition-colors">{{ $game->title }}</a>
                        @endif
                        <span class="text-yellow-400 font-semibold">{{ $activity->data['rating'] ?? '' }}/10</span>

                    @elseif($activity->type === 'reviewed_game')
                        reviewed
                        @if($game)
                        <a href="{{ route('games.show', $game->slug) }}" class="text-purple-400 hover:text-purple-300 font-medium transition-colors">{{ $game->title }}</a>
                        @endif
                        @if(!empty($activity->data['rating']))
                        <span class="text-slate-500">— <span class="text-yellow-400">{{ $activity->data['rating'] }}/10</span></span>
                        @endif

                    @else
                        {{ str_replace('_', ' ', $activity->type) }}
                        @if($game)
                        <a href="{{ route('games.show', $game->slug) }}" class="text-purple-400 hover:text-purple-300 font-medium transition-colors">{{ $game->title }}</a>
                        @endif
                    @endif
                </p>
                <p class="text-xs text-slate-600 mt-1">{{ $activity->created_at?->diffForHumans() }}</p>
            </div>
        </div>
        @endforeach
    </div>

    <div class="mt-6">
        {{ $activities->links() }}
    </div>
    @endif

</div>
@endsection