{% extends "base.html" %}
{% block title %}Yêu cầu của tôi{% endblock %}
{% block content %}
<div class="max-w-2xl mx-auto px-3 py-4">

  <div class="flex items-center gap-2 mb-4">
    <div class="w-10 h-10 rounded-xl flex items-center justify-center flex-shrink-0"
         style="background:linear-gradient(135deg,#4a0000,#8b0000)">
      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6M9 13h6M9 17h4"/></svg>
    </div>
    <div>
      <h1 class="font-bold text-lg text-gray-800">Yêu cầu của tôi</h1>
      <p class="text-xs text-gray-400">Trạng thái duyệt các yêu cầu sửa bạn đã gửi</p>
    </div>
  </div>

  <div id="req-list" class="flex flex-col gap-2.5">
    <div class="text-center text-gray-400 py-10 text-sm">Đang tải...</div>
  </div>
</div>

<!-- ── Popup kết quả ── -->
<div id="result-modal" class="hidden fixed inset-0 z-[200] flex items-center justify-center p-4" style="background:rgba(0,0,0,.55)" onclick="if(event.target===this)closeResult()">
  <div class="bg-white rounded-2xl shadow-2xl w-full max-w-sm overflow-hidden">
    <div id="result-body"></div>
  </div>
</div>

<script>
const LOAI_LABELS = {{ loai_labels | tojson }};
let _reqs = [];

function _statusBadge(tt) {
  if (tt === 'da_duyet') return '<span class="text-xs font-bold px-2.5 py-1 rounded-full" style="background:#d1fae5;color:#065f46">✅ Đã duyệt</span>';
  if (tt === 'tu_choi') return '<span class="text-xs font-bold px-2.5 py-1 rounded-full" style="background:#fee2e2;color:#991b1b">❌ Từ chối</span>';
  return '<span class="text-xs font-bold px-2.5 py-1 rounded-full" style="background:#fef3c7;color:#92400e">⏳ Chờ duyệt</span>';
}

function _renderReqList() {
  const box = document.getElementById('req-list');
  if (!_reqs.length) {
    box.innerHTML = '<div class="text-center text-gray-400 py-12 text-sm">Bạn chưa gửi yêu cầu sửa nào.</div>';
    return;
  }
  box.innerHTML = _reqs.map(c => `
    <div onclick="openResult(${c.id})" class="card p-3.5 cursor-pointer hover:shadow-md transition" style="border:1px solid #e5e7eb">
      <div class="flex items-center justify-between gap-2 mb-1">
        <span class="text-xs font-bold text-gray-500">${c.loai_label} ${c.ma_phieu || ''}</span>
        ${_statusBadge(c.trang_thai)}
      </div>
      <div class="text-sm text-gray-700">${c.mo_ta || 'Cập nhật thông tin'}</div>
      <div class="text-xs text-gray-400 mt-1">Gửi: ${c.ngay_gui || ''}${c.ngay_duyet ? ' · Xử lý: ' + c.ngay_duyet : ''}</div>
    </div>`).join('');
}

async function loadMyRequests() {
  try {
    const r = await fetch('/api/approval/my-requests');
    const d = await r.json();
    _reqs = d.requests || [];
    _renderReqList();
    // Ghi nhớ trạng thái hiện tại của từng yêu cầu — làm mốc để _pollMyRequests()
    // phát hiện thay đổi (không tính lần tải đầu tiên là "vừa thay đổi").
    _reqs.forEach(c => { _lastStatusMap[c.id] = c.trang_thai; });
    // Tự mở popup nếu có ?id=
    const params = new URLSearchParams(location.search);
    const id = parseInt(params.get('id'));
    if (id) openResult(id);
  } catch(e) {
    document.getElementById('req-list').innerHTML = '<div class="text-center text-red-500 py-10 text-sm">Lỗi tải dữ liệu.</div>';
  }
}

// ── Cập nhật trực tiếp + báo chuông ngay khi yêu cầu được duyệt/từ chối ──────
let _lastStatusMap = {};
async function _pollMyRequests() {
  try {
    const r = await fetch('/api/approval/my-requests', { cache: 'no-store' });
    const d = await r.json();
    const reqs = d.requests || [];
    let changed = null;
    reqs.forEach(c => {
      const prev = _lastStatusMap[c.id];
      if (prev === 'cho_duyet' && c.trang_thai !== 'cho_duyet') changed = c;
      _lastStatusMap[c.id] = c.trang_thai;
    });
    _reqs = reqs;
    _renderReqList();
    if (changed) {
      if (typeof playPushChime === 'function') playPushChime();
      openResult(changed.id);
    }
  } catch(e) {}
}
setInterval(_pollMyRequests, 4000);

function _changesTable(changes) {
  if (!changes || !changes.length) return '';
  return `<div style="border-top:1px solid #f1f5f9;margin-top:10px;padding-top:8px">
    <div class="text-[10px] uppercase font-semibold text-gray-400 mb-1">Nội dung đã sửa</div>
    ${changes.map(ch => `<div class="text-xs py-0.5"><span class="text-gray-500">${ch.label}:</span>
      <span class="text-red-600 line-through decoration-red-300">${ch.old}</span>
      <span class="text-gray-400">→</span> <span class="text-green-700 font-semibold">${ch.new}</span></div>`).join('')}
  </div>`;
}

function openResult(id) {
  const c = _reqs.find(x => x.id === id);
  if (!c) return;
  const approved = c.trang_thai === 'da_duyet';
  const rejected = c.trang_thai === 'tu_choi';
  const iconHtml = approved
    ? '<div style="width:64px;height:64px;border-radius:50%;background:#d1fae5;display:flex;align-items:center;justify-content:center;margin:0 auto"><svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="#059669" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg></div>'
    : rejected
    ? '<div style="width:64px;height:64px;border-radius:50%;background:#fee2e2;display:flex;align-items:center;justify-content:center;margin:0 auto"><svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#dc2626" stroke-width="3" stroke-linecap="round"><path d="M18 6 6 18M6 6l12 12"/></svg></div>'
    : '<div style="width:64px;height:64px;border-radius:50%;background:#fef3c7;display:flex;align-items:center;justify-content:center;margin:0 auto"><svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#d97706" stroke-width="2.5" stroke-linecap="round"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg></div>';
  const title = approved ? 'Yêu cầu đã được duyệt' : rejected ? 'Yêu cầu bị từ chối' : 'Đang chờ duyệt';

  let buttons = '';
  if (approved) {
    buttons = `<div class="flex gap-2 mt-4">
      ${c.phieu_print_url ? `<a href="${c.phieu_print_url}" target="_blank" class="btn-ios flex-1 text-center text-white font-bold py-2.5 rounded-xl" style="background:#059669">🖨️ In phiếu</a>` : ''}
      <a href="${c.yc_print_url}" target="_blank" class="btn-ios flex-1 text-center font-semibold py-2.5 rounded-xl" style="background:#f1f5f9;color:#475569;border:1px solid #e2e8f0">📄 In phiếu duyệt</a>
    </div>`;
  } else if (rejected) {
    buttons = `<div class="flex gap-2 mt-4">
      <a href="${c.yc_print_url}" target="_blank" class="btn-ios flex-1 text-center font-semibold py-2.5 rounded-xl" style="background:#f1f5f9;color:#475569;border:1px solid #e2e8f0">📄 In phiếu duyệt</a>
    </div>`;
  }

  document.getElementById('result-body').innerHTML = `
    <div style="padding:22px 20px 18px;text-align:center">
      <button onclick="closeResult()" style="position:absolute;top:14px;right:16px;background:none;border:none;color:#94a3b8;font-size:22px;cursor:pointer;line-height:1">×</button>
      ${iconHtml}
      <div class="font-bold text-lg text-gray-800 mt-3">${title}</div>
      <div class="text-xs text-gray-400 mt-1">${c.ngay_duyet || c.ngay_gui || ''}</div>
      <div style="border-top:1px solid #f1f5f9;margin-top:14px;padding-top:12px;text-align:left">
        <table style="width:100%;font-size:13px">
          <tr><td style="color:#94a3b8;padding:4px 0">Loại phiếu</td><td style="text-align:right;font-weight:600">${c.loai_label}</td></tr>
          <tr><td style="color:#94a3b8;padding:4px 0">Mã phiếu</td><td style="text-align:right;font-weight:600;font-family:monospace">${c.ma_phieu || '—'}</td></tr>
          ${c.nguoi_duyet ? `<tr><td style="color:#94a3b8;padding:4px 0">Người duyệt</td><td style="text-align:right;font-weight:600">${c.nguoi_duyet}</td></tr>` : ''}
        </table>
        ${_changesTable(c.changes)}
        ${rejected && c.ly_do_tu_choi ? `<div style="background:#fee2e2;border-radius:10px;padding:9px 11px;margin-top:10px"><div class="text-[11px] font-bold" style="color:#991b1b">Lý do từ chối</div><div class="text-xs" style="color:#991b1b">${c.ly_do_tu_choi}</div></div>` : ''}
      </div>
      ${buttons}
    </div>`;
  document.getElementById('result-modal').classList.remove('hidden');
}

function closeResult() {
  document.getElementById('result-modal').classList.add('hidden');
}

loadMyRequests();
</script>
{% endblock %}