{% extends "base.html" %}
{% block title %}Studio Ảnh — {{ brand.ten_app }}{% endblock %}
{% block page_subtitle %}Studio Ảnh Trang Sức{% endblock %}

{% block content %}
<div class="max-w-3xl mx-auto space-y-4">

  <div class="ios-card p-4" style="background:linear-gradient(135deg,#fff7ed,#fffbeb)">
    <p class="text-xs text-amber-800/90 leading-relaxed">
      ✨ Ghép <b>ảnh sản phẩm đã tách nền</b> lên bối cảnh có sẵn, kèm khung tròn ảnh đeo thử (nếu có) —
      xử lý tại chỗ, không tốn phí, không cần internet cho phần ghép ảnh.
    </p>
  </div>

  <!-- ① THƯ VIỆN BỐI CẢNH -->
  <div class="ios-card p-4 space-y-3">
    <div class="flex items-center justify-between flex-wrap gap-2">
      <div class="font-extrabold text-gray-800">🖼️ Thư viện bối cảnh</div>
      <div class="flex items-center gap-2">
        <button onclick="bgSelectAll()" class="btn-ios btn-ios-secondary text-gray-600 text-xs font-bold px-3 py-1.5">Chọn tất cả</button>
        <button onclick="bgClearAll()" class="btn-ios btn-ios-secondary text-gray-600 text-xs font-bold px-3 py-1.5">Bỏ chọn</button>
      </div>
    </div>
    <div class="flex items-center gap-2 flex-wrap">
      <label class="text-sm text-gray-600">🎲 Chọn ngẫu nhiên
        <input id="rnd-n" type="number" min="1" value="3" class="input-ios-sm w-14 text-center mx-1">
        nền</label>
      <button onclick="bgPickRandom()" class="btn-ios btn-ios-secondary text-amber-700 text-xs font-bold px-3 py-1.5">Chọn ngẫu nhiên</button>
      <input type="file" id="bg-file" accept="image/*" class="hidden" onchange="onBgFilePicked(this)">
      <button onclick="document.getElementById('bg-file').click()" class="btn-ios btn-ios-gold text-xs font-bold px-3 py-1.5 ml-auto">➕ Thêm bối cảnh mới</button>
    </div>
    <div id="bg-grid" class="grid grid-cols-2 sm:grid-cols-3 gap-2.5"></div>
    <div id="bg-empty" class="hidden text-center text-gray-300 text-sm py-6">Chưa có bối cảnh nào — bấm "➕ Thêm bối cảnh mới" để tải ảnh nền lên.</div>
  </div>

  <!-- ② STYLE -->
  <div class="ios-card p-4 space-y-2">
    <div class="font-extrabold text-gray-800">🎨 Style (bố cục)</div>
    <select id="sel-style" class="input-ios w-full cursor-pointer">
      {% for key, s in styles.items() %}
      <option value="{{ key }}">{{ s.ten }}</option>
      {% endfor %}
    </select>
    <p class="text-xs text-gray-400">Style quyết định cỡ sản phẩm, độ đậm bóng đổ, màu viền khung đeo thử — có thể xin thêm style mới bất cứ lúc nào.</p>
  </div>

  <!-- ③ ẢNH SẢN PHẨM + ẢNH ĐEO THỬ -->
  <div class="ios-card p-4 space-y-3">
    <div class="font-extrabold text-gray-800">💎 Ảnh sản phẩm &amp; ảnh đeo thử</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 mb-1">Ảnh sản phẩm (đã tách nền) *</label>
        <input type="file" id="product-file" accept="image/png" class="hidden" onchange="onPreviewPicked(this,'product-preview')">
        <button type="button" onclick="document.getElementById('product-file').click()" class="btn-ios btn-ios-secondary text-emerald-700 text-sm font-bold px-3 py-2 w-full">📷 Chọn ảnh sản phẩm</button>
        <div class="mt-2 w-full h-32 rounded-xl border border-gray-100 bg-gray-50 overflow-hidden flex items-center justify-center">
          <img id="product-preview" class="hidden max-w-full max-h-full object-contain" style="transition:transform .1s,filter .1s">
        </div>
        <div id="product-adjust" class="hidden mt-2 space-y-1.5 p-2.5 rounded-xl bg-gray-50 border border-gray-100">
          <div class="flex items-center justify-between">
            <span class="text-[11px] font-bold text-gray-500 uppercase">🔧 Điều chỉnh ảnh SP</span>
            <button type="button" onclick="resetProductAdjust()" class="text-[11px] text-blue-600 font-semibold">↺ Về mặc định</button>
          </div>
          <label class="block text-xs text-gray-500">Cỡ: <span id="pa-scale-val" class="font-bold text-gray-700">100%</span>
            <input id="pa-scale" type="range" min="50" max="180" value="100" class="w-full" oninput="onProductAdjustInput()">
          </label>
          <label class="block text-xs text-gray-500">Góc nghiêng: <span id="pa-rot-val" class="font-bold text-gray-700">0°</span>
            <input id="pa-rot" type="range" min="-30" max="30" value="0" class="w-full" oninput="onProductAdjustInput()">
          </label>
          <label class="block text-xs text-gray-500">Độ sáng: <span id="pa-bright-val" class="font-bold text-gray-700">100%</span>
            <input id="pa-bright" type="range" min="50" max="150" value="100" class="w-full" oninput="onProductAdjustInput()">
          </label>
          <p class="text-[10px] text-gray-400">Xem trước ở trên là ước lượng — ảnh tạo ra (nút "✨ Tạo ảnh") mới là kết quả chính xác cuối cùng.</p>
        </div>
      </div>
      <div>
        <label class="block text-xs font-semibold text-gray-500 uppercase mb-1">Ảnh đeo thử (tùy chọn)</label>
        <input type="file" id="worn-file" accept="image/*" class="hidden" onchange="onPreviewPicked(this,'worn-preview')">
        <button type="button" onclick="document.getElementById('worn-file').click()" class="btn-ios btn-ios-secondary text-blue-700 text-sm font-bold px-3 py-2 w-full">📷 Chọn ảnh đeo thử</button>
        <img id="worn-preview" class="hidden mt-2 w-full h-32 object-contain rounded-xl border border-gray-100 bg-gray-50">
      </div>
    </div>
  </div>

  <button id="btn-generate" onclick="generateImages()" class="btn-ios btn-ios-gold w-full py-3 font-extrabold">✨ Tạo ảnh</button>
  <div id="gen-msg" class="text-sm text-center font-semibold" style="min-height:18px"></div>

  <!-- KẾT QUẢ -->
  <div id="result-box" class="ios-card p-4 space-y-3 hidden">
    <div class="font-extrabold text-emerald-700">✅ Kết quả</div>
    <div id="result-grid" class="grid grid-cols-2 sm:grid-cols-3 gap-2.5"></div>
  </div>

</div>
{% endblock %}

{% block scripts %}
<script>
let _allBgs = [];
let _selectedBg = new Set();

async function loadBackgrounds() {
  try {
    const d = await (await fetch('/api/studio-anh/backgrounds')).json();
    _allBgs = d.items || [];
  } catch (e) { _allBgs = []; }
  renderBgGrid();
}
function renderBgGrid() {
  const grid = document.getElementById('bg-grid');
  const empty = document.getElementById('bg-empty');
  if (!_allBgs.length) { grid.innerHTML = ''; empty.classList.remove('hidden'); return; }
  empty.classList.add('hidden');
  grid.innerHTML = _allBgs.map(b => {
    const checked = _selectedBg.has(b.id);
    return `<div class="relative rounded-xl overflow-hidden border-2 cursor-pointer" style="border-color:${checked ? '#d4af37' : '#e5e7eb'}" onclick="toggleBg(${b.id})">
      <img src="/static/${b.file_path}" class="w-full h-24 object-cover">
      <div class="absolute inset-x-0 bottom-0 px-1.5 py-1 text-[11px] text-white font-semibold truncate" style="background:linear-gradient(0deg,rgba(0,0,0,.55),transparent)">${b.ten}</div>
      <div class="absolute top-1 right-1 w-5 h-5 rounded-full flex items-center justify-center text-[11px] font-bold" style="background:${checked ? '#d4af37' : 'rgba(255,255,255,.85)'};color:${checked ? '#fff' : '#9ca3af'}">${checked ? '✓' : ''}</div>
      <button onclick="event.stopPropagation();deleteBackground(${b.id})" class="absolute top-1 left-1 w-5 h-5 rounded-full bg-black/40 text-white text-[10px] flex items-center justify-center">✕</button>
    </div>`;
  }).join('');
}
function toggleBg(id) {
  if (_selectedBg.has(id)) _selectedBg.delete(id); else _selectedBg.add(id);
  renderBgGrid();
}
function bgSelectAll() { _allBgs.forEach(b => _selectedBg.add(b.id)); renderBgGrid(); }
function bgClearAll() { _selectedBg.clear(); renderBgGrid(); }
function bgPickRandom() {
  const n = Math.max(1, parseInt(document.getElementById('rnd-n').value) || 1);
  const pool = [..._allBgs].sort(() => Math.random() - 0.5).slice(0, n);
  _selectedBg = new Set(pool.map(b => b.id));
  renderBgGrid();
}

function onBgFilePicked(input) {
  const file = input.files && input.files[0];
  input.value = '';
  if (!file) return;
  const ten = prompt('Đặt tên gợi nhớ cho bối cảnh này (VD: Lụa kem, Nhung đỏ...):', file.name.replace(/\.[a-z]+$/i, ''));
  if (ten === null) return;
  askPin('Thêm bối cảnh mới — nhập mã PIN:', pin => _doAddBackground(file, ten, pin));
}
async function _doAddBackground(file, ten, pin) {
  const fd = new FormData();
  fd.append('file', file); fd.append('ten', ten); fd.append('pin', pin);
  try {
    const d = await (await fetch('/api/studio-anh/backgrounds', { method: 'POST', body: fd })).json();
    if (!d.success) { alert('❌ ' + (d.error === 'wrong_pin' ? 'Sai PIN hoặc không đủ quyền.' : d.error)); return; }
    await loadBackgrounds();
  } catch (e) { alert('Lỗi mạng: ' + e); }
}
function deleteBackground(id) {
  if (!confirm('Xóa bối cảnh này khỏi thư viện?')) return;
  askPin('Xóa bối cảnh — nhập mã PIN:', async pin => {
    const d = await (await fetch('/api/studio-anh/backgrounds/' + id, { method: 'DELETE', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ pin }) })).json();
    if (!d.success) { alert('❌ ' + (d.error === 'wrong_pin' ? 'Sai PIN hoặc không đủ quyền.' : d.error)); return; }
    _selectedBg.delete(id);
    await loadBackgrounds();
  });
}

function onPreviewPicked(input, previewId) {
  const file = input.files && input.files[0];
  const img = document.getElementById(previewId);
  if (!file) {
    img.classList.add('hidden');
    if (previewId === 'product-preview') document.getElementById('product-adjust').classList.add('hidden');
    return;
  }
  const reader = new FileReader();
  reader.onload = e => { img.src = e.target.result; img.classList.remove('hidden'); };
  reader.readAsDataURL(file);
  if (previewId === 'product-preview') {
    document.getElementById('product-adjust').classList.remove('hidden');
    resetProductAdjust();
  }
}

// Chỉnh cỡ/góc nghiêng/độ sáng ảnh sản phẩm — xem trước bằng CSS transform (ước lượng,
// không tốn round-trip server), giá trị thật gửi kèm lúc "✨ Tạo ảnh" để Pillow xử lý chính xác.
function onProductAdjustInput() {
  const scale = parseInt(document.getElementById('pa-scale').value, 10);
  const rot = parseInt(document.getElementById('pa-rot').value, 10);
  const bright = parseInt(document.getElementById('pa-bright').value, 10);
  document.getElementById('pa-scale-val').textContent = scale + '%';
  document.getElementById('pa-rot-val').textContent = rot + '°';
  document.getElementById('pa-bright-val').textContent = bright + '%';
  const img = document.getElementById('product-preview');
  img.style.transform = `scale(${scale / 100}) rotate(${rot}deg)`;
  img.style.filter = `brightness(${bright / 100})`;
}
function resetProductAdjust() {
  document.getElementById('pa-scale').value = 100;
  document.getElementById('pa-rot').value = 0;
  document.getElementById('pa-bright').value = 100;
  onProductAdjustInput();
}

async function generateImages() {
  const msg = document.getElementById('gen-msg');
  const productFile = document.getElementById('product-file').files[0];
  const wornFile = document.getElementById('worn-file').files[0];
  if (!productFile) { msg.textContent = '⚠ Chưa chọn ảnh sản phẩm.'; msg.style.color = '#dc2626'; return; }
  if (!_selectedBg.size) { msg.textContent = '⚠ Chưa chọn bối cảnh nào (tối thiểu 1).'; msg.style.color = '#dc2626'; return; }

  const btn = document.getElementById('btn-generate');
  btn.disabled = true; btn.textContent = 'Đang tạo ảnh...';
  msg.textContent = ''; document.getElementById('result-box').classList.add('hidden');

  const fd = new FormData();
  fd.append('product_file', productFile);
  if (wornFile) fd.append('worn_file', wornFile);
  fd.append('style', document.getElementById('sel-style').value);
  fd.append('product_scale', (parseInt(document.getElementById('pa-scale').value, 10) / 100).toFixed(2));
  fd.append('product_rotation', document.getElementById('pa-rot').value);
  fd.append('product_brightness', (parseInt(document.getElementById('pa-bright').value, 10) / 100).toFixed(2));
  _selectedBg.forEach(id => fd.append('background_ids', id));

  try {
    const d = await (await fetch('/api/studio-anh/generate', { method: 'POST', body: fd })).json();
    if (!d.success) { msg.textContent = '❌ ' + (d.error || 'Lỗi không rõ.'); msg.style.color = '#dc2626'; return; }
    renderResults(d.items);
    msg.textContent = `✅ Đã tạo ${d.items.length} ảnh.`; msg.style.color = '#16a34a';
  } catch (e) {
    msg.textContent = '❌ Lỗi mạng: ' + e; msg.style.color = '#dc2626';
  } finally {
    btn.disabled = false; btn.textContent = '✨ Tạo ảnh';
  }
}
function renderResults(items) {
  const box = document.getElementById('result-box'), grid = document.getElementById('result-grid');
  grid.innerHTML = items.map(it => `<div class="rounded-xl overflow-hidden border border-gray-100">
    <img src="${it.url}" class="w-full h-40 object-cover">
    <div class="px-2 py-1.5 flex items-center justify-between gap-1">
      <span class="text-[11px] text-gray-400 truncate">${it.bg_ten}</span>
      <a href="${it.url}" download class="text-blue-600 text-xs font-bold flex-shrink-0">⬇ Tải</a>
    </div>
  </div>`).join('');
  box.classList.remove('hidden');
  box.scrollIntoView({ behavior: 'smooth' });
}

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