@extends('layout', ['autoRefresh' => $series->videos->contains(fn($v) => $v->isProcessing())])

@section('title', $series->name)

@section('content')
    <p style="margin:0 0 16px"><a href="{{ route('channels.show', $series->channel) }}">← {{ $series->channel->name }}</a></p>

    <div class="card">
        <h1 style="font-size:20px;margin:0 0 4px">{{ $series->name }}
            <span class="badge {{ $series->isActive() ? 'done' : 'queued' }}">{{ $series->status }}</span>
            @if($series->viral)<span class="muted">🔥</span>@endif
        </h1>
        <p class="muted" style="margin:0">Topic: {{ $series->topic }}</p>
        @if(!empty($series->topic_pool))
            <p class="muted" style="margin:4px 0">Rotating {{ count($series->topic_pool) }} topics (next: “{{ \Illuminate\Support\Str::limit($series->topic_pool[$series->topic_pool_cursor % count($series->topic_pool)], 60) }}”)</p>
        @endif
        <p class="muted" style="margin:4px 0">
            {{ ucfirst($series->cadence) }}{{ $series->times() ? ' at ' . implode(', ', $series->times()) : '' }} ·
            {{ $series->auto_publish ? 'auto-publish' : 'manual publish' }} ·
            {{ $series->targets->count() }} channel target(s)
        </p>
        @if($series->next_run_at)
            <p class="muted" style="margin:4px 0">Next run: {{ $series->next_run_at->diffForHumans() }} ({{ $series->next_run_at->format('M j, H:i') }})</p>
        @endif

        @php $costed = $series->videos->whereNotNull('cost'); @endphp
        @if($costed->isNotEmpty())
            <p class="muted" style="margin:4px 0">Est. cost: {{ config('faceless.costs.currency', '$') }}{{ number_format($costed->sum('cost'), 2) }} total · {{ config('faceless.costs.currency', '$') }}{{ number_format($costed->avg('cost'), 2) }} avg over {{ $costed->count() }} videos</p>
        @endif

        <div style="display:flex;gap:10px;flex-wrap:wrap;margin-top:14px">
            <form method="POST" action="{{ route('series.run', $series) }}">
                @csrf<button type="submit">Run now</button>
            </form>
            <form method="POST" action="{{ route('series.toggle', $series) }}">
                @csrf<button type="submit" style="background:#33404a">{{ $series->isActive() ? 'Pause' : 'Resume' }}</button>
            </form>
            <form method="POST" action="{{ route('series.cancel-scheduled', $series) }}"
                  onsubmit="return confirm('Cancel all still-queued posts for this series?')">
                @csrf<button type="submit" style="background:#5a3a20">Cancel scheduled posts</button>
            </form>
            <form method="POST" action="{{ route('series.destroy', $series) }}"
                  onsubmit="return confirm('Delete this series?')">
                @csrf @method('DELETE')<button type="submit" style="background:#5a2020">Delete</button>
            </form>
        </div>
    </div>

    <h2 style="font-size:15px;margin:26px 0 12px">Publish targets</h2>
    <p class="muted" style="margin:0 0 12px">Each target generates its own video in that language/voice and posts to that channel. Same topic, localized per channel.</p>

    @if($series->targets->isNotEmpty())
        <div class="grid" style="grid-template-columns:repeat(auto-fill,minmax(240px,1fr))">
            @foreach($series->targets as $target)
                <div class="tile" style="padding:16px">
                    <p class="t" style="-webkit-line-clamp:1"><a href="{{ route('channels.show', $target->channel) }}">{{ $target->channel->name }}</a></p>
                    <p class="muted" style="margin:2px 0">🗣 {{ $target->language }}@if($target->voice_id) · voice {{ \Illuminate\Support\Str::limit($target->voice_id, 10) }}@endif</p>
                    <p class="muted" style="margin:2px 0">{{ $target->platforms ? implode(', ', array_map('ucfirst', $target->platforms)) : 'all connected' }}</p>
                    <form method="POST" action="{{ route('series.targets.destroy', $target) }}"
                          onsubmit="return confirm('Remove this target?')">
                        @csrf @method('DELETE')
                        <button type="submit" style="background:#5a2020;margin-top:6px;padding:5px 12px;font-size:12px">Remove</button>
                    </form>
                </div>
            @endforeach
        </div>
    @endif

    <div class="card" style="margin-top:14px">
        <form method="POST" action="{{ route('series.targets.store', $series) }}">
            @csrf
            <div class="row">
                <div>
                    <label for="channel_id">Channel</label>
                    <select id="channel_id" name="channel_id" required>
                        @foreach($channels as $c)
                            <option value="{{ $c->id }}">{{ $c->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label for="t_language">Language</label>
                    <input id="t_language" name="language" required placeholder="e.g. Spanish" value="{{ old('language') }}">
                </div>
                <div>
                    <label for="t_voice">Voice ID <span class="muted">(optional)</span></label>
                    <input id="t_voice" name="voice_id" placeholder="ElevenLabs voice id" value="{{ old('voice_id') }}">
                </div>
            </div>
            <label style="margin-top:10px">Publish to</label>
            <div style="display:flex;gap:16px;flex-wrap:wrap">
                @foreach(['youtube','instagram','tiktok'] as $p)
                    <label style="display:flex;align-items:center;gap:6px;color:var(--text)">
                        <input type="checkbox" name="platforms[]" value="{{ $p }}" style="width:auto"> {{ ucfirst($p) }}
                    </label>
                @endforeach
            </div>
            <button type="submit">Add target</button>
        </form>
    </div>

    <h2 style="font-size:15px;margin:26px 0 12px">Videos from this series</h2>
    @if($series->videos->isEmpty())
        <p class="muted">None yet. Click “Run now” to generate the first one.</p>
    @else
        <div class="grid">
            @foreach($series->videos->sortByDesc('id') as $video)
                <div class="tile">
                    <a href="{{ $video->status === 'done' ? route('videos.show', $video) : '#' }}">
                        <div class="thumb" @if($video->poster_path) style="background-image:url('{{ route('videos.poster', $video) }}')" @endif>
                            @if($video->isProcessing())<div class="spinner"></div><div class="pct">{{ $video->progress }}%</div>
                            @elseif($video->status === 'failed')⚠️
                            @elseif(!$video->poster_path)—@endif
                        </div>
                    </a>
                    <div class="meta">
                        <p class="t">{{ $video->title ?: $video->topic }}</p>
                        <span class="badge {{ $video->status }}">{{ $video->status }}</span>
                        <span class="muted">· {{ $video->language }}</span>
                        @if($video->seriesTarget)<span class="muted">· {{ $video->seriesTarget->channel->name }}</span>@endif
                    </div>
                </div>
            @endforeach
        </div>
    @endif
@endsection