@extends('layouts.app')

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

@section('content')
<div class="container-fluid px-4 py-4" data-reveal>
    <div class="mb-4">
        <h1 class="display-md mb-1" style="color: var(--arena-text-primary);">Community Space</h1>
        <p class="text-muted fs-sm">Interact with players, react to recent achievements, and track global match updates.</p>
    </div>

    <div class="row g-4">
        <!-- Main Feed Grid -->
        <div class="col-lg-8">
            <!-- Share post card -->
            <div class="card-arena p-4 mb-4">
                <span class="card-title">Share updates</span>
                <div class="d-flex gap-3 align-items-start">
                    <img src="{{ asset('assets/images/generated/players/player-1.webp') }}" alt="Profile" style="width: 40px; height: 40px; border-radius: var(--r-full); object-fit: cover;" onerror="this.src='data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%2240%22 height=%2240%22><rect width=%2240%22 height=%2240%22 rx=%2220%22 fill=%22%231D2030%22/></svg>'">
                    <div class="flex-grow-1">
                        <textarea class="form-control input-arena mb-3" rows="3" placeholder="What's happening in your matches today?" style="resize: none;"></textarea>
                        <div class="d-flex justify-content-between align-items-center">
                            <div class="d-flex gap-2">
                                <button class="btn-arena btn-ghost btn-xs"><i class="bi bi-image"></i> Image</button>
                                <button class="btn-arena btn-ghost btn-xs"><i class="bi bi-link-45deg"></i> Link</button>
                            </div>
                            <button class="btn-arena btn-primary btn-sm px-4">Post</button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Feed Items list -->
            <div class="card-arena mb-4">
                <div class="card-header">
                    <span class="card-title">Recent Activity</span>
                </div>
                <div class="card-body p-0">
                    @foreach($feed as $item)
                    <div class="feed-item px-4 py-3">
                        <div class="d-flex gap-3">
                            <img src="{{ asset($item['actor']['avatar']) }}" alt="{{ $item['actor']['name'] }}" class="feed-avatar"
                                 onerror="this.src='data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%2240%22 height=%2240%22><rect width=%2240%22 height=%2240%22 rx=%2220%22 fill=%22%231D2030%22/></svg>'">
                            <div class="feed-content flex-grow-1">
                                <div class="feed-text text-white">
                                    <a href="/preview/players/{{ $item['actor']['slug'] }}" class="actor text-decoration-none text-white fw-600">{{ $item['actor']['name'] }}</a>
                                    @if(!empty($item['target']))
                                        {{ str_replace('{target}', $item['target']['name'], $item['text']) }}
                                    @else
                                        {!! $item['text'] !!}
                                    @endif
                                </div>
                                <div class="feed-time d-flex align-items-center gap-3 mt-1">
                                    <span>{{ \Carbon\Carbon::parse($item['time'])->diffForHumans() }}</span>
                                    @if(isset($item['game']))
                                        <span class="badge-arena badge-muted" style="font-size:0.5625rem;">{{ $item['game'] }}</span>
                                    @endif
                                    @if(isset($item['reactions']))
                                        <div class="d-flex gap-2">
                                            @foreach(array_slice($item['reactions'], 0, 3, true) as $emoji => $count)
                                                <button class="btn-arena btn-ghost btn-xs py-0 px-2" style="font-size: 0.65rem;">
                                                    {{ $emoji }} {{ $count }}
                                                </button>
                                            @endforeach
                                        </div>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>

        <!-- Sidebar / Suggested Players -->
        <div class="col-lg-4">
            <div class="card-arena p-4 mb-4">
                <span class="card-title">Platform Groups</span>
                <div class="d-flex flex-column gap-3 fs-sm text-white">
                    <a href="#" class="text-decoration-none text-white d-flex align-items-center gap-2 p-2" style="background: var(--arena-surface-02); border-radius: var(--r-md);">
                        <span>📢</span> <span>Tournament Announcements</span>
                    </a>
                    <a href="#" class="text-decoration-none text-white d-flex align-items-center gap-2 p-2" style="background: var(--arena-surface-02); border-radius: var(--r-md);">
                        <span>🎮</span> <span>ValoStrike Recruitment Group</span>
                    </a>
                    <a href="#" class="text-decoration-none text-white d-flex align-items-center gap-2 p-2" style="background: var(--arena-surface-02); border-radius: var(--r-md);">
                        <span>💬</span> <span>General Esports Discussions</span>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
