@extends('layouts.app')

@section('title', __('ui.community_feed_title').' · Coaster World')

@section('content')
@php
    $kindIcons = [
        'rides' => '🎢',
        'visits' => '🎟️',
        'badges' => '🏅',
        'challenges' => '🏆',
        'road_trips' => '🗺️',
        'reviews' => '⭐',
        'photos' => '📷',
    ];
    $filters = ['all', 'rides', 'visits', 'badges', 'challenges', 'road_trips', 'reviews', 'photos'];
@endphp

<section class="community-feed-hero">
    <div class="container community-feed-hero-grid">
        <div>
            <span class="eyebrow">{{ __('ui.community_feed_kicker') }}</span>
            <h1>{{ __('ui.community_feed_title') }}</h1>
            <p>{{ __('ui.community_feed_intro') }}</p>
            <div class="community-feed-privacy">
                <span>🛡️</span>
                <p>{{ __('ui.community_feed_privacy') }}</p>
            </div>
        </div>
        <div class="community-feed-hero-stat">
            <span>{{ __('ui.community_feed_people') }}</span>
            <strong>{{ $actor_count }}</strong>
            <small>{{ $scope === 'friends' ? __('ui.community_feed_people_friends') : __('ui.community_feed_people_public') }}</small>
        </div>
    </div>
</section>

<section class="section community-feed-controls-section">
    <div class="container">
        <div class="community-feed-controls">
            <div class="community-feed-scope-tabs" aria-label="{{ __('ui.community_feed_scope_label') }}">
                <a href="{{ route('community.feed', ['scope' => 'friends', 'type' => $filter]) }}" class="{{ $scope === 'friends' ? 'is-active' : '' }}">
                    <span>👥</span>
                    <strong>{{ __('ui.community_feed_scope_friends') }}</strong>
                    <small>{{ __('ui.community_feed_scope_friends_help') }}</small>
                </a>
                <a href="{{ route('community.feed', ['scope' => 'community', 'type' => $filter]) }}" class="{{ $scope === 'community' ? 'is-active' : '' }}">
                    <span>🌍</span>
                    <strong>{{ __('ui.community_feed_scope_community') }}</strong>
                    <small>{{ __('ui.community_feed_scope_community_help') }}</small>
                </a>
            </div>

            <div class="community-feed-filter-wrap">
                <span>{{ __('ui.community_feed_filter_label') }}</span>
                <div class="community-feed-filter-chips">
                    @foreach($filters as $filterKey)
                        <a href="{{ route('community.feed', ['scope' => $scope, 'type' => $filterKey]) }}" class="{{ $filter === $filterKey ? 'is-active' : '' }}">
                            @if($filterKey !== 'all')<span>{{ $kindIcons[$filterKey] ?? '•' }}</span>@endif
                            {{ __('ui.community_feed_filter_'.$filterKey) }}
                            @if($filterKey !== 'all' && $filter === 'all' && ($type_counts[$filterKey] ?? 0) > 0)
                                <small>{{ $type_counts[$filterKey] }}</small>
                            @endif
                        </a>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</section>

<section class="section community-feed-section">
    <div class="container community-feed-layout">
        <div class="community-feed-stream">
            <div class="section-heading community-feed-heading">
                <div>
                    <span class="eyebrow">{{ __('ui.community_feed_stream_kicker') }}</span>
                    <h2>{{ __('ui.community_feed_stream_title') }}</h2>
                </div>
                <span>{{ $events->total() }} {{ __('ui.community_feed_events') }}</span>
            </div>

            @if($events->count())
                <div class="community-feed-list">
                    @foreach($events as $event)
                        <article class="community-feed-card is-{{ $event['kind'] }}">
                            <div class="community-feed-card-rail">
                                <span class="community-feed-kind-icon">{{ $kindIcons[$event['kind']] ?? '•' }}</span>
                                <i></i>
                            </div>
                            <div class="community-feed-card-main">
                                <div class="community-feed-actor-row">
                                    @if($event['actor_url'])
                                        <a class="community-feed-avatar" href="{{ $event['actor_url'] }}">{{ $event['actor_initial'] }}</a>
                                    @else
                                        <span class="community-feed-avatar">{{ $event['actor_initial'] }}</span>
                                    @endif
                                    <div>
                                        @if($event['actor_url'])
                                            <a href="{{ $event['actor_url'] }}" class="community-feed-actor-name">{{ '@'.$event['actor_name'] }}</a>
                                        @else
                                            <strong class="community-feed-actor-name">{{ $event['actor_name'] }}</strong>
                                        @endif
                                        <span>{{ __('ui.community_feed_action_'.$event['kind']) }}</span>
                                    </div>
                                    <time datetime="{{ $event['moment']->toIso8601String() }}" title="{{ $event['moment']->translatedFormat('d F Y H:i') }}">
                                        {{ $event['moment']->diffForHumans() }}
                                    </time>
                                </div>

                                @if($event['image_url'])
                                    <a href="{{ $event['url'] ?: '#' }}" class="community-feed-photo">
                                        <img src="{{ $event['image_url'] }}" alt="{{ $event['subtitle'] ?: $event['title'] }}" loading="lazy" decoding="async">
                                    </a>
                                @endif

                                <div class="community-feed-content">
                                    @if($event['url'])
                                        <a href="{{ $event['url'] }}" class="community-feed-title">{{ $event['title'] }}</a>
                                    @else
                                        <strong class="community-feed-title">{{ $event['title'] }}</strong>
                                    @endif
                                    @if($event['subtitle'])<p>{{ $event['subtitle'] }}</p>@endif
                                    @if($event['body'])<blockquote>{{ $event['body'] }}</blockquote>@endif

                                    @if($event['kind'] === 'reviews')
                                        <div class="community-feed-rating" aria-label="{{ $event['meta']['rating'] ?? 0 }}/5">
                                            <span>{{ str_repeat('★', (int) ($event['meta']['rating'] ?? 0)) }}{{ str_repeat('☆', max(0, 5 - (int) ($event['meta']['rating'] ?? 0))) }}</span>
                                            @if($event['meta']['verified'] ?? false)<small>✓ {{ __('ui.community_review_verified') }}</small>@endif
                                        </div>
                                    @elseif($event['kind'] === 'badges')
                                        <div class="community-feed-badge-tier is-{{ $event['meta']['tier'] ?? 'bronze' }}">{{ __('ui.community_feed_badge_tier_'.($event['meta']['tier'] ?? 'bronze')) }}</div>
                                    @elseif($event['kind'] === 'challenges' && isset($event['meta']['score']))
                                        <div class="community-feed-score">{{ __('ui.community_feed_score', ['score' => $event['meta']['score']]) }}</div>
                                    @elseif($event['kind'] === 'photos')
                                        <div class="community-feed-photo-stats"><span>👍 {{ (int)($event['meta']['helpful'] ?? 0) }}</span><span>💬 {{ (int)($event['meta']['comments'] ?? 0) }}</span></div>
                                    @endif
                                </div>
                            </div>
                        </article>
                    @endforeach
                </div>

                @if($events->hasPages())
                    <div class="pagination-wrap">{{ $events->links() }}</div>
                @endif
            @else
                <div class="community-feed-empty">
                    <span>{{ $scope === 'friends' ? '👥' : '🌍' }}</span>
                    <div>
                        <strong>{{ $scope === 'friends' ? __('ui.community_feed_empty_friends_title') : __('ui.community_feed_empty_community_title') }}</strong>
                        <p>{{ $scope === 'friends' ? __('ui.community_feed_empty_friends_text') : __('ui.community_feed_empty_community_text') }}</p>
                    </div>
                    @if($scope === 'friends')
                        <a class="button button-primary" href="{{ route('friends.index') }}">{{ __('ui.community_feed_find_friends') }}</a>
                    @endif
                </div>
            @endif
        </div>

        <aside class="community-feed-aside">
            <div class="community-feed-info-card">
                <span>🔐</span>
                <strong>{{ __('ui.community_feed_visibility_title') }}</strong>
                <p>{{ __('ui.community_feed_visibility_text') }}</p>
                <a href="{{ route('account.settings', ['section' => 'privacy']) }}">{{ __('ui.community_feed_visibility_manage') }} →</a>
            </div>
            <div class="community-feed-info-card">
                <span>🧭</span>
                <strong>{{ __('ui.community_feed_discover_title') }}</strong>
                <p>{{ __('ui.community_feed_discover_text') }}</p>
                <a href="{{ route('search', ['type' => 'user']) }}">{{ __('ui.community_feed_discover_action') }} →</a>
            </div>
            <div class="community-feed-info-card">
                <span>📷</span>
                <strong>{{ __('ui.community_feed_gallery_title') }}</strong>
                <p>{{ __('ui.community_feed_gallery_text') }}</p>
                <a href="{{ route('community.photos.index') }}">{{ __('ui.community_feed_gallery_action') }} →</a>
            </div>
            <div class="community-feed-info-card local-experts-feed-card">
                <span>📍</span>
                <strong>{{ __('ui.community_feed_local_experts_title') }}</strong>
                <p>{{ __('ui.community_feed_local_experts_text') }}</p>
                <a href="{{ route('experts.index') }}">{{ __('ui.community_feed_local_experts_action') }} →</a>
            </div>
        </aside>
    </div>
</section>
@endsection