@extends('admin.layout')
@section('title', 'Publish History: ' . $video->title)

@section('content')
<div class="toolbar">
    <h2 style="font-size:18px; color:#fff;">Publish History: {{ $video->title }}</h2>
    <div style="display:flex; gap:8px;">
        <a href="{{ route('admin.videos.publish', $video) }}" class="btn btn-primary">📢 New Publish</a>
        <a href="{{ route('admin.videos.show', $video) }}" class="btn btn-secondary">← Back</a>
    </div>
</div>

<!-- Filter -->
<div style="display:flex; gap:8px; margin-bottom:16px;">
    <a href="{{ route('admin.videos.publish-history', $video) }}" class="btn {{ !request('platform') ? 'btn-primary' : 'btn-secondary' }}" style="font-size:12px;">All</a>
    <a href="{{ route('admin.videos.publish-history', ['video' => $video, 'platform' => 'telegram']) }}" class="btn {{ request('platform') === 'telegram' ? 'btn-primary' : 'btn-secondary' }}" style="font-size:12px;">📱 Telegram</a>
    <a href="{{ route('admin.videos.publish-history', ['video' => $video, 'platform' => 'x']) }}" class="btn {{ request('platform') === 'x' ? 'btn-primary' : 'btn-secondary' }}" style="font-size:12px;">𝕏 X (Twitter)</a>
</div>

<!-- Table -->
@if($history->count() > 0)
<div style="background:#1a1a1a; border:1px solid #2a2a2a; border-radius:6px; overflow:hidden;">
    <table style="width:100%; border-collapse:collapse;">
        <thead style="background:#0f0f0f; border-bottom:1px solid #2a2a2a;">
            <tr>
                <th style="padding:12px 16px; text-align:left; font-size:12px; color:#888; text-transform:uppercase; font-weight:bold;">Platform</th>
                <th style="padding:12px 16px; text-align:left; font-size:12px; color:#888; text-transform:uppercase; font-weight:bold;">Title</th>
                <th style="padding:12px 16px; text-align:left; font-size:12px; color:#888; text-transform:uppercase; font-weight:bold;">Thumbnail</th>
                <th style="padding:12px 16px; text-align:left; font-size:12px; color:#888; text-transform:uppercase; font-weight:bold;">Status</th>
                <th style="padding:12px 16px; text-align:left; font-size:12px; color:#888; text-transform:uppercase; font-weight:bold;">Platform ID</th>
                <th style="padding:12px 16px; text-align:left; font-size:12px; color:#888; text-transform:uppercase; font-weight:bold;">Published At</th>
                <th style="padding:12px 16px; text-align:left; font-size:12px; color:#888; text-transform:uppercase; font-weight:bold;">Actions</th>
            </tr>
        </thead>
        <tbody>
            @foreach($history as $log)
            <tr style="border-bottom:1px solid #2a2a2a;">
                <!-- Platform -->
                <td style="padding:12px 16px; font-size:12px;">
                    @if($log->platform === 'telegram')
                        <span style="display:inline-block; padding:4px 8px; background:#1a3a5a; color:#5ba3ff; border-radius:4px; font-size:11px; font-weight:bold;">📱 Telegram</span>
                    @else
                        <span style="display:inline-block; padding:4px 8px; background:#2a2a2a; color:#888; border-radius:4px; font-size:11px; font-weight:bold;">𝕏 X</span>
                    @endif
                </td>

                <!-- Title -->
                <td style="padding:12px 16px; font-size:12px; color:#e0e0e0;">
                    <div style="max-width:200px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;" title="{{ $log->publish_title }}">
                        {{ $log->publish_title }}
                    </div>
                </td>

                <!-- Thumbnail Preview -->
                <td style="padding:12px 16px; font-size:12px;">
                    @if($log->publish_thumbnail)
                        <button type="button" style="background:none; border:none; color:#5ba3ff; cursor:pointer; text-decoration:underline; font-size:11px;" onclick="showThumbnailModal('{{ $log->publish_thumbnail }}')">
                            View
                        </button>
                    @else
                        <span style="color:#666; font-size:11px;">None</span>
                    @endif
                </td>

                <!-- Status -->
                <td style="padding:12px 16px; font-size:12px;">
                    @if($log->status === 'published')
                        <span style="display:inline-block; padding:4px 8px; background:#1a3a1a; color:#6fbf6f; border-radius:4px; font-size:11px; font-weight:bold;">✓ Published</span>
                    @elseif($log->status === 'failed')
                        <span style="display:inline-block; padding:4px 8px; background:#3a1a1a; color:#bf6f6f; border-radius:4px; font-size:11px; font-weight:bold;">✗ Failed</span>
                    @else
                        <span style="display:inline-block; padding:4px 8px; background:#3a2a1a; color:#bfaa6f; border-radius:4px; font-size:11px; font-weight:bold;">⏳ Pending</span>
                    @endif
                </td>

                <!-- Platform Message ID -->
                <td style="padding:12px 16px; font-size:11px; color:#666; font-family:monospace;">
                    @if($log->platform_message_id)
                        {{ substr($log->platform_message_id, 0, 16) }}...
                    @else
                        —
                    @endif
                </td>

                <!-- Published At -->
                <td style="padding:12px 16px; font-size:11px;">
                    <div style="color:#e0e0e0;">{{ $log->created_at->format('Y-m-d H:i:s') }}</div>
                    <div style="color:#666;">{{ $log->created_at->diffForHumans() }}</div>
                </td>

                <!-- Actions -->
                <td style="padding:12px 16px; font-size:12px;">
                    <div style="display:flex; gap:6px;">
                        @if($log->status === 'failed')
                            <button type="button" 
                                    class="btn btn-sm" 
                                    style="background:#bf6f6f; color:#fff; border:none; padding:4px 12px; border-radius:4px; font-size:11px; cursor:pointer;"
                                    onclick="retryPublish({{ $log->id }})">
                                Retry
                            </button>
                        @endif
                        @if($log->error_message)
                            <button type="button" 
                                    class="btn btn-sm" 
                                    style="background:#2a2a2a; color:#888; border:1px solid #3a3a3a; padding:4px 12px; border-radius:4px; font-size:11px; cursor:pointer;"
                                    title="{{ $log->error_message }}">
                                Error
                            </button>
                        @endif
                    </div>
                </td>
            </tr>
            @endforeach
        </tbody>
    </table>
</div>
@else
<div style="background:#1a1a1a; border:1px solid #2a2a2a; border-radius:6px; padding:32px; text-align:center;">
    <p style="color:#666; margin-bottom:16px; font-size:13px;">No publish history yet</p>
    <a href="{{ route('admin.videos.publish', $video) }}" class="btn btn-primary" style="display:inline-block;">
        Start Publishing →
    </a>
</div>
@endif

<!-- Back Link -->
<div style="margin-top:24px;">
    <a href="{{ route('admin.videos.show', $video) }}" style="color:#5ba3ff; text-decoration:none; font-size:12px;">← Back to Video</a>
</div>

<!-- Thumbnail Modal -->
<div id="thumbnailModal" style="display:none; position:fixed; inset:0; background:rgba(0,0,0,0.8); z-index:50; align-items:center; justify-content:center;">
    <div style="background:#1a1a1a; border:1px solid #2a2a2a; border-radius:6px; max-width:600px; width:100%; margin:20px;">
        <div style="padding:20px; border-bottom:1px solid #2a2a2a; display:flex; justify-content:space-between; align-items:center;">
            <h2 style="font-size:15px; color:#fff; font-weight:bold;">Thumbnail Preview</h2>
            <button type="button" style="background:none; border:none; color:#888; font-size:20px; cursor:pointer;" onclick="closeThumbnailModal()">
                ✕
            </button>
        </div>
        <div style="padding:20px;">
            <img id="thumbnailModalImage" src="" alt="Thumbnail" style="width:100%; border-radius:4px;">
        </div>
    </div>
</div>

@push('scripts')
<script>
function showThumbnailModal(url) {
    document.getElementById('thumbnailModalImage').src = url;
    const modal = document.getElementById('thumbnailModal');
    modal.style.display = 'flex';
}

function closeThumbnailModal() {
    document.getElementById('thumbnailModal').style.display = 'none';
}

function retryPublish(logId) {
    if (!confirm('Retry this publish?')) {
        return;
    }

    fetch(`{{ url('/admin/publish-logs') }}/${logId}/retry`, {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
            'X-Requested-With': 'XMLHttpRequest',
            'Content-Type': 'application/json',
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert('✓ ' + data.message);
            setTimeout(() => {
                location.reload();
            }, 1000);
        } else {
            throw new Error(data.message || 'Retry failed');
        }
    })
    .catch(error => {
        alert('✗ ' + error.message);
    });
}

// Close modal on background click
document.getElementById('thumbnailModal').addEventListener('click', function(e) {
    if (e.target === this) {
        closeThumbnailModal();
    }
});
</script>
@endpush
@endsection