{% extends "base.html" %}
{% block title %} — Ask{% endblock %}
{% block content %}
<div x-data="askPanel()" x-init="loadChannels()" class="max-w-3xl space-y-6">
  <div>
    <h1 class="text-xl font-semibold mb-1">Ask</h1>
    <p class="text-sm text-zinc-500 dark:text-zinc-400">
      Ask questions or analysis about your videos — counts, stats, comparisons,
      and content. The assistant searches and queries your data to answer, e.g.
      "how many steak challenges did each channel do?" or "why did one video get
      more views than another?". Content answers cite the moments they come from.
      Indexing (for content questions) embeds transcripts locally with Ollama;
      the answer uses your default provider.
    </p>
  </div>

  <div class="flex flex-wrap items-end gap-3 text-sm">
    <label class="flex flex-col gap-1 flex-1 min-w-64">
      <span class="text-zinc-500 dark:text-zinc-400">Channel</span>
      <select x-model="channelId" @change="refreshStatus()"
              class="rounded border border-zinc-300 dark:border-zinc-700 bg-white dark:bg-zinc-900 px-2 py-1">
        <option value="">All indexed channels</option>
        <template x-for="c in channels" :key="c.id">
          <option :value="c.id" x-text="c.title"></option>
        </template>
      </select>
    </label>
    <button @click="index()" :disabled="!channelId || indexing"
            class="rounded border border-zinc-300 dark:border-zinc-700 px-3 py-2 disabled:opacity-50">
      <span x-text="indexing ? 'Indexing…' : 'Index channel'"></span>
    </button>
    <span class="text-xs text-zinc-500" x-text="indexedChunks + ' chunks indexed'"></span>
  </div>

  <form @submit.prevent="ask()" class="space-y-2">
    <div class="flex gap-2">
      <input type="text" x-model="question" placeholder="What does this channel say about…"
             class="flex-1 rounded border border-zinc-300 dark:border-zinc-700 bg-white dark:bg-zinc-900 px-3 py-2">
      <button type="submit" :disabled="!question || asking"
              class="rounded bg-accent px-4 py-2 text-white text-sm font-medium disabled:opacity-50">
        <span x-text="asking ? 'Thinking…' : 'Ask'"></span>
      </button>
      <button type="button" x-show="indexing || asking" @click="cancelJob(jobId)"
              class="rounded border border-zinc-300 dark:border-zinc-700 px-3 py-2 text-sm">
        Cancel
      </button>
    </div>
    <span x-show="(indexing || asking) && progress" class="text-sm text-zinc-500" x-text="progress"></span>
    <span x-show="error" class="text-sm text-accent" x-text="error"></span>
  </form>

  <div x-show="answer" class="border border-zinc-200 dark:border-zinc-800 rounded p-4 space-y-3">
    <div class="prose-blog text-sm" x-html="rendered"></div>
    <div x-show="cost" class="text-xs text-zinc-400" x-text="formatCost(cost)"></div>
    <details x-show="steps.length" class="text-xs text-zinc-500">
      <summary class="cursor-pointer">How I got this (<span x-text="steps.length"></span> steps)</summary>
      <ol class="mt-1 list-decimal pl-5 space-y-0.5 font-mono">
        <template x-for="(s, i) in steps" :key="i"><li x-text="s"></li></template>
      </ol>
    </details>
    <div x-show="citations.length" class="border-t border-zinc-200 dark:border-zinc-800 pt-3">
      <div class="text-xs uppercase tracking-wide text-zinc-400 mb-1">Sources</div>
      <ol class="text-xs space-y-1">
        <template x-for="c in citations" :key="c.index">
          <li>
            <span class="text-zinc-400" x-text="'[' + c.index + '] '"></span>
            <a :href="c.url" target="_blank" rel="noopener" class="text-accent hover:underline"
               x-text="c.title + ' @ ' + clock(c.start_seconds)"></a>
            <span class="text-zinc-500" x-text="' — ' + c.snippet"></span>
          </li>
        </template>
      </ol>
    </div>
  </div>
</div>
{% endblock %}