{#
  This file is part of g0v/OpenTransLive.
  Copyright (c) 2025 Sean Gau <rrtw0627@gmail.com>
  Licensed under the GNU AGPL v3.0
  See LICENSE for details.
-#}
{% extends "base.html" %}
{% block title %}GT Live 廣田資訊 - Edit Translations{% endblock %}

{% block head %}
<style>
  .seg-highlight { animation: seg-flash 1.4s ease-out; }
  @keyframes seg-flash {
    0%   { background-color: rgba(99, 102, 241, 0.35); }
    100% { background-color: transparent; }
  }
  .toc-text {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
</style>
{% endblock %}

{% block content %}
<div class="min-h-screen bg-gray-900 text-gray-100 font-sans">

  <header class="bg-gray-800 border-b border-gray-700 px-6 py-3 flex items-center justify-between">
    <div class="flex items-center gap-3 min-w-0">
      <span class="font-bold text-gray-100 tracking-tight">Edit Translations</span>
      <span class="text-xs font-mono text-gray-500 truncate">{{ sid }}</span>
    </div>
    <div class="flex items-center gap-3">
      <span class="text-xs text-gray-500 hidden sm:inline">{{ current_email }}</span>
      <a href="/logout" class="nav-link">Logout</a>
    </div>
  </header>

  <main class="container py-16">

    <div class="mb-4 flex flex-wrap items-center justify-between gap-3">
      <a href="/user-dashboard" class="text-xs text-gray-500 hover:text-gray-300 whitespace-nowrap flex items-center gap-1">
        <iconify-icon icon="mdi:arrow-left" width="16" height="16"></iconify-icon> My Sessions</a>
      <div class="flex flex-wrap items-center gap-2">
        <a href="/download/{{ sid }}" target="_blank" class="nav-link">Download JSON</a>
        {% for lang in languages %}
        <a href="/download/{{ sid }}/srt/{{ lang }}"
           class="inline-flex items-center gap-1 px-3 py-1 rounded text-xs font-semibold bg-emerald-800 hover:bg-emerald-700 text-emerald-100 transition-colors"
           download>
          <iconify-icon icon="mdi:download" width="14" height="14"></iconify-icon>
          SRT · {{ lang }}
        </a>
        {% endfor %}
      </div>
    </div>

    {% if not segments %}
    <div class="dark-card px-6 py-10 text-center text-sm text-gray-500">
      No saved transcriptions yet for this session.
    </div>
    {% else %}
    <div class="mb-4 flex flex-wrap items-center justify-between gap-2">
      <p class="text-xs text-gray-500">
        {{ segments|length }} segment(s). Edits save to the database; reload viewers to see changes.
      </p>
      <div id="status" class="text-xs min-h-4 text-gray-500"></div>
    </div>

    <aside id="segment-toc"
      class="fixed top-10 right-4 z-40 w-64 max-h-[calc(100vh-6rem)] dark-card flex flex-col shadow-xl">
      <div class="flex items-center justify-between px-3 py-2 border-b border-gray-700">
        <span class="text-xs font-semibold text-gray-300">Segments ({{ segments|length }})</span>
        <button id="toc-hide-btn" class="text-gray-400 hover:text-gray-200" title="Hide panel">
          <iconify-icon icon="mdi:chevron-right" width="18" height="18"></iconify-icon>
        </button>
      </div>
      <div id="toc-list" class="flex-1 overflow-y-auto divide-y divide-gray-800"></div>
    </aside>
    <button id="toc-show-btn"
      class="fixed top-10 right-2 z-40 hidden items-center gap-1 dark-card px-2 py-1 text-xs text-gray-300 hover:text-gray-100"
      title="Show segments">
      <iconify-icon icon="mdi:format-list-bulleted" width="16" height="16"></iconify-icon>
      <span>Segments</span>
    </button>

    <div class="dark-card divide-y divide-gray-700">
      {% for seg in segments %}
      <div class="px-4 py-3 segment-row" data-start-time="{{ seg.start_time }}"{% if seg.end_time %} data-end-time="{{ seg.end_time }}"{% endif %}>
        <div class="flex flex-wrap items-center gap-1 mb-2 text-xs text-gray-500 font-mono">
          <span class="seg-start-display">{{ seg.start_time }}</span>
          {% if seg.end_time %}
          <iconify-icon icon="mdi:arrow-right" width="12" height="12"></iconify-icon>
          <span class="seg-end-display">{{ seg.end_time }}</span>
          {% endif %}
        </div>
        <div class="grid grid-cols-[88px_1fr] gap-y-2 gap-x-3">
          <label class="text-xs text-gray-400 self-start pt-1.5">corrected</label>
          <textarea data-field="corrected" rows="1"
            class="seg-input w-full bg-gray-900 border border-gray-700 text-gray-100 text-sm rounded px-2 py-1 focus:ring-1 focus:ring-blue-500 outline-none resize-y">{{ (seg.result or {}).corrected or '' }}</textarea>
          {% set translated = (seg.result or {}).translated or {} %}
          {% for lang in languages %}
          {% if lang in translated %}
          <label class="text-xs text-gray-500 font-mono self-start pt-1.5 break-all">{{ lang }}</label>
          <textarea data-field="translated" data-lang="{{ lang }}" rows="1"
            class="seg-input w-full bg-gray-900 border border-gray-700 text-gray-200 text-sm rounded px-2 py-1 focus:ring-1 focus:ring-blue-500 outline-none resize-y">{{ translated[lang] }}</textarea>
          {% endif %}
          {% endfor %}
        </div>
        <div class="mt-2 flex items-center justify-end gap-2">
          <span class="row-status text-xs text-gray-500"></span>
          <button class="delete-btn px-3 py-1 rounded text-xs font-semibold bg-red-800 hover:bg-red-700 text-red-100 transition-colors">Delete</button>
          <button class="reset-btn px-3 py-1 rounded text-xs font-semibold bg-gray-700 hover:bg-gray-600 text-gray-300 transition-colors">Reset</button>
          <button class="save-btn px-3 py-1 rounded text-xs font-semibold bg-indigo-700 hover:bg-indigo-600 text-indigo-100 transition-colors">Save</button>
        </div>
      </div>
      {% endfor %}
    </div>
    {% endif %}
  </main>
</div>
{% endblock %}

{% block scripts %}
<script>
  const sid = {{ sid | tojson }};

  function autosize(el) {
    el.style.height = 'auto';
    el.style.height = el.scrollHeight + 'px';
  }

  function formatDateTime(ts) {
    const n = Number(ts);
    if (!Number.isFinite(n)) return '';
    return new Date(n * 1000).toLocaleString();
  }

  function formatTimeShort(ts) {
    const n = Number(ts);
    if (!Number.isFinite(n)) return '';
    return new Date(n * 1000).toLocaleTimeString();
  }

  function setRowStatus(row, msg, isError) {
    const el = row.querySelector('.row-status');
    el.textContent = msg;
    el.style.color = isError ? '#f87171' : '#9ca3af';
  }

  function snapshotOriginals(row) {
    row.querySelectorAll('textarea').forEach(t => { t.dataset.original = t.value; });
  }

  document.querySelectorAll('.segment-row').forEach(row => {
    snapshotOriginals(row);
    row.querySelectorAll('textarea').forEach(t => {
      autosize(t);
      t.addEventListener('input', () => autosize(t));
    });
    const startEl = row.querySelector('.seg-start-display');
    if (startEl) startEl.textContent = formatDateTime(row.dataset.startTime);
    const endEl = row.querySelector('.seg-end-display');
    if (endEl && row.dataset.endTime) endEl.textContent = formatDateTime(row.dataset.endTime);
  });

  // ── Floating segment TOC ──────────────────────────────────────────────
  const tocList = document.getElementById('toc-list');
  const tocPanel = document.getElementById('segment-toc');
  const tocShowBtn = document.getElementById('toc-show-btn');
  const tocHideBtn = document.getElementById('toc-hide-btn');

  function tocItemFor(key) {
    if (!tocList) return null;
    return tocList.querySelector(`.toc-item[data-start-time="${CSS.escape(key)}"]`);
  }

  function scrollToSegment(row) {
    row.scrollIntoView({ behavior: 'smooth', block: 'center' });
    row.classList.remove('seg-highlight');
    // Force reflow so re-adding the class restarts the animation.
    void row.offsetWidth;
    row.classList.add('seg-highlight');
  }

  function buildTocItem(row) {
    const startTime = parseFloat(row.dataset.startTime);
    const correctedEl = row.querySelector('[data-field="corrected"]');
    const preview = (correctedEl ? correctedEl.value : '').trim();

    const item = document.createElement('button');
    item.type = 'button';
    item.className = 'toc-item w-full text-left px-3 py-2 hover:bg-gray-700/60 focus:bg-gray-700/60 focus:outline-none flex gap-2 items-start';
    item.dataset.startTime = row.dataset.startTime;

    const timeSpan = document.createElement('span');
    timeSpan.className = 'font-mono text-[11px] text-gray-500 shrink-0 pt-0.5';
    timeSpan.textContent = formatTimeShort(startTime);

    const textSpan = document.createElement('span');
    textSpan.className = 'toc-text text-xs text-gray-200 break-words';
    textSpan.textContent = preview || '(empty)';
    if (!preview) textSpan.classList.add('italic', 'text-gray-500');

    item.append(timeSpan, textSpan);
    item.addEventListener('click', () => scrollToSegment(row));
    return item;
  }

  function updateTocItem(key, correctedText) {
    const item = tocItemFor(key);
    if (!item) return;
    const textEl = item.querySelector('.toc-text');
    const preview = (correctedText || '').trim();
    textEl.textContent = preview || '(empty)';
    textEl.classList.toggle('italic', !preview);
    textEl.classList.toggle('text-gray-500', !preview);
    textEl.classList.toggle('text-gray-200', !!preview);
  }

  function removeTocItem(key) {
    const item = tocItemFor(key);
    if (item) item.remove();
  }

  if (tocList) {
    document.querySelectorAll('.segment-row').forEach(row => {
      tocList.appendChild(buildTocItem(row));
    });
  }

  function setTocOpen(open) {
    if (!tocPanel || !tocShowBtn) return;
    tocPanel.classList.toggle('hidden', !open);
    tocPanel.classList.toggle('flex', open);
    tocShowBtn.classList.toggle('hidden', open);
    tocShowBtn.classList.toggle('flex', !open);
  }

  if (tocShowBtn && tocPanel && tocHideBtn) {
    setTocOpen(window.innerWidth >= 1024);
    tocHideBtn.addEventListener('click', () => setTocOpen(false));
    tocShowBtn.addEventListener('click', () => setTocOpen(true));
  }

  document.querySelectorAll('.reset-btn').forEach(btn => {
    btn.addEventListener('click', () => {
      const row = btn.closest('.segment-row');
      row.querySelectorAll('textarea').forEach(t => {
        t.value = t.dataset.original || '';
        autosize(t);
      });
      setRowStatus(row, '', false);
    });
  });

  document.querySelectorAll('.delete-btn').forEach(btn => {
    btn.addEventListener('click', async () => {
      const row = btn.closest('.segment-row');
      const startTime = parseFloat(row.dataset.startTime);
      if (!confirm(`Delete segment at ${formatDateTime(startTime)}? This cannot be undone.`)) return;

      const siblings = row.querySelectorAll('button');
      siblings.forEach(b => { b.disabled = true; });
      setRowStatus(row, 'Deleting…', false);
      try {
        const res = await fetch(`/api/session/${encodeURIComponent(sid)}/segments?start_time=${encodeURIComponent(startTime)}`, {
          method: 'DELETE',
          credentials: 'same-origin',
        });
        if (!res.ok) {
          const data = await res.json().catch(() => ({}));
          setRowStatus(row, data.detail || ('Error: ' + res.status), true);
          siblings.forEach(b => { b.disabled = false; });
          return;
        }
        removeTocItem(row.dataset.startTime);
        row.remove();
      } catch (e) {
        setRowStatus(row, 'Network error', true);
        siblings.forEach(b => { b.disabled = false; });
      }
    });
  });

  document.querySelectorAll('.save-btn').forEach(btn => {
    btn.addEventListener('click', async () => {
      const row = btn.closest('.segment-row');
      const startTime = parseFloat(row.dataset.startTime);
      const correctedEl = row.querySelector('[data-field="corrected"]');
      const corrected = correctedEl ? correctedEl.value : null;
      const translated = {};
      row.querySelectorAll('[data-field="translated"]').forEach(t => {
        translated[t.dataset.lang] = t.value;
      });

      btn.disabled = true;
      const prev = btn.textContent;
      btn.textContent = '...';
      setRowStatus(row, 'Saving…', false);
      try {
        const payload = { start_time: startTime, corrected };
        if (Object.keys(translated).length) payload.translated = translated;
        const res = await fetch(`/api/session/${encodeURIComponent(sid)}/segments`, {
          method: 'PUT',
          credentials: 'same-origin',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(payload),
        });
        if (!res.ok) {
          const data = await res.json().catch(() => ({}));
          setRowStatus(row, data.detail || ('Error: ' + res.status), true);
          return;
        }
        snapshotOriginals(row);
        updateTocItem(row.dataset.startTime, corrected || '');
        setRowStatus(row, 'Saved', false);
      } catch (e) {
        setRowStatus(row, 'Network error', true);
      } finally {
        btn.disabled = false;
        btn.textContent = prev;
      }
    });
  });
</script>
{% endblock %}