@props(['routeArticle', 'tab'])

<div class="bg-white rounded-lg shadow-sm p-5 dark:bg-gray-800" wire:key="ra-{{ $routeArticle->id }}">
    <div class="flex items-start justify-between">
        <div class="flex-1 min-w-0">
            <div
                class="flex items-center flex-wrap gap-x-1.5 text-xs font-medium mb-1.5"
                aria-label="Routed from {{ $routeArticle->feed?->name ?? 'Unknown feed' }} to {{ $routeArticle->platformChannel?->name ?? 'Unknown channel' }}"
            >
                @if ($routeArticle->feed)
                    <span class="h-2 w-2 rounded-full shrink-0 {{ $routeArticle->feed->displayColor()->dotClass() }}" aria-hidden="true"></span>
                @endif
                <span class="text-gray-900 dark:text-gray-100">{{ $routeArticle->feed?->name ?? 'Unknown feed' }}</span>
                <span class="text-gray-400 dark:text-gray-500" aria-hidden="true">&rarr;</span>
                <span class="text-gray-600 dark:text-gray-300">{{ $routeArticle->platformChannel?->name ?? 'Unknown channel' }}</span>
            </div>
            <h3 class="text-base font-medium text-gray-900 mb-1 dark:text-gray-100">
                {{ $routeArticle->article->title ?? 'Untitled Article' }}
            </h3>
            <p class="text-sm text-gray-600 mb-2 line-clamp-2 dark:text-gray-300">
                {{ $routeArticle->article->description ?? 'No description available' }}
            </p>
            <div class="text-xs text-gray-500 dark:text-gray-400">
                {{ $routeArticle->created_at->format('M d, Y H:i') }}
            </div>

            @if ($routeArticle->publish_error !== null)
                <p class="mt-2 rounded-md bg-red-50 px-3 py-2 text-xs text-red-700 dark:bg-red-900/20 dark:text-red-300">
                    {{ $routeArticle->publish_error }}
                </p>
            @endif
        </div>
        <div class="flex items-center space-x-2 ml-4">
            @if ($tab === 'failed')
                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300">
                    Failed
                </span>

                <button
                    wire:click="retryPublish({{ $routeArticle->id }})"
                    class="inline-flex items-center p-1.5 text-blue-600 hover:text-blue-800 hover:bg-blue-50 rounded-md dark:text-blue-400"
                    title="Retry publishing"
                    aria-label="Retry publishing {{ $routeArticle->article->title ?? 'article' }}"
                >
                    <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99" />
                    </svg>
                </button>
            @endif

            {{-- Status badge (All tab) --}}
            @if ($tab === 'all')
                @if ($routeArticle->isApproved())
                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300">
                        Approved
                    </span>
                @elseif ($routeArticle->isRejected())
                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300">
                        Rejected
                    </span>
                @else
                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-300">
                        Pending
                    </span>
                @endif
            @endif

            {{-- Action buttons --}}
            @if ($routeArticle->isPending())
                <button
                    wire:click="approve({{ $routeArticle->id }})"
                    class="inline-flex items-center p-1.5 text-green-600 hover:text-green-800 hover:bg-green-50 rounded-md dark:text-green-400"
                    title="Approve"
                >
                    <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
                    </svg>
                </button>
                <button
                    wire:click="reject({{ $routeArticle->id }})"
                    class="inline-flex items-center p-1.5 text-red-600 hover:text-red-800 hover:bg-red-50 rounded-md dark:text-red-400"
                    title="Reject"
                >
                    <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" d="m9.75 9.75 4.5 4.5m0-4.5-4.5 4.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
                    </svg>
                </button>
            @elseif ($routeArticle->isRejected())
                <button
                    wire:click="restore({{ $routeArticle->id }})"
                    class="inline-flex items-center p-1.5 text-blue-600 hover:text-blue-800 hover:bg-blue-50 rounded-md dark:text-blue-400"
                    title="Restore to pending"
                >
                    <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M9 15 3 9m0 0 6-6M3 9h12a6 6 0 0 1 0 12h-3" />
                    </svg>
                </button>
            @endif

            {{-- Link to original --}}
            @if ($routeArticle->article->url)
                <a
                    href="{{ $routeArticle->article->url }}"
                    target="_blank"
                    rel="noopener noreferrer"
                    class="p-1.5 text-gray-400 hover:text-gray-600 rounded-md dark:text-gray-500 dark:hover:text-gray-300"
                    title="View original article"
                >
                    <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" />
                    </svg>
                </a>
            @endif
        </div>
    </div>
</div>