{% from "_icons.html" import icon %}
{% extends "base.html" %}
{% block title %}{{ brand.ten_app }}{% endblock %}
{% block page_subtitle %}<span id="clock"></span>{% endblock %}

{% block fab_extra_items %}
<button id="fab-history-btn" onclick="openHistory(); closeFab()"
  class="hidden w-full flex items-center gap-3 px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-50 transition text-left">
  <span class="fab-ic">{{ icon('clock', 16) }}</span><span class="font-medium">Lịch sử cập nhật giá</span>
</button>
<button id="fab-admin-btn" onclick="toggleAdmin(); closeFab()"
  class="hidden w-full flex items-center gap-3 px-4 py-2.5 text-sm hover:bg-amber-50 transition text-left border-t border-gray-50">
  <span id="fab-admin-ic" class="fab-ic">{{ icon('lock-closed', 16) }}</span>
  <span id="fab-admin-lbl" class="font-semibold text-amber-700">Chế độ quản lý</span>
</button>
<div class="border-t border-gray-100"></div>
{% endblock %}

{% block extra_style %}
  /* Bảng giá trên ĐIỆN THOẠI: đệm px-4 ×5 cột làm bảng rộng 467px > màn 390px →
     cột "Thay đổi" bị đẩy ra ngoài, phải kéo ngang mới thấy. Siết đệm cho vừa
     màn hình (chỉ ≤640px, máy tính giữ nguyên). */
  @media (max-width: 640px) {
    #price-table th, #price-table td { padding-left: 6px !important; padding-right: 6px !important; }
    #price-table th:first-child, #price-table td:first-child { padding-left: 10px !important; }
    #price-table th:last-child,  #price-table td:last-child  { padding-right: 10px !important; }
    #price-table { min-width: 0 !important; }
  }
  .badge-up   { background:#dcfce7; color:#15803d; border:1px solid #86efac; }
  .badge-down { background:#fee2e2; color:#b91c1c; border:1px solid #fca5a5; }
  .badge-neu  { background:#f3f4f6; color:#6b7280; border:1px solid #e5e7eb; }
  .spin { animation: spin 1s linear infinite; display:inline-block; }
  @keyframes spin { to { transform: rotate(360deg); } }
  @keyframes shake { 0%,100%{transform:translateX(0)} 20%,60%{transform:translateX(-6px)} 40%,80%{transform:translateX(6px)} }
  .shake { animation: shake .4s ease; }
  #inp-card { transition: all .3s ease; }
  .admin-only { display: none; }
  body.is-admin span.admin-only { display: inline; }
  body.is-admin td.admin-only,
  body.is-admin th.admin-only { display: table-cell; }
{% endblock %}

{% block content %}

  <!-- ── INPUT CARD (ẩn mặc định, chỉ hiện khi có PIN) ── -->
  <div id="inp-card" class="hidden ios-card p-5" style="border:1.5px solid #fde68a">
    <div class="flex justify-between items-center mb-4">
      <h2 class="text-base font-bold text-gray-700 flex items-center gap-1.5">{{ icon('pencil', 18) }} Cập nhật giá</h2>
      <span class="text-xs text-amber-600 font-semibold bg-amber-50 px-2.5 py-1 rounded-full inline-flex items-center gap-1">{{ icon('lock-open', 14) }} Chế độ quản lý</span>
    </div>
    <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
      <div>
        <label class="block text-xs font-semibold text-gray-500 uppercase tracking-wide mb-1.5">
          Giá tính ra <span class="text-gray-400 font-normal">(nghìn đ/chỉ)</span>
        </label>
        <input id="inp-gia-ra" type="number" placeholder="VD: 15010" inputmode="numeric"
          class="input-ios w-full text-xl font-bold">
      </div>
      <div>
        <label class="block text-xs font-semibold text-gray-500 uppercase tracking-wide mb-1.5">
          Hệ số chênh Trơn
        </label>
        <input id="inp-chenh" type="number" value="250" inputmode="numeric"
          class="input-ios w-full text-xl font-bold">
      </div>
    </div>
    <div class="mt-4 flex items-center gap-3 flex-wrap">
      <button id="btn-update" onclick="doUpdate()"
        class="btn-ios btn-ios-gold px-6 py-3 inline-flex items-center justify-center gap-1.5">
        {{ icon('switch', 18) }} Cập nhật giá
      </button>
      <a href="/quan-ly-loai-vang"
        class="btn-ios btn-ios-secondary text-amber-800 text-sm px-4 py-2.5 inline-flex items-center justify-center gap-1.5">
        {{ icon('danh-sach', 18) }} Loại vàng &amp; màn hình TV
      </a>
      <button onclick="logout()"
        class="btn-ios btn-ios-secondary text-gray-500 text-sm px-4 py-2.5 inline-flex items-center justify-center gap-1.5">
        {{ icon('lock-closed', 16) }} Thoát quản lý
      </button>
      <span id="update-msg" class="text-sm text-gray-500"></span>
    </div>
  </div>

  <!-- ── META BAR ── -->
  <div id="meta-bar" class="hidden bg-amber-50 rounded-2xl px-4 py-2.5 text-sm text-amber-900 flex flex-wrap gap-x-5 gap-y-1 shadow-sm">
  </div>

  <!-- ── PRICE TABLE ── -->
  <div class="ios-card overflow-hidden">
    <div class="px-5 py-3.5 flex justify-between items-center" style="background:linear-gradient(135deg,#fff7ed,#fffbeb)">
      <span class="font-extrabold text-gray-800 flex items-center gap-1.5">{{ icon('price', 18) }} Bảng giá vàng</span>
      <span class="text-xs text-gray-400 font-medium">Đơn vị: nghìn đồng / chỉ</span>
    </div>
    <div class="overflow-x-auto">
      <table id="price-table" class="w-full text-sm">
        <thead>
          <tr class="text-gray-400 text-[11px] uppercase tracking-wider">
            <th class="text-left px-4 py-2.5">Loại vàng</th>
            <th class="text-right px-4 py-2.5">Mua vào</th>
            <th class="text-right px-4 py-2.5">Bán ra</th>
            <th class="text-right px-4 py-2.5 admin-only">Giá hồi</th>
            <th class="text-right px-4 py-2.5">Thay đổi</th>
          </tr>
        </thead>
        <tbody id="price-tbody">
          <tr>
            <td colspan="5" class="text-center py-12 text-gray-300 text-base">
              Chưa có dữ liệu
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

  <!-- ── HISTORY MODAL ── -->
  <div id="history-modal" class="hidden fixed inset-0 bg-black/50 ios-backdrop z-50 flex items-center justify-center p-4"
       onclick="if(event.target===this)closeHistory()">
    <div class="bg-white rounded-[26px] w-full max-w-xl max-h-[80vh] flex flex-col shadow-2xl overflow-hidden">
      <div class="px-5 py-4 border-b flex justify-between items-center bg-amber-50/60">
        <h2 class="font-bold text-gray-800 flex items-center gap-1.5">{{ icon('clock', 18) }} Lịch sử cập nhật giá</h2>
        <button onclick="closeHistory()" class="text-gray-400 hover:text-gray-600 text-2xl leading-none">&times;</button>
      </div>
      <div class="overflow-y-auto overflow-x-auto flex-1">
        <table class="w-full text-sm">
          <thead class="sticky top-0 bg-gray-50">
            <tr class="text-gray-400 text-xs uppercase">
              <th class="text-left px-3 py-3">Thời gian</th>
              <th class="text-right px-3 py-3 admin-only">Giá tính ra</th>
              <th class="text-right px-3 py-3 admin-only">Giá tính vào</th>
              <th class="text-right px-3 py-3 admin-only">Biên độ</th>
            </tr>
          </thead>
          <tbody id="history-tbody"></tbody>
        </table>
      </div>
    </div>
  </div>

{% endblock %}

{% block scripts %}
<script>
const fmt = n => Number(n).toLocaleString('vi-VN');
const ICON_LOCK_CLOSED = {{ icon('lock-closed', 18) | tojson }};
const ICON_LOCK_OPEN   = {{ icon('lock-open', 18) | tojson }};

// ── Clock ──
function tick() {
  document.getElementById('clock').textContent =
    new Date().toLocaleString('vi-VN', {weekday:'short',day:'2-digit',month:'2-digit',year:'numeric',hour:'2-digit',minute:'2-digit',second:'2-digit'});
}
tick(); setInterval(tick, 1000);

// ── Auth: chỉ GĐ / PGĐ mới thấy chế độ quản lý ──
let _isAdmin = false;

async function initAuth() {
  try {
    const res = await fetch('/api/auth/me');
    const u   = await res.json();
    _isAdmin  = u.logged_in && (u.role === 'giam_doc' || u.role === 'pho_giam_doc');
  } catch(e) { _isAdmin = false; }
  updateAdminUI();
}

function updateAdminUI() {
  document.getElementById('inp-card').classList.toggle('hidden', !_isAdmin);
  document.body.classList.toggle('is-admin', _isAdmin);
  document.getElementById('fab-admin-btn').classList.toggle('hidden', !_isAdmin);
  document.getElementById('fab-history-btn').classList.toggle('hidden', !_isAdmin);
  const ic  = document.getElementById('fab-admin-ic');
  const lbl = document.getElementById('fab-admin-lbl');
  if (ic)  ic.innerHTML = _isAdmin ? ICON_LOCK_OPEN : ICON_LOCK_CLOSED;
  if (lbl) { lbl.textContent = 'Thoát quản lý'; lbl.className = 'font-semibold text-red-500'; }
}

function toggleAdmin() {
  if (_isAdmin) logout();
}

function logout() {
  window.location.href = '/dang-xuat';
}

// ── Helpers ──
function changeBadge(d, pct) {
  if (d === 0) return '<span class="badge-neu text-xs px-2 py-0.5 rounded-full font-medium">—</span>';
  const cls  = d > 0 ? 'badge-up' : 'badge-down';
  const arr  = d > 0 ? '▲' : '▼';
  const sign = d > 0 ? '+' : '';
  const p    = pct ? ` ${sign}${pct}%` : '';
  return `<span class="${cls} text-xs px-2 py-0.5 rounded-full font-semibold whitespace-nowrap">${arr} ${sign}${fmt(d)}${p}</span>`;
}

// ── Render table ──
function renderTable(prices, meta, chiBang) {
  if (meta) {
    const bar = document.getElementById('meta-bar');
    bar.classList.remove('hidden');
    bar.innerHTML =
      `<span>📅 <strong>${meta.updated_at}</strong></span>` +
      `<span class="admin-only">Giá tính ra: <strong>${fmt(meta.gia_ra)}k</strong></span>` +
      `<span class="admin-only">Giá tính vào: <strong>${fmt(meta.gia_vao)}k</strong></span>` +
      `<span class="admin-only">Biên độ: <strong>${meta.bien_do}</strong></span>`;
    if (!chiBang) {   // tự làm mới từ máy khác: KHÔNG đè số đang gõ dở trong ô nhập
      document.getElementById('inp-gia-ra').value  = meta.gia_ra;
      document.getElementById('inp-chenh').value   = meta.chenh_tron;
    }
    // 25/08/2026: bỏ ô "Biên độ chiến lược" khỏi màn cập nhật giá (chủ tiệm chốt "gọn giao
    // diện, giữ nguyên số cũ") — nhưng công thức tính giá NHIỀU loại vàng (700/680/650/610/
    // 17K/14K...) vẫn CẦN biến này, nên giữ NGUYÊN giá trị đang dùng qua biến ngầm, không
    // cho sửa qua UI nào nữa (trang /cong-thuc cũng chỉ HIỆN con số này, không sửa được).
    // Đổi biên độ sau này (hiếm khi cần) phải nhờ Claude mở lại ô nhập hoặc sửa thẳng DB.
    window._bienDoHienTai = meta.bien_do;
  }
  const separators = new Set(['750', '700', '17K', '10K', 'Platin']);
  // Danh mục loại vàng: ẩn loại chủ tiệm đã ẩn, sắp theo thứ tự hiển thị, hiện tên hiển thị.
  const hien = prices.filter(p => p.hien !== false)
                     .sort((a, b) => (a.thu_tu ?? 0) - (b.thu_tu ?? 0));
  document.getElementById('price-tbody').innerHTML = hien.map((p, i) => {
    const sep = i > 0 && separators.has(p.loai) ? '<tr class="h-1 bg-gray-100"><td colspan="5"></td></tr>' : '';
    const row = `<tr class="border-b border-gray-50 hover:bg-amber-50 transition">
      <td class="px-4 py-3 font-bold text-gray-800 text-base" style="overflow-wrap:anywhere">${esc(p.ten || p.loai)}</td>
      <td class="px-4 py-3 text-right text-blue-600 font-semibold">${fmt(p.mua)}</td>
      <td class="px-4 py-3 text-right text-red-600 font-bold text-base">${fmt(p.ban)}</td>
      <td class="px-4 py-3 text-right text-gray-400 admin-only">${p.hoi > 0 ? fmt(p.hoi) : '—'}</td>
      <td class="px-4 py-3 text-right">${changeBadge(p.change_ban, p.pct_ban)}</td>
    </tr>`;
    return sep + row;
  }).join('') || '<tr><td colspan="5" class="text-center py-12 text-gray-300 text-base">Chưa có dữ liệu</td></tr>';
}
function esc(s) { const d = document.createElement('div'); d.textContent = s == null ? '' : String(s); return d.innerHTML; }

// Danh mục / giá đổi ở máy khác (thêm loại, đổi tên, ẩn, cập nhật giá) → bảng tự làm mới.
(function () {
  let moc = null;
  setInterval(async () => {
    if (document.visibilityState === 'hidden') return;
    try {
      const d = await (await fetch('/api/prices-ping', { cache: 'no-store' })).json();
      if (moc !== null && d.v !== moc) {
        const p = await (await fetch('/api/prices')).json();
        if (p.meta) renderTable(p.prices, p.meta, true);
      }
      moc = d.v;
    } catch (e) {}
  }, 3000);
})();

// ── Load on start ──
fetch('/api/prices').then(r => r.json()).then(d => {
  if (d.meta) renderTable(d.prices, d.meta);
});
initAuth();

// ── Update prices ──
async function doUpdate() {
  const gia_ra     = parseFloat(document.getElementById('inp-gia-ra').value);
  const chenh_tron = parseFloat(document.getElementById('inp-chenh').value) || 250;
  const bien_do    = window._bienDoHienTai || 2.8;
  if (!gia_ra || gia_ra < 1000) {
    document.getElementById('update-msg').innerHTML = '<span class="text-red-500">⚠ Vui lòng nhập Giá tính ra hợp lệ</span>';
    return;
  }
  const btn = document.getElementById('btn-update');
  const msg = document.getElementById('update-msg');
  btn.disabled = true;
  btn.innerHTML = '<span class="spin">⟳</span> Đang tính...';
  msg.textContent = '';
  try {
    const res  = await fetch('/api/update', {
      method: 'POST',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify({gia_ra, chenh_tron, bien_do})
    });
    const data = await res.json();
    if (!res.ok || !data.success) {
      if (res.status === 403) {
        _isAdmin = false; updateAdminUI();
        msg.innerHTML = '<span class="text-red-500">❌ Không có quyền — vui lòng đăng nhập lại</span>';
      } else {
        msg.innerHTML = '<span class="text-red-500">❌ ' + esc(data.message || 'Lỗi không xác định') + '</span>';
      }
      return;
    }
    renderTable(data.prices, data.meta);
    msg.innerHTML = `<span class="text-green-600 font-medium">✅ Đã cập nhật giá mới</span>`;
  } catch(e) {
    msg.innerHTML = '<span class="text-red-500">❌ Lỗi kết nối</span>';
  } finally {
    btn.disabled = false;
    btn.innerHTML = '🔄 Cập nhật giá';
  }
}

// Enter key in update form
document.addEventListener('keydown', e => {
  if (e.key === 'Enter' && _isAdmin && document.activeElement.closest('#inp-card')) doUpdate();
});

// ── History ──
async function openHistory() {
  if (!_isAdmin) return;
  const res  = await fetch('/api/history');
  if (res.status === 403) return;
  const data = await res.json();
  document.getElementById('history-tbody').innerHTML = data.history.map(h => `
    <tr class="border-b hover:bg-gray-50">
      <td class="px-3 py-2.5 text-gray-600">${h.updated_at}</td>
      <td class="px-3 py-2.5 text-right font-semibold admin-only">${fmt(h.gia_ra)}k</td>
      <td class="px-3 py-2.5 text-right admin-only">${fmt(h.gia_ra - h.chenh_tron)}k</td>
      <td class="px-3 py-2.5 text-right admin-only">${h.bien_do}</td>
    </tr>`).join('') || '<tr><td colspan="4" class="text-center py-8 text-gray-300">Chưa có lịch sử</td></tr>';
  document.getElementById('history-modal').classList.remove('hidden');
}
function closeHistory() {
  document.getElementById('history-modal').classList.add('hidden');
}
</script>
{% endblock %}