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

@section('title', 'FacelessShorts')

@section('content')
    <div class="card">
        <form id="gen-form" method="POST" action="{{ route('videos.store') }}">
            @csrf
            <label for="topic">Topic</label>
            <input id="topic" name="topic" required
                   placeholder="e.g. el viaje que no se ve: lo que cambia dentro de ti con el tiempo"
                   value="{{ old('topic') }}">

            <div class="row">
                <div>
                    <label for="scene_count">Scenes</label>
                    <input id="scene_count" name="scene_count" type="number" min="1" max="20"
                           value="{{ old('scene_count', 6) }}">
                </div>
                <div>
                    <label for="target_seconds">Target length (sec)</label>
                    <input id="target_seconds" name="target_seconds" type="number" min="10" max="180"
                           placeholder="auto" value="{{ old('target_seconds') }}">
                </div>
                <div>
                    <label for="language">Language</label>
                    <input id="language" name="language" value="{{ old('language', 'English') }}">
                </div>
            </div>

            <label for="style">Style / tone (optional)</label>
            <input id="style" name="style"
                   placeholder="poetic, introspective, surreal, cinematic"
                   value="{{ old('style') }}">

            <label style="display:flex;align-items:center;gap:8px;margin-top:14px;color:var(--text)">
                <input type="checkbox" name="viral" value="1" style="width:auto" {{ old('viral') ? 'checked' : '' }}>
                🔥 Viral mode (stronger hook + CTA, platform captions & hashtags, best-time posting)
            </label>

            <label style="display:flex;align-items:center;gap:8px;margin-top:10px;color:var(--text)">
                <input type="checkbox" name="motion" value="1" style="width:auto" {{ old('motion') ? 'checked' : '' }}>
                🎬 Motion (AI video clips instead of zoom — slower &amp; costs per clip)
            </label>

            <label style="display:flex;align-items:center;gap:8px;margin-top:10px;color:var(--text)">
                <input type="checkbox" name="countdown" value="1" style="width:auto" {{ old('countdown') ? 'checked' : '' }}>
                🔢 Countdown (Top-N: rank number on screen + countdown script)
            </label>

            <label style="display:flex;align-items:center;gap:8px;margin-top:10px;color:var(--text)">
                <input type="checkbox" name="economy" value="1" style="width:auto" {{ old('economy') ? 'checked' : '' }}>
                💸 Economy (low-cost draft: cheaper images, no motion)
            </label>

            <label style="display:flex;align-items:center;gap:8px;margin-top:10px;color:var(--muted)">
                <input type="checkbox" name="force" value="1" style="width:auto">
                Force (regenerate even if this topic already exists)
            </label>

            <p id="cost-estimate" class="muted" style="margin-top:14px"></p>

            <button type="submit">Generate short</button>
        </form>
    </div>

    <script>
        (function () {
            var P = @json(config('faceless.costs'));
            var CHARS_PER_SCENE = 100; // rough narration length before the script exists
            var form = document.getElementById('gen-form');
            var out = document.getElementById('cost-estimate');
            if (!form || !out) return;
            var n = function (v) { return parseFloat(v) || 0; };
            function calc() {
                var scenes = n(form.scene_count.value);
                var economy = form.economy && form.economy.checked;
                var imageUnit = economy ? n(P.image_low) : n(P.image);
                var cost = n(P.script)
                    + scenes * imageUnit
                    + (scenes * CHARS_PER_SCENE / 1000) * n(P.voice_per_1k);
                if (!economy && form.motion && form.motion.checked) cost += scenes * n(P.motion_clip);
                if (form.viral && form.viral.checked) cost += n(P.social_copy);
                out.textContent = 'Estimated cost: ~' + (P.currency || '$') + cost.toFixed(2) + ' per video';
            }
            form.addEventListener('input', calc);
            form.addEventListener('change', calc);
            calc();
        })();
    </script>

    @if($videos->isEmpty())
        <p class="muted" style="margin-top:28px">No videos yet — generate your first one above.</p>
    @else
        <div class="grid">
            @foreach($videos 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->viral)<span class="muted" title="Viral mode">· 🔥</span>@endif
                        @if($video->motion)<span class="muted" title="AI motion">· 🎬</span>@endif
                        @if($video->costLabel())<span class="muted" title="Estimated cost">· {{ $video->costLabel() }}</span>@endif
                        @if($video->isProcessing())
                            <div class="progress"><div class="bar" style="width:{{ max(3, $video->progress) }}%"></div></div>
                            <p class="muted stage">{{ $video->stage ?: 'Queued' }}</p>
                        @elseif($video->status === 'failed')
                            <p class="muted" style="margin:6px 0 0">{{ \Illuminate\Support\Str::limit($video->error, 80) }}</p>
                        @endif
                    </div>
                </div>
            @endforeach
        </div>
    @endif
@endsection