{% extends "base.html" %}
{% block title %}Kết nối điện thoại{% endblock %}
{% block page_subtitle %}Kết nối điện thoại{% endblock %}
{% block content %}
<div class="max-w-3xl mx-auto px-3 sm:px-4 py-4 space-y-4">
  <div class="ios-card p-5 space-y-2">
    <div class="font-extrabold text-gray-800">📱 Kết nối điện thoại với đúng cửa hàng</div>
    <div class="text-sm text-gray-600">
      Cửa hàng: <b>{{ dt.ten }}</b> · Mã tiệm <b>{{ dt.ma_tiem }}</b> · Mã máy chủ <b>{{ dt.may_chu_id }}</b>
    </div>
    <div class="text-xs text-gray-500">
      Điện thoại chỉ vào được qua mạng riêng <b>Tailscale</b> (không mở ra Internet). Quét mã QR bên dưới
      một lần: điện thoại tự nhớ đúng cửa hàng này. Sau đó vẫn phải đăng nhập tài khoản VangPOS của mình.
      Mã QR không chứa mật khẩu hay khóa nào.
    </div>
  </div>

  <div class="ios-card p-5 space-y-2">
    <div class="font-bold text-gray-800 text-sm">1. Địa chỉ Tailscale của máy chủ này</div>
    <div id="kn-ts" class="text-xs text-gray-600" style="white-space:pre-wrap">Đang đọc Tailscale…</div>
    <div class="flex gap-2 flex-wrap">
      <input id="kn-dia-chi" class="input-ios-sm flex-1" style="min-width:240px" value="{{ dt.dia_chi }}"
             placeholder="https://ten-may.tailxxxx.ts.net">
      <button onclick="knLuu()" class="btn-ios px-4 py-2 text-sm font-bold">💾 Lưu địa chỉ</button>
    </div>
  </div>

  <div class="ios-card p-5 space-y-2 text-center">
    <div class="font-bold text-gray-800 text-sm text-left">2. Mã QR cho điện thoại</div>
    <div id="kn-qr" class="inline-block p-2 bg-white"></div>
    <div id="kn-link" class="text-xs break-all text-gray-600"></div>
    <div id="kn-msg" class="text-sm"></div>
  </div>
</div>
{% endblock %}
{% block scripts %}
<script src="/static/vendor/qrcode-1.0.0.min.js"></script>
<script>
const _DT = {{ dt | tojson }};
function knVeQR(diaChi) {
  const box = document.getElementById('kn-qr');
  box.innerHTML = '';
  const link = document.getElementById('kn-link');
  if (!diaChi) { link.textContent = 'Lưu địa chỉ Tailscale trước để tạo mã QR.'; return; }
  const url = diaChi + '/gan-cua-hang#d=' + VPGhim.maHoaThamSo(Object.assign({}, _DT, { dia_chi: diaChi }));
  new QRCode(box, { text: url, width: 220, height: 220 });
  link.textContent = url;
}
async function knDocTs() {
  const el = document.getElementById('kn-ts');
  try {
    const d = await (await fetch('/api/cua-hang/dia-chi')).json();
    const t = d.tailscale || {};
    if (!t.co_tailscale) { el.textContent = '⚠️ Máy chủ chưa cài hoặc chưa chạy Tailscale. Xem hướng dẫn quản trị.'; }
    else {
      el.textContent = 'Tên máy Tailscale: ' + (t.ten_may || '?') + (t.dang_bat ? ' (đang bật)' : ' (CHƯA bật)')
        + '\nTailscale Serve chuyển tới cổng 5001 nội bộ: '
        + (t.serve_tro_5001 === true ? 'ĐÃ CẤU HÌNH' : (t.serve_tro_5001 === false ? 'CHƯA — xem hướng dẫn' : 'không đọc được'))
        + (t.dia_chi_goi_y ? '\nĐịa chỉ gợi ý: ' + t.dia_chi_goi_y : '');
      const o = document.getElementById('kn-dia-chi');
      if (!o.value && t.dia_chi_goi_y) o.value = t.dia_chi_goi_y;
    }
  } catch (e) { el.textContent = '⚠️ Không đọc được trạng thái Tailscale.'; }
}
function knLuu() {
  const dia_chi = document.getElementById('kn-dia-chi').value.trim();
  askPin('Nhập PIN quản lý để LƯU ĐỊA CHỈ KẾT NỐI', async (pin) => {
    if (!pin) return;
    const r = await fetch('/api/cua-hang/dia-chi', { method: 'POST',
      headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ pin, dia_chi }) });
    const d = await r.json();
    const m = document.getElementById('kn-msg');
    if (d.success) { m.textContent = '✅ Đã lưu.'; knVeQR(d.danh_tinh.dia_chi); }
    else { m.textContent = '❌ ' + (d.error === 'wrong_pin' ? 'PIN sai.' : (d.message || d.error)); }
  });
}
knDocTs();
knVeQR(_DT.dia_chi);
</script>
{% endblock %}