{% extends "base.html" %}
{% set active = "home" %}

{% block title %}Beranda{% endblock %}
{% block page_title %}Beranda{% endblock %}

{% block extra_head %}
<style>
  /* ================================================================
     DESIGN TOKENS — Notion meets Linea
     Ultra-minimal, editorial precision, line-based UI
  ================================================================ */
  :root {
    --line:    1px solid var(--border2);
    --mono:    'DM Mono', monospace;
    --h-ease:  cubic-bezier(.16,1,.3,1);
    --r-sm:    6px;
    --r:       10px;
  }

  /* ================================================================
     GREETING
  ================================================================ */
  .greeting {
    padding-bottom: 28px;
    margin-bottom: 32px;
    border-bottom: var(--line);
  }
  .greeting-eye {
    font-family: var(--mono);
    font-size: .62rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted2);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .greeting-eye::before {
    content: '';
    width: 18px;
    height: 1px;
    background: var(--muted2);
  }
  .greeting h2 {
    font-family: 'Sora', sans-serif;
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: -.045em;
    color: var(--text);
    line-height: 1.15;
  }
  .greeting-sub {
    font-size: .85rem;
    color: var(--muted);
    margin-top: 6px;
    line-height: 1.5;
  }

  /* ================================================================
     STATS — 4-cell strip, hairline dividers
  ================================================================ */
  .stats-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: var(--surface);
    border: var(--line);
    border-radius: var(--r);
    overflow: hidden;
    margin-bottom: 36px;
  }
  .stat-cell {
    padding: 20px 22px 22px;
    border-right: var(--line);
    position: relative;
  }
  .stat-cell:last-child { border-right: none; }
  .stat-cell-lbl {
    font-family: var(--mono);
    font-size: .6rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--muted2);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 7px;
  }
  .stat-pip {
    width: 5px; height: 5px;
    border-radius: 50%;
    flex-shrink: 0;
  }
  .stat-pip.blue  { background: var(--accent); }
  .stat-pip.green { background: var(--success); }
  .stat-pip.amber { background: var(--gold); }
  .stat-pip.red   { background: var(--danger); }

  .stat-num {
    font-family: 'Sora', sans-serif;
    font-size: 2.6rem;
    font-weight: 800;
    letter-spacing: -.055em;
    color: var(--text);
    line-height: 1;
  }
  .stat-num.loading {
    font-family: var(--mono);
    font-size: 1.1rem;
    font-weight: 400;
    color: var(--muted2);
    letter-spacing: 0;
  }

  /* ================================================================
     SECTION LABEL — monospace rule
  ================================================================ */
  .s-label {
    font-family: var(--mono);
    font-size: .6rem;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--muted2);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .s-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border2);
  }

  /* ================================================================
     QUICK ACTIONS — linear list, not cards
  ================================================================ */
  .actions-list {
    background: var(--surface);
    border: var(--line);
    border-radius: var(--r);
    overflow: hidden;
    margin-bottom: 36px;
  }
  .action-entry {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 15px 18px;
    border-bottom: var(--line);
    text-decoration: none;
    color: var(--text);
    transition: background .1s;
    cursor: pointer;
  }
  .action-entry:last-child { border-bottom: none; }
  .action-entry:hover { background: var(--surface2); }
  .action-entry:hover .action-arr { opacity: 1; transform: translateX(0); }
  .action-entry:hover .action-glyph { border-color: var(--accent); }

  .action-glyph {
    width: 34px; height: 34px;
    border-radius: var(--r-sm);
    border: var(--line);
    background: var(--bg);
    display: flex; align-items: center; justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
    transition: border-color .12s;
  }
  .action-body { flex: 1; min-width: 0; }
  .action-title {
    font-family: 'Sora', sans-serif;
    font-size: .84rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -.01em;
  }
  .action-desc {
    font-size: .75rem;
    color: var(--muted);
    margin-top: 2px;
    line-height: 1.45;
  }
  .action-chip {
    font-family: var(--mono);
    font-size: .57rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    padding: 3px 8px;
    border-radius: 4px;
    border: var(--line);
    color: var(--muted);
    flex-shrink: 0;
    white-space: nowrap;
  }
  .action-chip.pro {
    border-color: rgba(196,125,0,.35);
    color: var(--gold);
    background: var(--gold-bg);
  }
  .action-arr {
    color: var(--muted2);
    opacity: 0;
    transform: translateX(-5px);
    transition: all .18s var(--h-ease);
    flex-shrink: 0;
  }

  /* ================================================================
     HOME GRID
  ================================================================ */
  .home-grid {
    display: grid;
    grid-template-columns: 1fr 272px;
    gap: 14px;
    align-items: start;
  }

  /* ================================================================
     TASK PANEL
  ================================================================ */
  .task-panel {
    background: var(--surface);
    border: var(--line);
    border-radius: var(--r);
    overflow: hidden;
  }
  .task-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 18px;
    border-bottom: var(--line);
  }
  .task-panel-left {
    display: flex;
    align-items: center;
    gap: 9px;
  }
  .task-panel-title {
    font-family: 'Sora', sans-serif;
    font-size: .82rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -.01em;
  }
  .task-count-tag {
    font-family: var(--mono);
    font-size: .6rem;
    padding: 2px 7px;
    border-radius: 4px;
    background: var(--surface2);
    border: var(--line);
    color: var(--muted2);
    letter-spacing: .04em;
  }
  .refresh-btn {
    width: 26px; height: 26px;
    border-radius: 5px;
    border: var(--line);
    background: none;
    color: var(--muted);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all .12s;
  }
  .refresh-btn:hover { background: var(--surface2); color: var(--text); border-color: var(--border); }

  /* ── JS-generated task rows — restyled ── */
  .task-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 18px;
    border-bottom: var(--line);
    transition: background .1s;
  }
  .task-row:last-child { border-bottom: none; }
  .task-row:hover { background: var(--surface2); }

  /* Linear-style indicator instead of thick bar */
  .task-status-line {
    width: 7px; height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
    align-self: center;
  }
  .task-status-line.completed  { background: var(--success); }
  .task-status-line.pending    { background: var(--gold); }
  .task-status-line.processing {
    background: var(--accent);
    animation: blink-dot 1.6s ease-in-out infinite;
  }
  .task-status-line.failed { background: var(--danger); }
  @keyframes blink-dot {
    0%,100% { opacity: 1; }
    50%      { opacity: .3; }
  }

  .task-info { flex: 1; min-width: 0; }
  .task-name {
    font-size: .82rem;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -.01em;
    margin-bottom: 3px;
  }
  .task-meta {
    font-family: var(--mono);
    font-size: .62rem;
    color: var(--muted2);
    letter-spacing: .02em;
  }
  .task-actions {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  /* Status badge — text only, monospace */
  .badge-status {
    font-family: var(--mono);
    font-size: .58rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    padding: 4px 8px;
    border-radius: 4px;
    border: var(--line);
    background: none;
    white-space: nowrap;
  }
  .badge-status.completed  { color: var(--success); border-color: rgba(26,122,58,.25); background: rgba(26,122,58,.07); }
  .badge-status.pending    { color: var(--gold);    border-color: rgba(196,125,0,.25); background: var(--gold-bg); }
  .badge-status.processing { color: var(--accent);  border-color: rgba(26,92,255,.2);  background: var(--accent-bg); }
  .badge-status.failed     { color: var(--danger);  border-color: rgba(204,42,34,.25); background: rgba(204,42,34,.07); }
  [data-theme="dark"] .badge-status.completed  { background: rgba(63,185,80,.1); }
  [data-theme="dark"] .badge-status.failed     { background: rgba(248,81,73,.1); }

  /* BA badge */
  .badge-ba {
    font-family: var(--mono);
    font-size: .58rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: 4px 9px;
    border-radius: 4px;
    border: 1px solid rgba(196,125,0,.28);
    background: var(--gold-bg);
    color: var(--gold);
    text-decoration: none;
    white-space: nowrap;
    transition: opacity .12s;
  }
  .badge-ba:hover { opacity: .72; }

  /* Act buttons — all inline actions */
  .act-btn {
    font-family: var(--mono);
    font-size: .58rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: 4px 9px;
    border-radius: 4px;
    border: var(--line);
    background: none;
    color: var(--muted);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all .12s;
    line-height: 1.4;
  }
  .act-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-bg);
  }
  .act-btn.primary {
    background: var(--text);
    border-color: var(--text);
    color: var(--surface);
  }
  .act-btn.primary:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
  }

  /* Empty state */
  .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 52px 20px;
    gap: 8px;
  }
  .empty-ico {
    font-size: 1.4rem;
    opacity: .22;
    margin-bottom: 4px;
  }
  .empty-state p {
    font-size: .8rem;
    color: var(--muted);
    text-align: center;
    line-height: 1.65;
  }
  .empty-state a { color: var(--accent); text-decoration: none; font-weight: 600; }

  /* Pagination */
  .pag-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    padding: 12px 18px;
    border-top: var(--line);
  }
  .page-btn {
    font-family: var(--mono);
    font-size: .6rem;
    letter-spacing: .04em;
    padding: 5px 10px;
    border-radius: 5px;
    border: var(--line);
    background: none;
    color: var(--muted);
    cursor: pointer;
    transition: all .12s;
  }
  .page-btn:hover:not(.active) { border-color: var(--accent); color: var(--accent); }
  .page-btn.active {
    background: var(--text);
    border-color: var(--text);
    color: var(--surface);
  }
  [data-theme="dark"] .page-btn.active { color: var(--bg); }

  /* ================================================================
     INFO BLOCK — Notion property style
  ================================================================ */
  .info-block {
    background: var(--surface);
    border: var(--line);
    border-radius: var(--r);
    overflow: hidden;
  }
  .info-block-head {
    padding: 13px 18px;
    border-bottom: var(--line);
    font-family: 'Sora', sans-serif;
    font-size: .8rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -.01em;
  }
  .info-prop {
    display: flex;
    align-items: center;
    padding: 10px 18px;
    border-bottom: var(--line);
    gap: 12px;
    min-height: 40px;
  }
  .info-prop:last-child { border-bottom: none; }
  .info-prop-key {
    font-family: var(--mono);
    font-size: .6rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--muted2);
    width: 68px;
    flex-shrink: 0;
  }
  .info-prop-val {
    font-size: .82rem;
    font-weight: 500;
    color: var(--text);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .role-chip {
    font-family: var(--mono);
    font-size: .58rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    padding: 3px 9px;
    border-radius: 4px;
  }
  .role-chip.admin { background: var(--gold-bg); color: var(--gold); border: 1px solid rgba(196,125,0,.25); }
  .role-chip.user  { background: var(--accent-bg); color: var(--accent); border: 1px solid rgba(26,92,255,.18); }

  /* ================================================================
     MODAL — clean, borderline
  ================================================================ */
  .modal-backdrop {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0,0,0,.42);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 200;
    align-items: center;
    justify-content: center;
    padding: 24px;
  }
  .modal-backdrop.show { display: flex; }
  .modal-box {
    background: var(--surface);
    border: var(--line);
    border-radius: 12px;
    width: 100%;
    max-width: 660px;
    max-height: 82vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 56px rgba(0,0,0,.12);
    animation: modal-slide .2s var(--h-ease);
  }
  [data-theme="dark"] .modal-box { box-shadow: 0 20px 56px rgba(0,0,0,.52); }
  @keyframes modal-slide {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 18px 22px 16px;
    border-bottom: var(--line);
    flex-shrink: 0;
    gap: 16px;
  }
  .modal-head-title {
    font-family: 'Sora', sans-serif;
    font-size: .9rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -.015em;
  }
  .modal-head-sub {
    font-family: var(--mono);
    font-size: .62rem;
    color: var(--muted2);
    margin-top: 4px;
    letter-spacing: .03em;
  }
  .modal-close-btn {
    width: 26px; height: 26px;
    border-radius: 5px;
    border: var(--line);
    background: none;
    color: var(--muted);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: .75rem;
    transition: all .12s;
    flex-shrink: 0;
  }
  .modal-close-btn:hover { background: var(--surface2); color: var(--text); }
  .modal-body-wrap {
    flex: 1;
    overflow-y: auto;
    padding: 18px 22px;
  }
  .modal-textarea {
    width: 100%;
    background: var(--bg);
    border: var(--line);
    color: var(--text);
    padding: 14px 16px;
    border-radius: 8px;
    font-family: var(--mono);
    font-size: .78rem;
    line-height: 1.95;
    resize: none;
    min-height: 260px;
    outline: none;
    transition: border-color .12s;
  }
  .modal-textarea:focus { border-color: var(--accent); }
  .modal-foot {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 14px 22px 18px;
    border-top: var(--line);
    flex-wrap: wrap;
    flex-shrink: 0;
  }
  .modal-foot-spacer { flex: 1; }

  /* ================================================================
     RESPONSIVE
  ================================================================ */
  @media (max-width: 960px) {
    .home-grid { grid-template-columns: 1fr; }
    .stats-strip { grid-template-columns: repeat(2, 1fr); }
    .stat-cell:nth-child(2) { border-right: none; }
    .stat-cell:nth-child(3),
    .stat-cell:nth-child(4) { border-top: var(--line); }
    .stat-cell:nth-child(4) { border-right: none; }
  }
  @media (max-width: 560px) {
    .stats-strip { grid-template-columns: repeat(2, 1fr); }
    .stat-num { font-size: 2rem; }
    .greeting h2 { font-size: 1.45rem; }
    .task-row { flex-wrap: wrap; }
    .task-actions { width: 100%; justify-content: flex-start; padding-left: 17px; flex-wrap: wrap; }
    .modal-foot { flex-direction: column; align-items: stretch; }
    .modal-foot .act-btn { justify-content: center; }
    .modal-foot-spacer { display: none; }
    #modal-ba-actions { width: 100%; }
    #modal-ba-actions .act-btn { justify-content: center; width: 100%; }
    .modal-body-wrap { padding: 14px 16px; }
    .modal-head { padding: 14px 16px 12px; }
    .modal-foot { padding: 12px 16px 16px; }
  }
</style>
{% endblock %}

{% block content %}

<!-- ── Greeting ── -->
<div class="greeting">
  <div class="greeting-eye">Ringkasan aktivitas</div>
  <h2>Halo, {{ user.full_name or user.username }} 👋</h2>
  <p class="greeting-sub">Berikut ringkasan transkripsi Anda hari ini.</p>
</div>

<!-- ── Stats ── -->
<div class="stats-strip">
  <div class="stat-cell">
    <div class="stat-cell-lbl">
      <span class="stat-pip blue"></span>
      Total Task
    </div>
    <div class="stat-num loading" id="stat-total">—</div>
  </div>
  <div class="stat-cell">
    <div class="stat-cell-lbl">
      <span class="stat-pip green"></span>
      Selesai
    </div>
    <div class="stat-num loading" id="stat-done">—</div>
  </div>
  <div class="stat-cell">
    <div class="stat-cell-lbl">
      <span class="stat-pip amber"></span>
      Dalam Antrian
    </div>
    <div class="stat-num loading" id="stat-pending">—</div>
  </div>
  <div class="stat-cell">
    <div class="stat-cell-lbl">
      <span class="stat-pip red"></span>
      Gagal
    </div>
    <div class="stat-num loading" id="stat-failed">—</div>
  </div>
</div>

<!-- ── Quick Actions ── -->
<div class="s-label">Mulai Transkripsi</div>
<div class="actions-list">
  <a href="/transkripsi/file" class="action-entry">
    <div class="action-glyph">📁</div>
    <div class="action-body">
      <div class="action-title">Upload File</div>
      <div class="action-desc">Transkripsi dari file audio MP3, WAV, M4A, dan lainnya.</div>
    </div>
    <svg class="action-arr" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
      <path d="M5 12h14M12 5l7 7-7 7"/>
    </svg>
  </a>
  <a href="/transkripsi/rekam" class="action-entry">
    <div class="action-glyph">🎙️</div>
    <div class="action-body">
      <div class="action-title">Rekam Audio</div>
      <div class="action-desc">Rekam dan transkripsi langsung dari browser secara real-time.</div>
    </div>
    <svg class="action-arr" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
      <path d="M5 12h14M12 5l7 7-7 7"/>
    </svg>
  </a>
  <a href="/sidang" class="action-entry">
    <div class="action-glyph">⚖️</div>
    <div class="action-body">
      <div class="action-title">Mode Sidang</div>
      <div class="action-desc">Transkripsi dengan normalisasi label speaker persidangan Indonesia.</div>
    </div>
    <span class="action-chip pro">Pro</span>
    <svg class="action-arr" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
      <path d="M5 12h14M12 5l7 7-7 7"/>
    </svg>
  </a>
</div>

<!-- ── Main Grid ── -->
<div class="home-grid">

  <!-- Task Panel -->
  <div class="task-panel">
    <div class="task-panel-head">
      <div class="task-panel-left">
        <span class="task-panel-title">Riwayat Transkripsi</span>
        <span class="task-count-tag" id="task-count">—</span>
      </div>
      <button class="refresh-btn" onclick="loadTasks(currentPage)" title="Refresh">
        <svg width="11" height="11" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
          <path d="M23 4v6h-6M1 20v-6h6M3.51 9a9 9 0 0114.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0020.49 15"/>
        </svg>
      </button>
    </div>

    <div id="task-list">
      <div class="empty-state"><p>Memuat data…</p></div>
    </div>

    <div id="pagination-container" class="pag-bar" style="display:none"></div>
  </div>

  <!-- Info Block -->
  <div class="info-block">
    <div class="info-block-head">Info Akun</div>
    <div class="info-prop">
      <span class="info-prop-key">Username</span>
      <span class="info-prop-val">{{ user.username }}</span>
    </div>
    <div class="info-prop">
      <span class="info-prop-key">Nama</span>
      <span class="info-prop-val">{{ user.full_name or '—' }}</span>
    </div>
    <div class="info-prop">
      <span class="info-prop-key">Role</span>
      <span class="info-prop-val">
        <span class="role-chip {{ user.role }}">{{ user.role }}</span>
      </span>
    </div>
    <div class="info-prop">
      <span class="info-prop-key">Email</span>
      <span class="info-prop-val" style="font-size:.74rem;color:var(--muted)">{{ user.email or '—' }}</span>
    </div>
  </div>

</div>

<!-- ── Modal hasil transkripsi ── -->
<div class="modal-backdrop" id="modal-result">
  <div class="modal-box">
    <div class="modal-head">
      <div>
        <div class="modal-head-title" id="modal-result-title">Hasil Transkripsi</div>
        <div class="modal-head-sub" id="modal-result-meta"></div>
      </div>
      <button class="modal-close-btn" onclick="closeResultModal()">✕</button>
    </div>
    <div class="modal-body-wrap">
      <textarea class="modal-textarea" id="modal-result-text" readonly></textarea>
    </div>
    <div class="modal-foot">
      <button class="act-btn" id="copy-modal-btn">
        <svg width="10" height="10" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
          <rect x="9" y="9" width="13" height="13" rx="2"/>
          <path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/>
        </svg>
        Salin
      </button>
      <button class="act-btn" id="download-modal-btn">
        <svg width="10" height="10" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
          <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M7 10l5 5 5-5M12 15V3"/>
        </svg>
        Unduh TXT
      </button>
      <div id="modal-ba-actions" style="display:flex;gap:6px;"></div>
      <div class="modal-foot-spacer"></div>
      <a href="#" id="modal-detail-link" class="act-btn primary">Detail →</a>
    </div>
  </div>
</div>

{% endblock %}

{% block scripts %}
<script>
  // ============================================================
  // SAFETY: Tutup paksa modal dan overlay saat halaman dimuat
  // ============================================================
  (function() {
    // Tutup modal jika terbuka
    const modal = document.getElementById('modal-result');
    if (modal) modal.classList.remove('show');
    // Tutup overlay sidebar (jika ada)
    const overlay = document.getElementById('overlay');
    if (overlay) overlay.classList.remove('show');
    // Tutup sidebar mobile (jika terbuka)
    const sidebar = document.getElementById('sidebar');
    if (sidebar) sidebar.classList.remove('open');
  })();

  const STATUS_LABEL = {
    pending: 'Menunggu', processing: 'Diproses',
    completed: 'Selesai', failed: 'Gagal'
  };

  let currentModalTaskId = null;
  let currentModalText   = '';
  let currentPage = 1;
  let totalPages  = 1;
  let currentTasks = [];

  /* ── Stats ── */
  async function loadStats() {
    {% if user.role == 'admin' %}
    try {
      const r = await fetch('/api/admin/stats');
      if (r.ok) {
        const d = await r.json();
        setNum('stat-total',   d.tasks.total);
        setNum('stat-done',    d.tasks.completed);
        setNum('stat-pending', d.tasks.pending);
        setNum('stat-failed',  d.tasks.failed);
        return;
      }
    } catch {}
    {% endif %}
    try {
      const r = await fetch('/api/tasks?limit=100&offset=0');
      if (!r.ok) return;
      const d = await r.json();
      const tasks = d.tasks || [];
      const done    = tasks.filter(t => t.status === 'completed').length;
      const pending = tasks.filter(t => ['pending','processing'].includes(t.status)).length;
      const failed  = tasks.filter(t => t.status === 'failed').length;
      setNum('stat-total',   d.total || tasks.length);
      setNum('stat-done',    done);
      setNum('stat-pending', pending);
      setNum('stat-failed',  failed);
    } catch {}
  }

  function setNum(id, val) {
    const el = document.getElementById(id);
    if (!el) return;
    el.textContent = val;
    el.classList.remove('loading');
  }

  /* ── BA check ── */
  async function hasBeritaAcara(taskId) {
    try {
      const r = await fetch(`/api/berita-acara/by-task/${taskId}`);
      if (!r.ok) return null;
      const d = await r.json();
      return (d.items && d.items.length > 0) ? d.items[0] : null;
    } catch { return null; }
  }

  /* ── Task list ── */
  async function loadTasks(page = 1) {
    currentPage = page;
    const limit  = 10;
    const offset = (page - 1) * limit;
    const el = document.getElementById('task-list');
    el.innerHTML = '<div class="empty-state"><p>Memuat data…</p></div>';

    try {
      const r = await fetch(`/api/tasks?limit=${limit}&offset=${offset}`);
      if (!r.ok) throw new Error('Gagal');
      const d = await r.json();
      const tasks = d.tasks || [];
      const total = d.total || tasks.length;
      totalPages = Math.ceil(total / limit);

      const cEl = document.getElementById('task-count');
      if (cEl) cEl.textContent = total;

      if (tasks.length === 0 && page === 1) {
        el.innerHTML = `
          <div class="empty-state">
            <div class="empty-ico">📋</div>
            <p>Belum ada task transkripsi.<br><a href="/transkripsi/file">Mulai sekarang →</a></p>
          </div>`;
        document.getElementById('pagination-container').style.display = 'none';
        return;
      }

      const tasksWithBA = await Promise.all(tasks.map(async t => {
        const ba = (t.status === 'completed') ? await hasBeritaAcara(t.task_id) : null;
        return { ...t, ba };
      }));
      currentTasks = tasksWithBA;

      el.innerHTML = tasksWithBA.map(t => {
        const tid = t.task_id;
        const isCompleted = t.status === 'completed';
        let baHtml = '';
        if (isCompleted) {
          if (t.ba) {
            baHtml = `<a href="/berita-acara/${t.ba.id}?task_id=${tid}" class="badge-ba">📋 BA #${t.ba.id}</a>`;
          } else {
            baHtml = `<button class="act-btn" onclick="createBA(${tid})">📝 Buat BA</button>`;
          }
        }
        const dateStr = t.created_at
          ? new Date(t.created_at).toLocaleString('id-ID', { day:'2-digit', month:'short', hour:'2-digit', minute:'2-digit' })
          : '';
        return `
          <div class="task-row">
            <div class="task-status-line ${t.status}"></div>
            <div class="task-info">
              <div class="task-name">Task #${tid} — ${t.model_type}</div>
              <div class="task-meta">${t.engine}${dateStr ? ' · ' + dateStr : ''}</div>
            </div>
            <div class="task-actions">
              <span class="badge-status ${t.status}">${STATUS_LABEL[t.status] || t.status}</span>
              ${baHtml}
              <button class="act-btn" onclick="showResult(${tid})">📄 Hasil</button>
              <a href="/transkripsi/status/${tid}" class="act-btn primary">Detail →</a>
            </div>
          </div>`;
      }).join('');

      const pagEl = document.getElementById('pagination-container');
      if (totalPages > 1) {
        pagEl.style.display = 'flex';
        let html = '';
        for (let i = 1; i <= totalPages; i++) {
          html += `<button class="page-btn ${i === page ? 'active' : ''}" onclick="loadTasks(${i})">${i}</button>`;
        }
        pagEl.innerHTML = html;
      } else {
        pagEl.style.display = 'none';
      }
    } catch {
      el.innerHTML = `<div class="empty-state"><p style="color:var(--danger)">Gagal memuat data.</p></div>`;
    }
  }

  /* ── Buat BA ── */
  async function createBA(taskId) {
    try {
      const r = await fetch('/api/berita-acara', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ task_id: taskId })
      });
      if (!r.ok) throw new Error('Gagal membuat BA');
      const d = await r.json();
      showToast('Berita Acara sedang diproses...', 'success');
      setTimeout(() => {
        window.location.href = `/berita-acara/${d.ba_id}?task_id=${taskId}`;
      }, 1500);
    } catch(e) { alert('Gagal: ' + e.message); }
  }

  /* ── Modal hasil ── */
  async function showResult(taskId) {
    currentModalTaskId = taskId;
    const modal = document.getElementById('modal-result');
    document.getElementById('modal-result-title').textContent = `Hasil Transkripsi — Task #${taskId}`;
    document.getElementById('modal-result-text').value = 'Memuat...';
    document.getElementById('modal-result-meta').textContent = '';
    document.getElementById('modal-detail-link').href = `/transkripsi/status/${taskId}`;
    document.getElementById('modal-ba-actions').innerHTML = '';
    modal.classList.add('show');

    try {
      const [resTask, resBA] = await Promise.all([
        fetch(`/api/status/${taskId}`),
        fetch(`/api/berita-acara/by-task/${taskId}`)
      ]);
      if (!resTask.ok) throw new Error('Gagal');
      const dTask = await resTask.json();
      const txt = dTask.result || '';
      currentModalText = txt;
      document.getElementById('modal-result-text').value = txt || '(Hasil kosong)';

      const wc = txt.trim() ? txt.trim().split(/\s+/).filter(Boolean).length : 0;
      const parts = [
        `${txt.length.toLocaleString()} karakter`,
        `${wc.toLocaleString()} kata`,
        dTask.processing_time ? `${dTask.processing_time.toFixed(1)}s` : '',
        dTask.is_court_mode ? '⚖️ Sidang' : ''
      ].filter(Boolean);
      document.getElementById('modal-result-meta').textContent = parts.join(' · ');

      const baEl = document.getElementById('modal-ba-actions');
      if (dTask.status === 'completed') {
        if (resBA.ok) {
          const baData = await resBA.json();
          if (baData.items && baData.items.length > 0) {
            const ba = baData.items[0];
            baEl.innerHTML = `<a href="/berita-acara/${ba.id}?task_id=${taskId}" class="act-btn">📋 Lihat Berita Acara</a>`;
          } else {
            baEl.innerHTML = `<button class="act-btn" onclick="createBA(${taskId})">📝 Buat Berita Acara</button>`;
          }
        } else {
          baEl.innerHTML = `<button class="act-btn" onclick="createBA(${taskId})">📝 Buat Berita Acara</button>`;
        }
      }
    } catch (err) {
      console.error(err);
      document.getElementById('modal-result-text').value = 'Gagal memuat hasil transkripsi.';
      // Jangan biarkan modal terbuka jika gagal total? Biarkan saja agar user bisa menutup manual.
    }
  }

  function closeResultModal() {
    const modal = document.getElementById('modal-result');
    if (modal) modal.classList.remove('show');
    currentModalTaskId = null;
    currentModalText   = '';
  }

  // Perbaikan: copyModalResult sekarang menggunakan event listener, bukan onclick dengan event undefined
  function copyModalResult() {
    if (!currentModalText) {
      showToast('Tidak ada teks untuk disalin', 'danger');
      return;
    }
    navigator.clipboard.writeText(currentModalText).then(() => {
      showToast('Teks disalin ke clipboard', 'success');
    }).catch(() => {
      showToast('Gagal menyalin teks', 'danger');
    });
  }

  function downloadModalResult() {
    if (!currentModalText) {
      showToast('Tidak ada teks untuk diunduh', 'danger');
      return;
    }
    const blob = new Blob([currentModalText], { type: 'text/plain' });
    const url  = URL.createObjectURL(blob);
    const a    = document.createElement('a');
    a.href = url;
    a.download = `transkripsi-task-${currentModalTaskId}.txt`;
    a.click();
    URL.revokeObjectURL(url);
    showToast('File berhasil diunduh', 'success');
  }

  function showToast(msg, type) {
    const t = document.createElement('div');
    t.textContent = msg;
    Object.assign(t.style, {
      position:'fixed', bottom:'24px', right:'24px',
      background: type === 'success' ? 'var(--success)' : 'var(--danger)',
      color:'#fff', padding:'10px 16px',
      borderRadius:'6px', zIndex:'9999',
      fontFamily: 'var(--mono, monospace)',
      fontSize:'.72rem', letterSpacing:'.04em',
      boxShadow:'0 6px 20px rgba(0,0,0,.16)'
    });
    document.body.appendChild(t);
    setTimeout(() => t.remove(), 3000);
  }

  // Event listener untuk modal backdrop (tutup jika klik di luar)
  document.getElementById('modal-result').addEventListener('click', function(e) {
    if (e.target === this) closeResultModal();
  });

  // Pasang event listener untuk tombol copy dan download (karena onclick di HTML diubah)
  document.getElementById('copy-modal-btn')?.addEventListener('click', copyModalResult);
  document.getElementById('download-modal-btn')?.addEventListener('click', downloadModalResult);

  // Jalankan load data
  loadStats();
  loadTasks(1);
</script>
{% endblock %}