@extends('layouts.admin')
@section('title', $tenant->name . ' — Social Posts')

@section('content')
<div class="flex items-center justify-between mb-8">
    <div class="flex items-center gap-3">
        <a href="{{ route('admin.chatbot.tenants.show', $tenant->id) }}" class="text-gray-500 hover:text-white transition">
            <i class="fas fa-arrow-left"></i>
        </a>
        <h1 class="text-2xl font-bold">📣 Social Posts — {{ $tenant->name }}</h1>
    </div>
    <a href="{{ route('admin.chatbot.posts.create', $tenant->id) }}"
       class="px-4 py-2 bg-indigo-600 hover:bg-indigo-700 rounded-lg text-sm font-medium transition">
        <i class="fas fa-plus mr-1"></i> Nuevo Post
    </a>
</div>

{{-- Stats --}}
<div class="grid grid-cols-2 md:grid-cols-4 gap-3 mb-6">
    <div class="bg-gray-900 rounded-xl border border-gray-800 p-3 text-center">
        <div class="text-2xl font-bold text-white">{{ $stats['total'] }}</div>
        <div class="text-xs text-gray-500">Total</div>
    </div>
    <div class="bg-gray-900 rounded-xl border border-gray-800 p-3 text-center">
        <div class="text-2xl font-bold text-green-400">{{ $stats['published'] }}</div>
        <div class="text-xs text-gray-500">Publicados</div>
    </div>
    <div class="bg-gray-900 rounded-xl border border-gray-800 p-3 text-center">
        <div class="text-2xl font-bold text-blue-400">{{ $stats['scheduled'] }}</div>
        <div class="text-xs text-gray-500">Programados</div>
    </div>
    <div class="bg-gray-900 rounded-xl border border-gray-800 p-3 text-center">
        <div class="text-2xl font-bold text-gray-400">{{ $stats['draft'] }}</div>
        <div class="text-xs text-gray-500">Borradores</div>
    </div>
</div>

{{-- Posts List --}}
<div class="space-y-3">
    @forelse($posts as $post)
    @php $badge = $post->getStatusBadge(); @endphp
    <div class="bg-gray-900 rounded-xl border border-gray-800 p-4 hover:border-gray-700 transition">
        <div class="flex items-start gap-4">
            {{-- Media thumbnail --}}
            @if($post->media_url)
            <div class="w-16 h-16 rounded-lg bg-gray-800 overflow-hidden shrink-0">
                <img src="{{ $post->media_url }}" alt="" class="w-full h-full object-cover">
            </div>
            @endif

            {{-- Content --}}
            <div class="flex-1 min-w-0">
                <p class="text-sm text-gray-200 mb-2 whitespace-pre-line">{{ Str::limit($post->content, 200) }}</p>
                <div class="flex items-center flex-wrap gap-2">
                    {{-- Status badge --}}
                    <span class="px-2 py-0.5 rounded-full text-xs bg-{{ $badge['color'] }}-500/15 text-{{ $badge['color'] }}-400 ring-1 ring-{{ $badge['color'] }}-500/30">
                        <i class="fas {{ $badge['icon'] }} mr-1"></i>{{ $badge['label'] }}
                    </span>

                    {{-- Platforms --}}
                    @foreach($post->getTargetPlatforms() as $plat)
                        @php $pInfo = \App\Models\ChatbotChannel::PLATFORMS[$plat] ?? null; @endphp
                        @if($pInfo)
                        <span class="text-xs" style="color: {{ $pInfo['color'] }}">
                            <i class="{{ $pInfo['brand'] }} {{ $pInfo['icon'] }}"></i>
                        </span>
                        @endif
                    @endforeach

                    {{-- Schedule time --}}
                    @if($post->scheduled_at)
                        <span class="text-xs text-gray-500">
                            <i class="fas fa-clock mr-1"></i>{{ $post->scheduled_at->format('d/m/Y H:i') }}
                        </span>
                    @endif

                    @if($post->published_at)
                        <span class="text-xs text-green-500">
                            <i class="fas fa-check mr-1"></i>{{ $post->published_at->diffForHumans() }}
                        </span>
                    @endif

                    @if($post->error)
                        <span class="text-xs text-red-400" title="{{ $post->error }}">
                            <i class="fas fa-exclamation-triangle mr-1"></i>{{ Str::limit($post->error, 40) }}
                        </span>
                    @endif
                </div>
            </div>

            {{-- Actions --}}
            <div class="flex items-center gap-1 shrink-0">
                @if($post->status === 'failed')
                <form method="POST" action="{{ route('admin.chatbot.posts.retry', [$tenant->id, $post->id]) }}" class="inline">
                    @csrf
                    <button class="w-8 h-8 rounded-lg bg-gray-800 hover:bg-yellow-500/20 hover:text-yellow-400 flex items-center justify-center transition" title="Reintentar">
                        <i class="fas fa-redo text-xs"></i>
                    </button>
                </form>
                @endif

                @if($post->isEditable())
                <a href="{{ route('admin.chatbot.posts.edit', [$tenant->id, $post->id]) }}"
                   class="w-8 h-8 rounded-lg bg-gray-800 hover:bg-blue-500/20 hover:text-blue-400 flex items-center justify-center transition" title="Editar">
                    <i class="fas fa-pen text-xs"></i>
                </a>
                @endif

                <form method="POST" action="{{ route('admin.chatbot.posts.destroy', [$tenant->id, $post->id]) }}"
                      class="inline" onsubmit="return confirm('¿Eliminar este post?')">
                    @csrf @method('DELETE')
                    <button class="w-8 h-8 rounded-lg bg-gray-800 hover:bg-red-500/20 hover:text-red-400 flex items-center justify-center transition" title="Eliminar">
                        <i class="fas fa-trash text-xs"></i>
                    </button>
                </form>
            </div>
        </div>
    </div>
    @empty
    <div class="bg-gray-900 rounded-xl border border-gray-800 p-12 text-center">
        <i class="fas fa-bullhorn text-4xl text-gray-600 mb-4"></i>
        <p class="text-gray-400 mb-4">No hay posts aún.</p>
        <a href="{{ route('admin.chatbot.posts.create', $tenant->id) }}"
           class="px-4 py-2 bg-indigo-600 hover:bg-indigo-700 rounded-lg text-sm font-medium transition inline-block">
            <i class="fas fa-plus mr-1"></i> Crear primer post
        </a>
    </div>
    @endforelse
</div>

@if($posts->hasPages())
<div class="mt-6">{{ $posts->links() }}</div>
@endif
@endsection