{% extends "base.html" %}
{% block app_nav %}
<nav class="app-tabs">
  <button class="app-tab is-active" data-panel="new-job">新建任务</button>
  <button class="app-tab" data-panel="job-history">任务历史</button>
  <a href="/config{% if default_config_path %}?config_path={{ default_config_path | urlencode }}{% endif %}" class="app-tab">编辑配置</a>
</nav>
{% endblock %}
{% block content %}

<div class="app-panel panel-new-job" id="panel-new-job">
  <form method="post" action="/jobs" class="form-grid" enctype="multipart/form-data" id="upload-form">
    <label class="field field-file field-wide">
      <span>选择视频文件</span>
      <input type="file" name="video_file" accept="video/*,.ts,.mts,.m2ts,video/mp2t" required>
    </label>
    <input type="hidden" name="existing_video_path" value="">
    <input type="hidden" name="file_hash" value="">
    <label class="field field-wide">
      <span>配置文件路径</span>
      <input type="text" name="config_path" value="{{ default_config_path or '' }}">
    </label>
    <label class="field field-checkbox">
      <span>启用清洗</span>
      <input type="checkbox" name="cleaning_enabled" {% if submission_form_defaults.cleaning_enabled %}checked{% endif %}>
    </label>
    <label class="field">
      <span>字幕位置</span>
      <select name="subtitle_position">
        <option value="">默认</option>
        <option value="bottom" {% if submission_form_defaults.subtitle_position == 'bottom' %}selected{% endif %}>bottom</option>
        <option value="top" {% if submission_form_defaults.subtitle_position == 'top' %}selected{% endif %}>top</option>
        <option value="short_video_safe" {% if submission_form_defaults.subtitle_position == 'short_video_safe' %}selected{% endif %}>short_video_safe</option>
      </select>
    </label>
    <label class="field">
      <span>字幕字体主题</span>
      <select name="subtitle_font_theme">
        <option value="">默认</option>
        <option value="default" {% if submission_form_defaults.subtitle_font_theme == 'default' %}selected{% endif %}>default</option>
        <option value="short_video_bold" {% if submission_form_defaults.subtitle_font_theme == 'short_video_bold' %}selected{% endif %}>short_video_bold</option>
        <option value="minimal" {% if submission_form_defaults.subtitle_font_theme == 'minimal' %}selected{% endif %}>minimal</option>
      </select>
    </label>
    <div class="form-actions field-wide">
      <button type="submit" class="button-primary">开始处理</button>
      <p id="upload-status" class="section-note" aria-live="polite"></p>
    </div>
  </form>
</div>

<div class="app-panel hidden" id="panel-job-history">
  {% if submissions %}
  <ul class="job-history-list">
    {% for submission in submissions %}
    <li class="job-history-item">
      <a href="/jobs/{{ submission.submission_id }}" class="job-history-link">
        <span class="job-history-id">{{ submission.submission_id }}</span>
        <span class="job-history-file">{{ submission.video_path.split('/')[-1] }}</span>
        <span class="job-history-status">{{ submission.status }}</span>
      </a>
    </li>
    {% endfor %}
  </ul>
  {% else %}
  <p class="empty-state">暂无任务。</p>
  {% endif %}
</div>

<script>
  (() => {
    const tabs = document.querySelectorAll('.app-tab[data-panel]');
    const panels = document.querySelectorAll('.app-panel');

    function activateTab(panelName) {
      tabs.forEach(t => t.classList.toggle('is-active', t.dataset.panel === panelName));
      panels.forEach(p => p.classList.toggle('hidden', p.id !== 'panel-' + panelName));
    }

    tabs.forEach(tab => {
      tab.addEventListener('click', () => activateTab(tab.dataset.panel));
    });

    const urlTab = new URLSearchParams(location.search).get('tab');
    if (urlTab) activateTab(urlTab);

    const form = document.getElementById('upload-form');
    const fileInput = form?.querySelector('input[name="video_file"]');
    const configInput = form?.querySelector('input[name="config_path"]');
    const existingPathInput = form?.querySelector('input[name="existing_video_path"]');
    const fileHashInput = form?.querySelector('input[name="file_hash"]');
    const submitButton = form?.querySelector('button[type="submit"]');
    const status = document.getElementById('upload-status');
    let bypassIntercept = false;

    const setStatus = (text) => {
      if (status) status.textContent = text;
    };

    const clearReuseFields = () => {
      if (existingPathInput) existingPathInput.value = '';
      if (fileHashInput) fileHashInput.value = '';
    };

    const UPLOAD_LOOKUP_KEY_VERSION = 'sample-v1';
    const UPLOAD_LOOKUP_SAMPLE_BYTES = 4 * 1024 * 1024;

    const toHex = (buffer) => Array.from(new Uint8Array(buffer))
      .map((item) => item.toString(16).padStart(2, '0'))
      .join('');

    const buildSampleRanges = (size) => {
      if (size <= UPLOAD_LOOKUP_SAMPLE_BYTES * 3) {
        return [[0, size]];
      }
      const middleStart = Math.max(0, Math.floor(size / 2) - Math.floor(UPLOAD_LOOKUP_SAMPLE_BYTES / 2));
      const middleEnd = Math.min(size, middleStart + UPLOAD_LOOKUP_SAMPLE_BYTES);
      return [
        [0, UPLOAD_LOOKUP_SAMPLE_BYTES],
        [middleStart, middleEnd],
        [size - UPLOAD_LOOKUP_SAMPLE_BYTES, size],
      ];
    };

    const computeHash = async (file) => {
      const encoder = new TextEncoder();
      const ranges = buildSampleRanges(file.size);
      const parts = [encoder.encode(`${UPLOAD_LOOKUP_KEY_VERSION}:${file.size}:`)];
      for (const [start, end] of ranges) {
        parts.push(encoder.encode(`${start}:${end}:`));
        if (end > start) {
          parts.push(new Uint8Array(await file.slice(start, end).arrayBuffer()));
        }
      }
      const totalLength = parts.reduce((sum, part) => sum + part.byteLength, 0);
      const combined = new Uint8Array(totalLength);
      let offset = 0;
      for (const part of parts) {
        combined.set(part, offset);
        offset += part.byteLength;
      }
      const digest = await crypto.subtle.digest('SHA-256', combined);
      return `${UPLOAD_LOOKUP_KEY_VERSION}:${file.size}:${toHex(digest)}`;
    };

    const releaseSubmit = () => {
      if (submitButton) submitButton.disabled = false;
    };

    if (form && fileInput && configInput && existingPathInput && fileHashInput && submitButton && window.crypto?.subtle) {
      form.addEventListener('submit', async (event) => {
        if (bypassIntercept) {
          bypassIntercept = false;
          return;
        }
        const file = fileInput.files?.[0];
        if (!file) return;
        event.preventDefault();
        clearReuseFields();
        submitButton.disabled = true;
        try {
          setStatus('正在计算文件指纹…');
          const fileHash = await computeHash(file);
          setStatus('正在检查是否已上传…');
          const response = await fetch('/api/uploads/lookup', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({
              file_hash: fileHash,
              filename: file.name,
              config_path: configInput.value,
            }),
          });
          if (!response.ok) throw new Error(`lookup failed: ${response.status}`);
          const payload = await response.json();
          if (payload.exists && payload.video_path) {
            existingPathInput.value = payload.video_path;
            fileHashInput.value = fileHash;
            setStatus('命中已上传文件，复用现有视频…');
          } else {
            setStatus('未找到重复文件，继续上传…');
          }
        } catch (error) {
          clearReuseFields();
          setStatus('查重失败，继续原始上传…');
        } finally {
          releaseSubmit();
          bypassIntercept = true;
          form.requestSubmit();
        }
      });
    }
  })();
</script>
{% endblock %}