{{-- cache-bust: force blade recompile --}}
@extends('layout', ['autoRefresh' => $video->isProcessing() || $video->publications->contains(fn($p) => $p->isPending())])

@section('title', $video->title ?: $video->topic)

@section('content')
    <p style="margin:0 0 16px"><a href="{{ route('videos.index') }}">← Back</a></p>

    <div class="card" style="display:flex;gap:24px;flex-wrap:wrap">
        <div style="flex:0 0 auto">
            @if($video->status === 'done')
                <video controls style="width:280px;aspect-ratio:9/16;border-radius:10px;background:#000"
                       poster="{{ route('videos.poster', $video) }}">
                    <source src="{{ route('videos.file', $video) }}" type="video/mp4">
                </video>
            @else
                <div class="thumb" style="width:280px;aspect-ratio:9/16;border-radius:10px">
                    <span class="badge {{ $video->status }}">{{ $video->status }}</span>
                </div>
            @endif
        </div>

        <div style="flex:1;min-width:240px">
            <h1 style="font-size:20px">{{ $video->title ?: $video->topic }}</h1>
            <p class="muted">Topic: {{ $video->topic }}</p>
            <p class="muted">Language: {{ $video->language }} · Scenes: {{ $video->scene_count }}</p>
            @if($video->style)<p class="muted">Style: {{ $video->style }}</p>@endif
            @if($video->costLabel())
                <p class="muted">Est. cost: {{ $video->costLabel() }}{{ $video->motion ? ' · 🎬 motion' : '' }}</p>
            @endif
            <p class="muted">Status: <span class="badge {{ $video->status }}">{{ $video->status }}</span></p>
            @if($video->isProcessing())
                <div class="progress"><div class="bar" style="width:{{ max(3, $video->progress) }}%"></div></div>
                <p class="muted stage">{{ $video->stage ?: 'Queued' }} · {{ $video->progress }}%</p>
            @endif
            @if($video->error)<p class="flash error">{{ $video->error }}</p>@endif

            @if($video->status === 'done')
                <p style="margin-top:16px"><a href="{{ route('videos.download', $video) }}">⬇ Download MP4</a></p>
            @endif

            @if($video->publications->isNotEmpty())
                <h2 style="font-size:14px;margin:20px 0 8px">Publications</h2>
                @foreach($video->publications as $pub)
                    <div class="muted" style="margin:6px 0">
                        <span class="badge {{ $pub->status === 'published' ? 'done' : (in_array($pub->status, ['failed','canceled']) ? 'failed' : 'processing') }}">{{ $pub->status }}</span>
                        {{ ucfirst($pub->platform) }}
                        @if($pub->status === 'draft')<span class="muted">· uploaded to drafts — finish in the app</span>@endif
                        @if($pub->platform === 'youtube' && $pub->privacy)· {{ $pub->privacy }}@endif
                        @if($pub->socialAccount)· {{ $pub->socialAccount->account_name ?: $pub->socialAccount->channel?->name }}@endif
                        @if($pub->scheduled_at && $pub->status === 'scheduled')· {{ $pub->scheduled_at->format('M j, H:i') }}@endif
                        @if($pub->url)· <a href="{{ $pub->url }}" target="_blank" rel="noopener">view</a>@endif
                        @if(in_array($pub->status, ['scheduled','pending']))
                            <form method="POST" action="{{ route('publications.cancel', $pub) }}" style="display:inline;margin-left:6px">
                                @csrf
                                <button type="submit" style="background:#5a2020;margin:0;padding:3px 10px;font-size:12px">Cancel</button>
                            </form>
                            <form method="POST" action="{{ route('publications.reschedule', $pub) }}" style="display:inline-flex;gap:4px;margin-left:6px;align-items:center;vertical-align:middle">
                                @csrf
                                <input type="datetime-local" name="scheduled_at" required style="width:auto;padding:2px 6px;font-size:12px">
                                <button type="submit" style="background:#33404a;margin:0;padding:3px 10px;font-size:12px">Reschedule</button>
                            </form>
                        @endif
                        @if($pub->status === 'failed')
                            <form method="POST" action="{{ route('publications.retry', $pub) }}" style="display:inline;margin-left:6px">
                                @csrf
                                <button type="submit" style="background:#33404a;margin:0;padding:3px 10px;font-size:12px">Retry</button>
                            </form>
                            @if($pub->error)<div style="color:#f0a0a0;margin-top:2px">{{ \Illuminate\Support\Str::limit($pub->error, 120) }}</div>@endif
                        @endif
                    </div>
                @endforeach
            @endif
        </div>
    </div>

    @if($video->status === 'done')
        <div class="card" style="margin-top:20px">
            <h2 style="font-size:16px;margin:0 0 12px">Publish</h2>
            @if($accounts->isEmpty())
                <p class="muted">No connected accounts yet. <a href="{{ route('channels.index') }}">Create a channel</a> and connect YouTube, Instagram or TikTok first.</p>
            @else
                <form method="POST" action="{{ route('videos.publish', $video) }}">
                    @csrf
                    @foreach($accounts as $account)
                        <label style="display:flex;align-items:center;gap:8px;margin:6px 0;color:var(--text)">
                            <input type="checkbox" name="accounts[]" value="{{ $account->id }}" style="width:auto">
                            <strong>{{ ucfirst($account->platform) }}</strong>
                            <span class="muted">{{ $account->account_name ?: $account->external_id }} · {{ $account->channel?->name }}</span>
                        </label>
                    @endforeach

                    <label for="privacy" style="margin-top:14px">Visibility <span class="muted">(YouTube)</span></label>
                    <select name="privacy" id="privacy" style="max-width:220px">
                        <option value="unlisted" selected>Unlisted — test, link-only</option>
                        <option value="public">Public</option>
                        <option value="private">Private</option>
                    </select>

                    <label style="display:flex;align-items:center;gap:8px;margin:12px 0 4px;color:var(--muted)">
                        <input type="checkbox" name="schedule_best_time" value="1" style="width:auto" {{ $video->viral ? 'checked' : '' }}>
                        Schedule at each platform's best time (otherwise post now)
                    </label>

                    <button type="submit">Publish to selected</button>
                </form>
            @endif
        </div>

        @if($video->viral && $video->social_copy)
            <div class="card" style="margin-top:20px">
                <h2 style="font-size:16px;margin:0 0 12px">🔥 Generated copy</h2>
                @foreach($video->social_copy as $platform => $copy)
                    <div style="margin-bottom:14px">
                        <p style="margin:0 0 2px"><strong>{{ ucfirst($platform) }}</strong></p>
                        @if(!empty($copy['title']))<p class="muted" style="margin:2px 0">{{ $copy['title'] }}</p>@endif
                        @if(!empty($copy['caption']))<p class="muted" style="margin:2px 0">{{ $copy['caption'] }}</p>@endif
                        @if(!empty($copy['description']))<p class="muted" style="margin:2px 0">{{ $copy['description'] }}</p>@endif
                        @if(!empty($copy['hashtags']))<p class="muted" style="margin:2px 0;color:var(--accent)">{{ implode(' ', $copy['hashtags']) }}</p>@endif
                    </div>
                @endforeach
            </div>
        @endif
    @endif

    @if($video->status === 'done')
        <div class="card" style="margin-top:20px">
            <h2 style="font-size:16px;margin:0 0 12px">🌐 Language versions</h2>
            @if($video->sourceVideo)
                <p class="muted" style="margin:0 0 8px">This is a {{ $video->language }} version of
                    <a href="{{ route('videos.show', $video->sourceVideo) }}">{{ $video->sourceVideo->title ?: $video->sourceVideo->topic }}</a>.</p>
            @endif
            @if($video->variants->isNotEmpty())
                <p class="muted" style="margin:0 0 8px">Versions:
                    @foreach($video->variants as $var)<a href="{{ route('videos.show', $var) }}">{{ $var->language }}</a>@if(!$loop->last), @endif @endforeach
                </p>
            @endif
            <p class="muted" style="margin:0 0 8px">Reuse these visuals in another language — only voice &amp; captions are regenerated, so it's cheap.</p>
            <form method="POST" action="{{ route('videos.variant', $video) }}">
                @csrf
                <div class="row">
                    <div>
                        <label for="v_language">Language</label>
                        <input id="v_language" name="language" required placeholder="e.g. Spanish">
                    </div>
                    <div>
                        <label for="v_voice">Voice ID <span class="muted">(optional)</span></label>
                        <input id="v_voice" name="voice_id" placeholder="ElevenLabs voice id">
                    </div>
                </div>
                <button type="submit">Create language version</button>
            </form>
        </div>
    @endif

    <form method="POST" action="{{ route('videos.destroy', $video) }}"
          onsubmit="return confirm('Delete this video?')" style="margin-top:20px">
        @csrf @method('DELETE')
        <button type="submit" style="background:#5a2020">Delete</button>
    </form>
@endsection