{% extends "base.html" %}
{% block content %}
<div class="flex items-start justify-between mb-4">
  <div>
    <h1 class="text-xl font-semibold">Videos</h1>
    <p class="text-sm text-slate-500">
      블로그 포스트 → 1~2분 뉴스 비디오 → YouTube ({{ channel_name }}).
      기본 공개 상태: <span class="font-mono">{{ default_privacy }}</span>,
      일일 업로드 한도 {{ daily_cap }}건.
      {% if not enabled %}
        <span class="text-amber-600">⚠ 비디오 생성 비활성화됨. Settings에서 활성화하세요.</span>
      {% endif %}
    </p>
  </div>
  <div class="text-right text-xs text-slate-500">
    <div>reference voice: <span class="font-mono">{{ reference_voice_path or '(base voice)' }}</span></div>
    <div>auto upload: {{ 'on' if auto_upload else 'off' }}</div>
  </div>
</div>

<div id="videos-status" class="mb-4 min-h-[24px]"></div>

<!-- Posts with no video yet -->
{% if missing %}
<section class="bg-white rounded-lg shadow p-5 mb-6">
  <h2 class="text-sm font-semibold text-slate-700 mb-3">
    비디오가 아직 생성되지 않은 포스트 ({{ missing|length }})
  </h2>
  <ul class="divide-y divide-slate-100 text-sm">
    {% for m in missing %}
    <li class="py-2 flex items-center gap-3">
      <div class="flex-1 min-w-0">
        <div class="truncate font-medium">{{ m.title }}</div>
        <div class="text-xs text-slate-400 font-mono">{{ m.slug }}</div>
      </div>
      <form hx-post="/videos/trigger"
            hx-target="#videos-status"
            hx-swap="innerHTML"
            class="shrink-0">
        <input type="hidden" name="slug" value="{{ m.slug }}">
        <button type="submit"
                class="px-3 py-1 text-xs rounded bg-emerald-600 text-white hover:bg-emerald-700">
          Generate video
        </button>
      </form>
    </li>
    {% endfor %}
  </ul>
</section>
{% endif %}

<!-- Video cards -->
{% if videos %}
<div class="grid grid-cols-1 md:grid-cols-2 gap-5">
  {% for v in videos %}
  <div class="bg-white rounded-lg shadow overflow-hidden">
    <div class="relative aspect-video bg-slate-900">
      {% if v.thumb_url %}
        <img src="{{ v.thumb_url }}" alt="thumbnail" class="w-full h-full object-cover">
      {% else %}
        <div class="absolute inset-0 flex items-center justify-center text-slate-500 text-sm">
          no thumbnail
        </div>
      {% endif %}
      <div class="absolute bottom-2 right-2 bg-black/70 text-white text-xs px-2 py-0.5 rounded">
        {% if v.duration %}{{ '%0.0f' % v.duration }}s{% else %}--{% endif %}
      </div>
      <div class="absolute top-2 left-2">
        {% set color =
          'bg-emerald-600' if v.status in ('uploaded','success') else
          'bg-amber-500'   if v.status == 'running' else
          'bg-rose-600'    if v.status == 'failed'  else
          'bg-slate-500' %}
        <span class="{{ color }} text-white text-xs px-2 py-0.5 rounded-full font-semibold uppercase">
          {{ v.status }}
        </span>
      </div>
    </div>
    <div class="p-4 space-y-2">
      <div>
        <div class="font-medium leading-snug">{{ v.title }}</div>
        <div class="text-xs text-slate-400 font-mono truncate">{{ v.slug }}</div>
      </div>

      {% if v.youtube_url %}
      <div class="text-xs">
        <a href="{{ v.youtube_url }}" target="_blank" rel="noopener"
           class="text-indigo-600 hover:underline break-all">{{ v.youtube_url }}</a>
        <span class="ml-2 text-slate-500">({{ v.youtube_privacy or 'unlisted' }})</span>
      </div>
      {% endif %}

      {% if v.last_error %}
      <div class="text-xs text-rose-600 bg-rose-50 rounded p-2">
        {{ v.last_error }}{% if v.fail_count %} (fail #{{ v.fail_count }}){% endif %}
      </div>
      {% endif %}

      <div class="flex flex-wrap gap-2 pt-2">
        {% if v.status in ('success','uploaded','failed') %}
          <button
            hx-post="/videos/{{ v.id }}/regenerate"
            hx-target="#videos-status"
            hx-swap="innerHTML"
            class="px-3 py-1 text-xs rounded border border-slate-300 hover:bg-slate-50">
            Regenerate
          </button>
        {% endif %}

        {% if v.status == 'success' and not v.youtube_video_id %}
          <button
            hx-post="/videos/{{ v.id }}/upload"
            hx-target="#videos-status"
            hx-swap="innerHTML"
            class="px-3 py-1 text-xs rounded bg-indigo-600 text-white hover:bg-indigo-700">
            Upload to YouTube
          </button>
        {% endif %}

        {% if v.youtube_video_id and v.youtube_privacy == 'unlisted' %}
          <button
            hx-post="/videos/{{ v.id }}/publish"
            hx-target="#videos-status"
            hx-swap="innerHTML"
            hx-confirm="이 비디오를 공개(public)로 전환합니다. 계속할까요?"
            class="px-3 py-1 text-xs rounded bg-emerald-600 text-white hover:bg-emerald-700">
            Make public
          </button>
        {% elif v.youtube_video_id and v.youtube_privacy == 'public' %}
          <button
            hx-post="/videos/{{ v.id }}/unpublish"
            hx-target="#videos-status"
            hx-swap="innerHTML"
            class="px-3 py-1 text-xs rounded bg-amber-500 text-white hover:bg-amber-600">
            Unpublish
          </button>
        {% endif %}

        <button
          hx-delete="/videos/{{ v.id }}"
          hx-target="#videos-status"
          hx-swap="innerHTML"
          hx-confirm="로컬 비디오 파일과 DB를 삭제합니다. YouTube 영상은 그대로 남습니다."
          class="px-3 py-1 text-xs rounded border border-rose-300 text-rose-600 hover:bg-rose-50 ml-auto">
          Delete
        </button>
      </div>

      {% if v.status in ('success','uploaded') and v.id %}
      <video controls class="w-full rounded mt-2"
             src="/videos-data/{{ v.slug }}.mp4"></video>
      {% endif %}
    </div>
  </div>
  {% endfor %}
</div>
{% else %}
<div class="bg-white rounded-lg shadow p-8 text-center text-sm text-slate-500">
  아직 생성된 비디오가 없습니다. 위의 포스트 목록에서 "Generate video"를 눌러
  시작하거나, Settings에서 비디오 생성을 활성화하면 daemon이 자동 실행합니다.
</div>
{% endif %}

{% endblock %}