@extends('admin.layouts.app')

@php
    $pageTitle = 'Admin - Video Detail';
    $pageHeading = 'Video Detail';
    $pageSubheading = 'Inspect metadata and manage video status.';
@endphp

@push('head')
<style>
    .detail-wrap { max-width: 980px; }
    .row { display:grid; grid-template-columns: 190px 1fr; gap:8px; padding:6px 0; border-bottom:1px solid #f3f4f6; }
    .label { color:#6b7280; font-size:13px; }
    .value { font-size:13px; word-break: break-all; }
    .actions { margin-top:14px; display:flex; gap:8px; flex-wrap:wrap; }
    .status { padding:3px 8px; border-radius:12px; color:#fff; font-size:12px; }
    .uploaded { background:#6b7280; }
    .encoding { background:#f59e0b; }
    .ready { background:#16a34a; }
    .failed { background:#dc2626; }
    .disabled { background:#111827; }
</style>
@endpush

@section('content')
    <div class="content-card detail-wrap">
        <div class="row"><div class="label">Title</div><div class="value"><strong>{{ $video->title }}</strong></div></div>
        <div class="row"><div class="label">Slug</div><div class="value">{{ $video->slug }}</div></div>
        <div class="row"><div class="label">Type</div><div class="value">{{ $video->type ?? '-' }}</div></div>
        <div class="row"><div class="label">Status</div><div class="value"><span class="status {{ $video->status }}">{{ ucfirst($video->status) }}</span></div></div>
        <div class="row"><div class="label">Provider</div><div class="value">{{ $video->provider ?: '-' }}</div></div>
        <div class="row"><div class="label">Play Mode</div><div class="value">{{ is_object($video->play_mode) && property_exists($video->play_mode, 'value') ? $video->play_mode->value : ($video->play_mode ?: '-') }}</div></div>
        <div class="row"><div class="label">Storage Driver</div><div class="value">{{ $video->storage_driver }}</div></div>
        <div class="row">
            <div class="label">Embed URL</div>
            <div class="value">
                @if(!empty($video->embed_url))
                    @if(str_starts_with($video->embed_url, 'http://') || str_starts_with($video->embed_url, 'https://'))
                        <a href="{{ $video->embed_url }}" target="_blank" rel="noopener">{{ $video->embed_url }}</a>
                    @else
                        {{ $video->embed_url }}
                    @endif
                @else
                    -
                @endif
            </div>
        </div>
        <div class="row"><div class="label">Source MP4 Path</div><div class="value">{{ $video->source_mp4_path ?: '-' }}</div></div>
        <div class="row"><div class="label">HLS Asset Path</div><div class="value">{{ $video->asset_path ?: '-' }}</div></div>
        <div class="row"><div class="label">Thumbnail Path</div><div class="value">{{ $video->thumbnail_path ?: '-' }}</div></div>
        <div class="row"><div class="label">Error Message</div><div class="value">{{ $video->error_message ?: '-' }}</div></div>
        <div class="row"><div class="label">Created At</div><div class="value">{{ $video->created_at?->format('Y-m-d H:i:s') }}</div></div>

        <div class="actions">
            <a class="btn btn-secondary" href="{{ route('admin.videos.index') }}">Back to List</a>

            @if($video->status === 'failed')
                <form action="{{ route('admin.videos.retry', $video) }}" method="POST">
                    @csrf
                    <button class="btn btn-warning" type="submit">Retry Encode</button>
                </form>
            @endif

            @if($video->status !== 'disabled')
                <form action="{{ route('admin.videos.disable', $video) }}" method="POST">
                    @csrf
                    <button class="btn btn-dark" type="submit">Disable</button>
                </form>
            @endif

            <form action="{{ route('admin.videos.destroy', $video) }}" method="POST">
                @csrf @method('DELETE')
                <button class="btn btn-danger" type="submit" onclick="return confirm('Delete video dan cleanup asset?')">Delete</button>
            </form>
        </div>
    </div>
@endsection