@extends('layouts.app')

@section('title', 'Community Feed')

@section('content')
@php
    $avatarFallback = "data:image/svg+xml," . rawurlencode('<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"><rect width="40" height="40" rx="20" fill="#1D2030"/></svg>');
@endphp

<div class="community-page" data-reveal>
    <header class="community-page__intro">
        <h1>Community Space</h1>
        <p>Interact with players, react to recent achievements, and track global match updates.</p>
    </header>

    <div class="row g-4">
        <div class="col-lg-8">
            <div class="card-arena p-4 mb-4">
                <span class="card-title">Share updates</span>
                <div class="community-composer">
                    <img
                        class="community-composer__avatar"
                        src="{{ asset('assets/images/generated/players/player-1.webp') }}"
                        alt=""
                        width="42"
                        height="42"
                        onerror="this.src='{{ $avatarFallback }}'"
                    >
                    <div class="flex-grow-1">
                        <textarea class="form-control input-arena mb-3" rows="3" placeholder="What's happening in your matches today?"></textarea>
                        <div class="community-composer__actions">
                            <div class="d-flex gap-2">
                                <button type="button" class="btn-arena btn-ghost btn-xs">Image</button>
                                <button type="button" class="btn-arena btn-ghost btn-xs">Link</button>
                            </div>
                            <button type="button" class="btn-arena btn-primary btn-sm px-4">Post</button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card-arena mb-4">
                <div class="card-header">
                    <span class="card-title mb-0">Recent Activity</span>
                </div>
                <div class="card-body p-0">
                    @foreach($feed as $item)
                        <article class="feed-item">
                            <img
                                src="{{ asset(ltrim($item['actor']['avatar'], '/')) }}"
                                alt="{{ $item['actor']['name'] }}"
                                class="feed-avatar"
                                width="40"
                                height="40"
                                onerror="this.src='{{ $avatarFallback }}'"
                            >
                            <div class="feed-content">
                                <div class="feed-text">
                                    <a href="{{ route('preview.player', $item['actor']['slug']) }}" class="actor">{{ $item['actor']['name'] }}</a>
                                    @if(!empty($item['target']))
                                        {{ str_replace('{target}', $item['target']['name'], $item['text']) }}
                                    @else
                                        {{ strip_tags($item['text']) }}
                                    @endif
                                </div>
                                <div class="feed-meta">
                                    <time datetime="{{ $item['time'] }}">{{ \Carbon\Carbon::parse($item['time'])->diffForHumans() }}</time>
                                    @if(!empty($item['game']))
                                        <span class="badge-arena badge-muted">{{ $item['game'] }}</span>
                                    @endif
                                    @if(!empty($item['reactions']))
                                        <div class="feed-reactions">
                                            @foreach(array_slice($item['reactions'], 0, 3, true) as $emoji => $count)
                                                <button type="button" class="btn-arena btn-ghost btn-xs py-0 px-2">{{ $emoji }} {{ $count }}</button>
                                            @endforeach
                                        </div>
                                    @endif
                                </div>
                            </div>
                        </article>
                    @endforeach
                </div>
            </div>
        </div>

        <aside class="col-lg-4">
            <div class="card-arena p-4">
                <span class="card-title">Platform Groups</span>
                <div class="d-flex flex-column gap-3">
                    <a href="{{ config('navigation.community.url', '#') }}" class="community-group" target="_blank" rel="noopener noreferrer">
                        <span>📢</span>
                        <span>Tournament Announcements</span>
                    </a>
                    <a href="{{ route('preview.recruitment') }}" class="community-group">
                        <span>🎮</span>
                        <span>ValoStrike Recruitment</span>
                    </a>
                    <a href="{{ config('navigation.community.url', '#') }}" class="community-group" target="_blank" rel="noopener noreferrer">
                        <span>💬</span>
                        <span>General Esports Discussions</span>
                    </a>
                </div>
            </div>
        </aside>
    </div>
</div>
@endsection
