const DATASET_KEY = "humanlabeling_dataset";
const AUTOSAVE_DELAY = 1500;

let _dataset = [];
let _activeRowId = null;
let _autosaveTimer = null;
let _currentReferences = [];
let _currentVideoUrl = null;
let _currentTitle = "";
let _currentPage = 1;
const PAGE_SIZE = 10;

// ── Init ──────────────────────────────────────────────────────────────────────
window.addEventListener("DOMContentLoaded", () => {
  _loadDataset();

  document.getElementById("transcriptArea").addEventListener("input", () => {
    updateCharCount();
    _scheduleAutosave();
  });
  document.getElementById("refInput").addEventListener("keydown", (e) => {
    if (e.key === "Enter") addReference();
  });
});

// ── References ────────────────────────────────────────────────────────────────
function addReference() {
  const input = document.getElementById("refInput");
  const val = input.value.trim();
  if (!val) return;
  if (!_currentReferences.includes(val)) {
    _currentReferences.push(val);
    _renderRefPills();
    _scheduleAutosave();
  }
  input.value = "";
  input.focus();
}

function removeReference(idx) {
  _currentReferences.splice(idx, 1);
  _renderRefPills();
  _scheduleAutosave();
}

function editReference(idx) {
  const current = _currentReferences[idx];
  const container = document.getElementById("refPills");
  const pill = container.querySelectorAll(".ref-pill")[idx];
  if (!pill) return;

  const input = document.createElement("input");
  input.className = "ref-pill-edit";
  input.value = current;
  pill.innerHTML = "";
  pill.appendChild(input);
  input.focus();
  input.select();

  function commit() {
    const val = input.value.trim();
    if (val && val !== current) {
      _currentReferences[idx] = val;
      _scheduleAutosave();
    }
    _renderRefPills();
  }
  input.addEventListener("keydown", (e) => {
    if (e.key === "Enter") { e.preventDefault(); commit(); }
    if (e.key === "Escape") _renderRefPills();
  });
  input.addEventListener("blur", commit);
}

function _renderRefPills() {
  const container = document.getElementById("refPills");
  if (_currentReferences.length === 0) {
    container.innerHTML = "";
    return;
  }
  container.innerHTML = _currentReferences
    .map(
      (ref, i) => `
    <span class="ref-pill">
      <span class="ref-pill-text" onclick="editReference(${i})" title="Nhấn để sửa">${_esc(ref)}</span>
      <button onclick="removeReference(${i})" title="Xoá">×</button>
    </span>
  `,
    )
    .join("");
}

// ── Video preview ─────────────────────────────────────────────────────────────
function loadVideoPreview(url) {
  const container = document.getElementById("videoContainer");
  const ytMatch = url.match(/(?:v=|youtu\.be\/|shorts\/)([A-Za-z0-9_-]{11})/);
  if (!ytMatch) {
    container.innerHTML = `<div class="video-placeholder"><p style="color:#475569;font-size:12px;">Không phải YouTube URL</p></div>`;
    return;
  }
  container.innerHTML = "";
  const iframe = document.createElement("iframe");
  iframe.width = "100%";
  iframe.height = "100%";
  iframe.style.border = "none";
  iframe.allow =
    "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture";
  iframe.allowFullscreen = true;
  iframe.src = `https://www.youtube.com/embed/${ytMatch[1]}`;
  container.appendChild(iframe);
}

// ── Transcript ────────────────────────────────────────────────────────────────
function setTranscript(text) {
  document.getElementById("transcriptArea").value = text || "";
  updateCharCount();
}

function updateCharCount() {
  const text = document.getElementById("transcriptArea").value;
  const el = document.getElementById("charCount");
  if (text.length > 0) {
    const words = text.trim().split(/\s+/).length;
    el.textContent = `${words} từ · ${text.length} ký tự`;
  } else {
    el.textContent = "";
  }
}

async function copyText() {
  const text = document.getElementById("transcriptArea").value;
  if (!text) return;
  try {
    await navigator.clipboard.writeText(text);
    const btn = document.getElementById("copyBtn");
    btn.innerHTML = '<i class="ri-check-line"></i> Đã copy!';
    setTimeout(() => {
      btn.innerHTML = '<i class="ri-file-copy-line"></i> Copy';
    }, 1500);
  } catch (_) {}
}

const _INSTRUCTION_TEMPLATE = `Bạn là một trợ lý AI chuyên nghiệp về biên tập nội dung pháp luật. Nhiệm vụ của bạn là sửa lỗi chính tả và định dạng lại văn bản phụ đề (transcript) của video dựa trên các quy tắc nghiêm ngặt sau:

### 1. QUY TẮC NGUYÊN VĂN (BẮT BUỘC)
- GIỮ NGUYÊN VĂN TỪNG CÂU TỪNG CHỮ của bản phụ đề được cung cấp.
- KHÔNG TÓM TẮT, không cắt xén, không tự ý viết lại câu theo ý mình, không chuyển thành dạng danh sách bài viết (trừ khi văn bản gốc đang liệt kê điều khoản 1, 2, 3...).

### 2. QUY TẮC SỬA LỖI & CHUẨN HÓA KHÁCH QUAN
- Sửa các lỗi chính tả do công cụ nhận diện giọng nói tự động (AI speech-to-text) nhận diện sai từ đồng âm (Ví dụ: "chữa thuế" -> "chịu thuế", "bài hát xã hội" -> "bảo hiểm xã hội").
- Nếu trong phụ đề có số liệu bị nhận diện sai lệch so với thực tế phát âm của video (Ví dụ: nghe nhầm 135 thành 155), hãy đính chính lại cho đúng với âm thanh trong video.
- Thêm dấu câu đầy đủ (chấm, phẩy, hai chấm, viết hoa đầu câu) để ngắt câu mạch lạc, rõ nghĩa.
- Giữ nguyên các đoạn quảng cáo chèn giữa video của kênh (nếu có trong phụ đề).

### 3. BỔ SUNG THÔNG TIN VĂN BẢN PHÁP LUẬT
- Khi trong phụ đề nhắc đến một văn bản pháp luật (Nghị quyết, Nghị định, Thông tư...) nhưng chỉ có số mà thiếu ký hiệu hoặc năm ban hành, hãy tra cứu nhanh để bổ sung đầy đủ ký hiệu chuẩn pháp lý (Ví dụ: "Nghị quyết 278 ngày 13 tháng 9" -> "Nghị quyết số 278/NQ-CP ngày 13 tháng 9 năm 2025").

### 4. ĐỊNH DẠNG ĐẦU RA
- Xuất kết quả duy nhất dưới dạng một khối mã Markdown (Code block) chứa văn bản hoàn chỉnh để người dùng dễ sao chép.

---
### THÔNG TIN CẦN XỬ LÝ:
- URL Video: {{URL}}
- Nội dung phụ đề gốc:
{{SCRIPT}}`;

async function generateInstruction() {
  const script = document.getElementById("transcriptArea").value.trim();
  const url = _currentVideoUrl || "";
  if (!script && !url) return;

  const prompt = _INSTRUCTION_TEMPLATE
    .replace("{{URL}}", url || "[Chèn link video vào đây]")
    .replace("{{SCRIPT}}", script || "[Dán đoạn phụ đề cần sửa vào đây]");

  try {
    await navigator.clipboard.writeText(prompt);
    const btn = document.getElementById("genInstrBtn");
    btn.innerHTML = '<i class="ri-check-line"></i> Đã copy!';
    setTimeout(() => {
      btn.innerHTML = '<i class="ri-sparkling-line"></i> Gen Instruction';
    }, 2000);
  } catch (_) {}
}

// ── Status bar ────────────────────────────────────────────────────────────────
function setStatus(type, text) {
  const bar = document.getElementById("statusBar");
  bar.className = `status-bar ${type}`;
  document.getElementById("statusText").textContent = text;
}

// ── Dataset ───────────────────────────────────────────────────────────────────
function _loadDataset() {
  try {
    _dataset = JSON.parse(localStorage.getItem(DATASET_KEY) || "[]");
  } catch (_) {
    _dataset = [];
  }
  _renderDataset();
}

function _saveDataset() {
  localStorage.setItem(DATASET_KEY, JSON.stringify(_dataset));
  _showAutosaved();
}

function _scheduleAutosave() {
  if (!_activeRowId) return;
  clearTimeout(_autosaveTimer);
  document.getElementById("autosaveIndicator").textContent = "lưu...";
  document.getElementById("autosaveIndicator").className = "autosave-indicator";
  _autosaveTimer = setTimeout(() => {
    const entry = _dataset.find((e) => e.id === _activeRowId);
    if (entry) {
      entry.script = document.getElementById("transcriptArea").value;
      entry.references = [..._currentReferences];
      _saveDataset();
      _renderDataset();
    }
  }, AUTOSAVE_DELAY);
}

function _showAutosaved() {
  const el = document.getElementById("autosaveIndicator");
  el.textContent = "đã lưu";
  el.className = "autosave-indicator saved";
  setTimeout(() => {
    el.textContent = "";
  }, 2000);
}

function saveCurrentToDataset() {
  if (!_activeRowId) return;
  const script = document.getElementById("transcriptArea").value.trim();
  const entry = _dataset.find((e) => e.id === _activeRowId);
  if (!entry) return;

  entry.script = script;
  entry.references = [..._currentReferences];
  entry.status = "verified";
  _saveDataset();
  _renderDataset();
  setStatus("done", `Đã verify: ${_esc(entry.title)}`);

  // Auto-advance to next unverified entry
  const currentIdx = _dataset.findIndex((e) => e.id === _activeRowId);
  const next = _dataset.slice(currentIdx + 1).find((e) => (e.status || "none") !== "verified");
  if (next) selectRow(next.id);
}

function selectRow(id) {
  const entry = _dataset.find((e) => e.id === id);
  if (!entry) return;
  _activeRowId = id;
  _currentVideoUrl = entry.url;
  _currentTitle = entry.title;
  _currentReferences = [...(entry.references || [])];
  setTranscript(entry.script);
  _renderRefPills();
  loadVideoPreview(entry.url);
  document.getElementById("videoMeta").textContent = entry.title || entry.url;
  _renderDataset();
}

function deleteRow(id) {
  _dataset = _dataset.filter((e) => e.id !== id);
  if (_activeRowId === id) {
    _activeRowId = null;
    setTranscript("");
    _currentReferences = [];
    _renderRefPills();
    document.getElementById("videoMeta").textContent = "";
    document.getElementById("videoContainer").innerHTML = `
      <div class="video-placeholder">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2">
          <rect x="2" y="3" width="20" height="14" rx="2"/>
          <path d="M8 21h8M12 17v4"/>
        </svg>
        <p>Chọn một video từ dataset để xem</p>
      </div>`;
  }
  _saveDataset();
  _renderDataset();
}

function clearDataset() {
  if (!_dataset.length) return;
  if (!confirm(`Xoá tất cả ${_dataset.length} video khỏi dataset?`)) return;
  _dataset = [];
  _activeRowId = null;
  _saveDataset();
  _renderDataset();
}

function _renderDataset() {
  const tbody = document.getElementById("datasetBody");
  const count = document.getElementById("datasetCount");

  const verified = _dataset.filter((e) => (e.status || "none") === "verified").length;
  count.textContent = _dataset.length
    ? `${_dataset.length} video · ${verified} verified`
    : "";

  if (_dataset.length === 0) {
    tbody.innerHTML =
      '<tr><td colspan="7" class="empty-state">Import file JSON hoặc CSV để bắt đầu labeling.</td></tr>';
    _renderPagination(0);
    return;
  }

  const totalPages = Math.ceil(_dataset.length / PAGE_SIZE);
  if (_currentPage > totalPages) _currentPage = totalPages;

  const start = (_currentPage - 1) * PAGE_SIZE;
  const pageItems = _dataset.slice(start, start + PAGE_SIZE);

  tbody.innerHTML = pageItems
    .map((e, i) => {
      const refs = e.references || [];
      const refText =
        refs.length === 0
          ? "—"
          : refs.length === 1
            ? refs[0]
            : `${refs[0]} +${refs.length - 1}`;
      const refTitle = refs.join(" | ");
      const st = e.status || "none";
      const statusBadge = `<span class="status-badge status-${st}">${st}</span>`;
      return `
    <tr data-id="${e.id}" class="${e.id === _activeRowId ? "active" : ""}" onclick="selectRow('${e.id}')">
      <td class="td-num">${start + i + 1}</td>
      <td class="td-title" title="${_esc(e.title)}">${_esc(e.title)}</td>
      <td class="td-script" title="${_esc(e.script)}">${_esc(e.script)}</td>
      <td class="td-refs" title="${_esc(refTitle)}">${_esc(refText)}</td>
      <td style="max-width:100px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">
        <a href="${_esc(e.url)}" target="_blank" style="color:#3b82f6;font-size:11px;" onclick="event.stopPropagation()">link</a>
      </td>
      <td>${statusBadge}</td>
      <td class="td-actions">
        <button onclick="event.stopPropagation();deleteRow('${e.id}')" title="Xoá">✕</button>
      </td>
    </tr>`;
    })
    .join("");

  _renderPagination(totalPages);
}

function _renderPagination(totalPages) {
  const bar = document.getElementById("paginationBar");
  if (!bar) return;
  if (totalPages <= 1) {
    bar.innerHTML = "";
    return;
  }

  const prev = _currentPage > 1;
  const next = _currentPage < totalPages;

  const pages = [];
  const delta = 3;
  for (let p = 1; p <= totalPages; p++) {
    if (
      p === 1 ||
      p === totalPages ||
      (p >= _currentPage - delta && p <= _currentPage + delta)
    ) {
      pages.push(p);
    }
  }

  let html = `<button class="pg-btn" ${prev ? "" : "disabled"} onclick="gotoPage(${_currentPage - 1})"><i class="ri-arrow-left-s-line"></i></button>`;
  let last = 0;
  for (const p of pages) {
    if (last && p - last > 1) html += `<span class="pg-ellipsis">…</span>`;
    html += `<button class="pg-btn ${p === _currentPage ? "pg-active" : ""}" onclick="gotoPage(${p})">${p}</button>`;
    last = p;
  }
  html += `<button class="pg-btn" ${next ? "" : "disabled"} onclick="gotoPage(${_currentPage + 1})"><i class="ri-arrow-right-s-line"></i></button>`;
  bar.innerHTML = html;
}

function gotoPage(p) {
  _currentPage = p;
  _renderDataset();
}

// ── Import / Export ───────────────────────────────────────────────────────────
function exportJSON() {
  if (!_dataset.length) return;
  const blob = new Blob([JSON.stringify(_dataset, null, 2)], {
    type: "application/json;charset=utf-8",
  });
  const a = document.createElement("a");
  a.href = URL.createObjectURL(blob);
  a.download = `labeled_${new Date().toISOString().slice(0, 10)}.json`;
  a.click();
  URL.revokeObjectURL(a.href);
}

function importJSON(event) {
  const file = event.target.files[0];
  if (!file) return;
  const reader = new FileReader();
  reader.onload = (e) => {
    try {
      const imported = JSON.parse(e.target.result);
      if (!Array.isArray(imported))
        throw new Error("Không phải mảng JSON hợp lệ");

      let added = 0;
      for (const entry of imported) {
        if (!entry.url) continue;
        if (_dataset.find((d) => d.url === entry.url)) continue;
        _dataset.push({
          id: entry.id || (Date.now().toString(36) + Math.random().toString(36).slice(2, 6)),
          title: entry.title || entry.url,
          url: entry.url,
          script: entry.script || "",
          references: Array.isArray(entry.references) ? entry.references : [],
          status: ["none", "extracted", "verified"].includes(entry.status)
            ? entry.status
            : entry.script
              ? "extracted"
              : "none",
        });
        added++;
      }
      _currentPage = 1;
      _saveDataset();
      _renderDataset();
      alert(`Import thành công: +${added} video mới (bỏ qua ${imported.length - added} trùng URL).`);
    } catch (err) {
      alert(`Import thất bại: ${err.message}`);
    }
    event.target.value = "";
  };
  reader.readAsText(file, "utf-8");
}

function importCSV(event) {
  const file = event.target.files[0];
  if (!file) return;
  const reader = new FileReader();
  reader.onload = (e) => {
    try {
      const rows = _parseCSV(e.target.result);
      if (rows.length < 2) throw new Error("File CSV không có dữ liệu");

      const header = rows[0].map((h) => h.trim().toLowerCase());
      const col = (name) => header.indexOf(name);
      const iTitle = col("title"),
        iUrl = col("url"),
        iScript = col("script"),
        iRefs = col("references"),
        iStatus = col("status");

      if (iUrl === -1) throw new Error('Không tìm thấy cột "url" trong CSV');

      let added = 0;
      for (let i = 1; i < rows.length; i++) {
        const row = rows[i];
        const url = (row[iUrl] || "").trim();
        if (!url) continue;
        if (_dataset.find((d) => d.url === url)) continue;
        const refsRaw = iRefs !== -1 ? row[iRefs] || "" : "";
        const references = refsRaw
          ? refsRaw.split(";").map((r) => r.trim()).filter(Boolean)
          : [];
        const scriptVal = iScript !== -1 ? row[iScript] || "" : "";
        const statusVal =
          iStatus !== -1 && ["none", "extracted", "verified"].includes(row[iStatus])
            ? row[iStatus]
            : scriptVal
              ? "extracted"
              : "none";
        _dataset.push({
          id: Date.now().toString(36) + Math.random().toString(36).slice(2, 6) + i,
          title: iTitle !== -1 ? row[iTitle] || url : url,
          url,
          script: scriptVal,
          references,
          status: statusVal,
        });
        added++;
      }
      _currentPage = 1;
      _saveDataset();
      _renderDataset();
      alert(`Import CSV thành công: +${added} video mới (bỏ qua ${rows.length - 1 - added} trùng URL).`);
    } catch (err) {
      alert(`Import CSV thất bại: ${err.message}`);
    }
    event.target.value = "";
  };
  reader.readAsText(file, "utf-8");
}

function exportCSV() {
  if (!_dataset.length) return;
  const header = ["title", "url", "script", "references", "status"];
  const rows = _dataset.map((e) =>
    [e.title, e.url, e.script, (e.references || []).join("; "), e.status || "none"]
      .map(_csvCell)
      .join(","),
  );
  const csv = [header.join(","), ...rows].join("\n");
  const blob = new Blob(["\uFEFF" + csv], { type: "text/csv;charset=utf-8" });
  const a = document.createElement("a");
  a.href = URL.createObjectURL(blob);
  a.download = `labeled_${new Date().toISOString().slice(0, 10)}.csv`;
  a.click();
  URL.revokeObjectURL(a.href);
}

function _parseCSV(text) {
  if (text.charCodeAt(0) === 0xfeff) text = text.slice(1);
  const rows = [];
  let row = [], field = "", inQuotes = false, i = 0;
  while (i < text.length) {
    const ch = text[i];
    if (inQuotes) {
      if (ch === '"' && text[i + 1] === '"') { field += '"'; i += 2; continue; }
      if (ch === '"') { inQuotes = false; i++; continue; }
      field += ch;
    } else {
      if (ch === '"') { inQuotes = true; i++; continue; }
      if (ch === ",") { row.push(field); field = ""; i++; continue; }
      if (ch === "\n" || (ch === "\r" && text[i + 1] === "\n")) {
        row.push(field); field = "";
        if (row.some((c) => c !== "")) rows.push(row);
        row = [];
        i += ch === "\r" ? 2 : 1;
        continue;
      }
      field += ch;
    }
    i++;
  }
  if (field || row.length) { row.push(field); if (row.some((c) => c !== "")) rows.push(row); }
  return rows;
}

function _csvCell(val) {
  const s = String(val ?? "").replace(/"/g, '""');
  return `"${s}"`;
}

function _esc(s) {
  return String(s ?? "")
    .replace(/&/g, "&amp;")
    .replace(/</g, "&lt;")
    .replace(/>/g, "&gt;")
    .replace(/"/g, "&quot;");
}