@extends('layouts.app')

@section('title', 'Comunidad — Fermenty')

@section('content')

<div class="d-flex justify-content-between align-items-start mb-4 flex-wrap gap-2">
    <div>
        <div class="page-title">Comunidad</div>
        <p class="page-subtitle mb-0">Tips, preguntas y recetas de otros fermentadores</p>
    </div>
    <a href="{{ route('comunidad.create') }}" class="btn btn-fermenty-orange">
        + Nueva publicación
    </a>
</div>

{{-- Filtros --}}
<div class="d-flex gap-2 flex-wrap mb-4">
    @foreach(['all' => 'Todo', 'tip' => '💡 Tips', 'question' => '❓ Preguntas', 'recipe' => '📋 Recetas', 'review' => '⭐ Valoraciones'] as $filter => $label)
    <a href="{{ request()->fullUrlWithQuery(['tipo' => $filter === 'all' ? null : $filter]) }}"
       class="batch-filter-btn {{ request('tipo', 'all') === $filter ? 'active' : '' }}">
        {{ $label }}
        @if(isset($counts[$filter]))
            <span style="font-size:0.7rem;opacity:0.7;">({{ $counts[$filter] }})</span>
        @endif
    </a>
    @endforeach

    @if($ferments->count() > 0)
        <select class="form-select form-select-sm"
                style="width:auto;border-radius:20px;font-size:0.8rem;"
                onchange="window.location = '{{ route('comunidad.index') }}?fermento=' + this.value">
            <option value="">Todos los fermentos</option>
            @foreach($ferments as $ferment)
                <option value="{{ $ferment->id }}"
                    {{ request('fermento') == $ferment->id ? 'selected' : '' }}>
                    {{ $ferment->name }}
                </option>
            @endforeach
        </select>
    @endif
</div>

@forelse($posts as $post)
    <div class="fermenty-card mb-3">
        <div class="d-flex justify-content-between align-items-start mb-2 gap-2 flex-wrap">
            <div class="d-flex align-items-center gap-2">
                <div class="profile-avatar-sm" style="{{ $post->user->avatar_url ? 'padding:0;overflow:hidden;' : '' }}">
                    @if($post->user->avatar_url)
                        <img src="{{ $post->user->avatar_url }}" alt="{{ $post->user->name }}" style="width:100%;height:100%;object-fit:cover;">
                    @else
                        {{ strtoupper(substr($post->user->name, 0, 1)) }}
                    @endif
                </div>
                <div>
                    <div class="admin-user-name" style="font-size:0.85rem;">{{ $post->user->name }}</div>
                    <div class="batch-card-type">{{ $post->created_at->diffForHumans() }}</div>
                </div>
            </div>
            <div class="d-flex gap-2 align-items-center flex-wrap">
                @if($post->guide)
                    <span class="fermenty-badge badge-active">{{ $post->guide->name }}</span>
                @endif
                <span class="fermenty-badge badge-completed" style="font-size:0.7rem;">
                    {{ ['tip' => '💡 Tip', 'question' => '❓ Pregunta', 'recipe' => '📋 Receta', 'review' => '⭐ Valoración'][$post->post_type] }}
                </span>
            </div>
        </div>

        <a href="{{ route('comunidad.show', $post) }}" class="text-decoration-none">
            <h3 class="batch-card-name mb-1" style="font-size:1rem;">{{ $post->title }}</h3>
            <p class="step-desc mb-0">{{ Str::limit($post->content, 150) }}</p>
            {{-- Preview de foto si tiene --}}
            @if($post->image_1)
                <div class="mt-2">
                    <img src="{{ $post->image_1_thumb_url }}" alt="Foto"
                         style="width:80px;height:60px;object-fit:cover;border-radius:6px;border:0.5px solid #D0E8B8;">
                    @if($post->image_2)
                        <span class="admin-user-email ms-1">+{{ count(array_filter([$post->image_2, $post->image_3])) }} más</span>
                    @endif
                </div>
            @endif
        </a>

        <div class="d-flex align-items-center gap-3 mt-3 pt-2"
             style="border-top:0.5px solid #EAF5D5;">
            <form method="POST" action="{{ route('comunidad.like', $post) }}">
                @csrf
                <button type="submit" class="btn-back" style="font-size:0.8rem;">
                    ♥ {{ $post->likes_count }}
                </button>
            </form>
            <a href="{{ route('comunidad.show', $post) }}#comentarios"
               class="btn-back" style="font-size:0.8rem;">
                💬 {{ $post->comments_count }}
            </a>
            @if(auth()->user()->isAdmin() || (auth()->id() === $post->user_id && $post->comments_count === 0))
                <form method="POST" action="{{ route('comunidad.destroy', $post) }}"
                      class="ms-auto"
                      onsubmit="return confirm('¿Eliminar esta publicación?')">
                    @csrf @method('DELETE')
                    <button type="submit" class="btn-back" style="font-size:0.8rem;color:#999;">
                        Eliminar
                    </button>
                </form>
            @endif
        </div>
    </div>
@empty
    <div class="fermenty-card">
        <div class="fermenty-empty">
            <div class="empty-icon">👥</div>
            <div class="empty-title">Sin publicaciones todavía</div>
            <div class="empty-text">¡Sé el primero en compartir algo!</div>
            <a href="{{ route('comunidad.create') }}" class="btn btn-fermenty-primary mt-3">
                Crear publicación
            </a>
        </div>
    </div>
@endforelse

@if($posts->hasPages())
    <div class="d-flex justify-content-center mt-4">
        {{ $posts->links() }}
    </div>
@endif

@endsection