script.js

const PRODUCTS = [
  "C1012 Glacier White", "C1026 Polar", "C3269 Ash Grey", "C3168 Silver Wave", "C1005 Milky White",
  "C2103 Onyx Carrara", "C2104 Massa", "C3105 Casla Cloudy", "C3146 Casla Nova", "C2240 Marquin",
  "C2262 Concrete (Honed)", "C3311 Calacatta Sky", "C3346 Massimo", "C4143 Mario", "C4145 Marina",
  "C4202 Calacatta Gold", "C1205 Casla Everest", "C4211 Calacatta Supreme", "C4204 Calacatta Classic",
  "C1102 Super White", "C4246 Casla Mystery", "C4345 Oro", "C4346 Luxe", "C4342 Casla Eternal",
  "C4221 Athena", "C4255 Calacatta Extra"
];

function switchTab(tab) {
  document.querySelectorAll('.section').forEach(el => el.style.display = 'none');
  document.querySelectorAll('.tab-button').forEach(el => el.classList.remove('active'));
  document.getElementById(tab).style.display = 'block';
  document.querySelector(`button[onclick="switchTab('${tab}')"]`).classList.add('active');
  resetOutput();
}

function renderProducts(containerId) {
  const container = document.getElementById(containerId);
  PRODUCTS.forEach(product => {
    const button = document.createElement('button');
    button.type = 'button';
    button.className = 'product-button';
    button.textContent = product;
    button.onclick = () => button.classList.toggle('selected');
    container.appendChild(button);
  });
}

function resetOutput() {
  document.getElementById('loading').style.display = 'none';
  document.getElementById('error').style.display = 'none';
  document.getElementById('generated-image').style.display = 'none';
  document.getElementById('download-link').style.display = 'none';
}

async function generateText2Img(event) {
  event.preventDefault();
  const prompt = document.getElementById('prompt').value;
  const size = document.getElementById('size').value;
  const customSize = document.getElementById('custom-size').value;
  const selectedProducts = Array.from(document.querySelectorAll('#text2img-products .product-button.selected')).map(btn => btn.textContent);

  if (!prompt || !selectedProducts.length) {
    showError('Vui lòng nhập mô tả và chọn ít nhất một sản phẩm.');
    return;
  }

  showLoading(true);
  try {
    const response = await fetch('https://YOUR_USERNAME-caslaquartz-backend.hf.space/api/text2img', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        prompt,
        size,
        custom_size: size === 'Custom size' ? customSize : null,
        product_codes: selectedProducts
      })
    });
    const data = await response.json();
    if (data.error) throw new Error(data.error);
    showImage(data.image_url);
  } catch (err) {
    showError(err.message);
  } finally {
    showLoading(false);
  }
}

async function generateImg2Img(event) {
  event.preventDefault();
  const fileInput = document.getElementById('image-upload');
  const position = document.getElementById('position').value;
  const size = document.getElementById('size-img2img').value;
  const customSize = document.getElementById('custom-size-img2img').value;
  const selectedProducts = Array.from(document.querySelectorAll('#img2img-products .product-button.selected')).map(btn => btn.textContent);

  if (!fileInput.files[0] || !selectedProducts.length) {
    showError('Vui lòng tải ảnh và chọn ít nhất một sản phẩm.');
    return;
  }

  showLoading(true);
  const formData = new FormData();
  formData.append('file', fileInput.files[0]);
  formData.append('position', position);
  formData.append('size', size);
  if (size === 'Custom size') formData.append('custom_size', customSize);
  selectedProducts.forEach(code => formData.append('product_codes', code));

  try {
    const response = await fetch('https://YOUR_USERNAME-caslaquartz-backend.hf.space/api/img2img', {
      method: 'POST',
      body: formData
    });
    const data = await response.json();
    if (data.error) throw new Error(data.error);
    showImage(data.image_url);
  } catch (err) {
    showError(err.message);
  } finally {
    showLoading(false);
  }
}

function showLoading(show) {
  document.getElementById('loading').style.display = show ? 'block' : 'none';
}

function showError(message) {
  const error = document.getElementById('error');
  error.textContent = message;
  error.style.display = 'block';
  setTimeout(() => error.style.display = 'none', 5000);
}

function showImage(url) {
  const img = document.getElementById('generated-image');
  const link = document.getElementById('download-link');
  img.src = url;
  img.style.display = 'block';
  link.href = url;
  link.style.display = 'inline-block';
}

// Dropzone handlers
function dropHandler(event) {
  event.preventDefault();
  const file = event.dataTransfer.files[0];
  if (file) {
    document.getElementById('image-upload').files = event.dataTransfer.files;
    previewImage(file);
  }
}

function dragOverHandler(event) {
  event.preventDefault();
}

document.getElementById('image-upload').addEventListener('change', (e) => {
  if (e.target.files[0]) previewImage(e.target.files[0]);
});

function previewImage(file) {
  const preview = document.getElementById('preview-image');
  preview.src = URL.createObjectURL(file);
  preview.style.display = 'block';
}

// Khởi tạo
document.getElementById('size').addEventListener('change', (e) => {
  document.getElementById('custom-size').style.display = e.target.value === 'Custom size' ? 'block' : 'none';
});
document.getElementById('size-img2img').addEventListener('change', (e) => {
  document.getElementById('custom-size-img2img').style.display = e.target.value === 'Custom size' ? 'block' : 'none';
});
renderProducts('text2img-products');
renderProducts('img2img-products');