script.js

/**
 * BatchRemove - Outil de Suppression de Fond
 * Propulsé par l'API Remove.bg
 */

// Configuration
const CONFIG = {
  API_KEY: "[ENCRYPTION_KEY]",
  API_URL: "https://api.remove.bg/v1.0/removebg",
  MAX_FILE_SIZE: 25 * 1024 * 1024, // 25Mo
  ALLOWED_TYPES: ["image/jpeg", "image/png", "image/webp"],
};

// État
let images = [];
let processedCount = 0;
let currentTheme = localStorage.getItem("theme") || "dark";

// Éléments DOM
const dropZone = document.getElementById("dropZone");
const fileInput = document.getElementById("fileInput");
const imagesGrid = document.getElementById("imagesGrid");
const controlsSection = document.getElementById("controlsSection");
const progressSection = document.getElementById("progressSection");
const downloadSection = document.getElementById("downloadSection");
const progressBar = document.getElementById("progressBar");
const progressText = document.getElementById("progressText");
const imageCount = document.getElementById("imageCount");
const totalSize = document.getElementById("totalSize");
const processBtn = document.getElementById("processBtn");
const clearBtn = document.getElementById("clearBtn");
const downloadAllBtn = document.getElementById("downloadAllBtn");

// Initialisation
document.addEventListener("DOMContentLoaded", init);

function init() {
  applyTheme(currentTheme);
  setupDragAndDrop();
  setupEventListeners();
  initMobileSidebar();
}

// Gestion du Thème
function applyTheme(theme) {
  if (theme === "dark") {
    document.documentElement.classList.add("dark");
  } else {
    document.documentElement.classList.remove("dark");
  }
  localStorage.setItem("theme", theme);
}

function toggleTheme() {
  currentTheme = currentTheme === "dark" ? "light" : "dark";
  applyTheme(currentTheme);
}

// Mobile Sidebar
function initMobileSidebar() {
  const menuBtn = document.getElementById("mobileMenuBtn");
  const sidebar = document.getElementById("mobileSidebar");
  const overlay = document.getElementById("sidebarOverlay");
  const closeBtn = document.getElementById("closeSidebar");

  if (!menuBtn || !sidebar || !overlay) return;

  const openSidebar = () => {
    sidebar.classList.add("open");
    sidebar.setAttribute("aria-hidden", "false");
    overlay.classList.add("visible");
    document.body.style.overflow = "hidden";
  };

  const closeSidebar = () => {
    sidebar.classList.remove("open");
    sidebar.setAttribute("aria-hidden", "true");
    overlay.classList.remove("visible");
    document.body.style.overflow = "";
  };

  menuBtn.addEventListener("click", openSidebar);
  overlay.addEventListener("click", closeSidebar);
  if (closeBtn) closeBtn.addEventListener("click", closeSidebar);

  document.addEventListener("keydown", (e) => {
    if (e.key === "Escape" && sidebar.classList.contains("open")) {
      closeSidebar();
    }
  });
}

// Configuration Glisser-Déposer
function setupDragAndDrop() {
  ["dragenter", "dragover", "dragleave", "drop"].forEach((eventName) => {
    dropZone.addEventListener(eventName, preventDefaults, false);
    document.body.addEventListener(eventName, preventDefaults, false);
  });

  ["dragenter", "dragover"].forEach((eventName) => {
    dropZone.addEventListener(
      eventName,
      () => dropZone.classList.add("drag-over"),
      false
    );
  });

  ["dragleave", "drop"].forEach((eventName) => {
    dropZone.addEventListener(
      eventName,
      () => dropZone.classList.remove("drag-over"),
      false
    );
  });

  dropZone.addEventListener("drop", handleDrop, false);
}

function preventDefaults(e) {
  e.preventDefault();
  e.stopPropagation();
}

function handleDrop(e) {
  const files = e.dataTransfer.files;
  handleFiles(files);
}

// Écouteurs d'événements
function setupEventListeners() {
  fileInput.addEventListener("change", (e) => handleFiles(e.target.files));
  processBtn.addEventListener("click", processAllImages);
  clearBtn.addEventListener("click", clearAllImages);
  downloadAllBtn.addEventListener("click", downloadAllProcessed);

  // Wire ALL theme toggles (desktop + mobile header)
  document.querySelectorAll(".theme-toggle").forEach((btn) => {
    btn.addEventListener("click", toggleTheme);
  });
}

// Gestion des fichiers
function handleFiles(files) {
  const validFiles = Array.from(files).filter((file) => {
    if (!CONFIG.ALLOWED_TYPES.includes(file.type)) {
      showToast(
        "Fichier invalide",
        `${file.name} n'est pas un format d'image supporté.`,
        "warning"
      );
      return false;
    }
    if (file.size > CONFIG.MAX_FILE_SIZE) {
      showToast(
        "Fichier trop volumineux",
        `${file.name} dépasse la limite de 25 Mo.`,
        "warning"
      );
      return false;
    }
    return true;
  });

  if (validFiles.length === 0) return;

  validFiles.forEach((file) => {
    const reader = new FileReader();
    reader.onload = (e) => {
      const imageData = {
        id: generateId(),
        file: file,
        name: file.name,
        size: file.size,
        dataUrl: e.target.result,
        status: "pending",
        processedUrl: null,
        processedWithBg: null,
        hasWhiteBg: false,
      };
      images.push(imageData);
      renderImageCard(imageData);
      updateControls();
    };
    reader.readAsDataURL(file);
  });

  // Réinitialiser l'input
  fileInput.value = "";
}

// Générer un ID unique
function generateId() {
  return "img_" + Math.random().toString(36).substr(2, 9);
}

// Afficher une carte d'image
function renderImageCard(imageData) {
  const card = document.createElement("div");
  card.className = "col-sm-6 col-md-4 col-lg-3";
  card.id = `card-${imageData.id}`;

  card.innerHTML = `
        <div class="image-card">
            <div class="image-preview">
                <img src="${imageData.dataUrl}" alt="${
    imageData.name
  }" id="preview-${imageData.id}">
                <span class="status-badge status-${
                  imageData.status
                }" id="status-${imageData.id}">
                    ${getStatusText(imageData.status)}
                </span>
                <div class="image-overlay">
                    <div class="d-flex gap-2">
                        <button class="action-btn bg-toggle" title="Fond blanc" onclick="toggleWhiteBackground('${
                          imageData.id
                        }')" id="bg-toggle-${
    imageData.id
  }" style="display: none;">
                            <i class="bi bi-circle-half"></i>
                        </button>
                        <button class="action-btn compare" title="Comparer avec l'original" onclick="toggleCompare('${
                          imageData.id
                        }')" id="compare-${
    imageData.id
  }" style="display: none;">
                            <i class="bi bi-arrows-angle-expand"></i>
                        </button>
                        <button class="action-btn download" title="Télécharger" onclick="downloadImage('${
                          imageData.id
                        }')" id="download-${
    imageData.id
  }" style="display: none;">
                            <i class="bi bi-download"></i>
                        </button>
                        <button class="action-btn remove" title="Supprimer" onclick="removeImage('${
                          imageData.id
                        }')">
                            <i class="bi bi-trash3"></i>
                        </button>
                    </div>
                </div>
            </div>
            <div class="image-info">
                <div class="image-name" title="${imageData.name}">${
    imageData.name
  }</div>
                <div class="image-size">${formatFileSize(imageData.size)}</div>
            </div>
        </div>
    `;

  imagesGrid.appendChild(card);
}

// Mettre à jour les contrôles
function updateControls() {
  if (images.length > 0) {
    controlsSection.style.display = "block";
    imageCount.textContent = `${images.length} image${
      images.length > 1 ? "s" : ""
    }`;
    totalSize.textContent = `Total : ${formatFileSize(
      images.reduce((acc, img) => acc + img.size, 0)
    )}`;
  } else {
    controlsSection.style.display = "none";
    downloadSection.style.display = "none";
  }

  const processedImages = images.filter((img) => img.status === "done");
  if (processedImages.length > 0) {
    downloadSection.style.display = "block";
  }
}

// Traiter toutes les images
async function processAllImages() {
  const pendingImages = images.filter(
    (img) => img.status === "pending" || img.status === "error"
  );

  if (pendingImages.length === 0) {
    showToast(
      "Rien à traiter",
      "Toutes les images ont déjà été traitées.",
      "info"
    );
    return;
  }

  processedCount = 0;
  progressSection.style.display = "block";
  processBtn.disabled = true;
  processBtn.innerHTML =
    '<i class="bi bi-hourglass-split me-1 spin"></i>Traitement...';

  for (const imageData of pendingImages) {
    updateStatus(imageData.id, "processing");

    try {
      const result = await removeBackground(imageData);
      imageData.processedUrl = result;
      imageData.status = "done";
      updateStatus(imageData.id, "done");
      updatePreviewImage(imageData.id, result);
      showActionButtons(imageData.id);
    } catch (error) {
      console.error("Erreur de traitement :", error);
      imageData.status = "error";
      updateStatus(imageData.id, "error");
      showToast(
        "Erreur de traitement",
        `Échec du traitement de ${imageData.name} : ${error.message}`,
        "danger"
      );
    }

    processedCount++;
    updateProgress(processedCount, pendingImages.length);
  }

  progressSection.style.display = "none";
  processBtn.disabled = false;
  processBtn.innerHTML = '<i class="bi bi-magic me-1"></i>Supprimer les fonds';
  updateControls();

  const successCount = images.filter((img) => img.status === "done").length;
  showToast(
    "Traitement terminé",
    `${successCount} image${successCount > 1 ? "s" : ""} traitée${
      successCount > 1 ? "s" : ""
    } avec succès.`,
    "success"
  );
}

// Appel API Remove Background
async function removeBackground(imageData) {
  const formData = new FormData();
  formData.append("image_file", imageData.file);
  formData.append("size", "auto");

  const response = await fetch(CONFIG.API_URL, {
    method: "POST",
    headers: {
      "X-Api-Key": CONFIG.API_KEY,
    },
    body: formData,
  });

  if (!response.ok) {
    const errorData = await response.json().catch(() => ({}));
    throw new Error(
      errorData.errors?.[0]?.title || `Erreur API : ${response.status}`
    );
  }

  const blob = await response.blob();
  return URL.createObjectURL(blob);
}

// Mettre à jour le badge de statut
function updateStatus(id, status) {
  const badge = document.getElementById(`status-${id}`);
  if (badge) {
    badge.className = `status-badge status-${status}`;
    badge.textContent = getStatusText(status);
  }
}

// Obtenir le texte du statut
function getStatusText(status) {
  const statusTexts = {
    pending: "En attente",
    processing: "Traitement",
    done: "Terminé",
    error: "Erreur",
  };
  return statusTexts[status] || status;
}

// Mettre à jour l'image de prévisualisation
function updatePreviewImage(id, url) {
  const preview = document.getElementById(`preview-${id}`);
  if (preview) {
    preview.src = url;
  }
}

// Afficher les boutons d'action
function showActionButtons(id) {
  const downloadBtn = document.getElementById(`download-${id}`);
  const compareBtn = document.getElementById(`compare-${id}`);
  const bgToggleBtn = document.getElementById(`bg-toggle-${id}`);
  if (downloadBtn) downloadBtn.style.display = "inline-flex";
  if (compareBtn) compareBtn.style.display = "inline-flex";
  if (bgToggleBtn) bgToggleBtn.style.display = "inline-flex";
}

// Basculer le fond blanc
async function toggleWhiteBackground(id) {
  const imageData = images.find((img) => img.id === id);
  if (!imageData || !imageData.processedUrl) return;

  const preview = document.getElementById(`preview-${id}`);
  const toggleBtn = document.getElementById(`bg-toggle-${id}`);

  if (imageData.hasWhiteBg) {
    preview.src = imageData.processedUrl;
    imageData.hasWhiteBg = false;
    toggleBtn.classList.remove("active");
    toggleBtn.title = "Ajouter fond blanc";
  } else {
    if (!imageData.processedWithBg) {
      toggleBtn.innerHTML = '<i class="bi bi-hourglass-split spin"></i>';
      imageData.processedWithBg = await applyWhiteBackground(
        imageData.processedUrl
      );
      toggleBtn.innerHTML = '<i class="bi bi-circle-half"></i>';
    }
    preview.src = imageData.processedWithBg;
    imageData.hasWhiteBg = true;
    toggleBtn.classList.add("active");
    toggleBtn.title = "Retirer fond blanc";
  }
}

// Appliquer un fond blanc avec canvas
function applyWhiteBackground(imageUrl) {
  return new Promise((resolve) => {
    const img = new Image();
    img.crossOrigin = "anonymous";
    img.onload = () => {
      const canvas = document.createElement("canvas");
      canvas.width = img.width;
      canvas.height = img.height;
      const ctx = canvas.getContext("2d");

      ctx.fillStyle = "#FFFFFF";
      ctx.fillRect(0, 0, canvas.width, canvas.height);
      ctx.drawImage(img, 0, 0);

      canvas.toBlob((blob) => {
        resolve(URL.createObjectURL(blob));
      }, "image/png");
    };
    img.src = imageUrl;
  });
}

// Mettre à jour la progression
function updateProgress(current, total) {
  const percentage = (current / total) * 100;
  progressBar.style.width = `${percentage}%`;
  progressText.textContent = `${current} / ${total}`;
}

// Basculer la comparaison (Original vs Traité)
function toggleCompare(id) {
  const imageData = images.find((img) => img.id === id);
  const preview = document.getElementById(`preview-${id}`);

  if (imageData && preview) {
    if (
      preview.src === imageData.processedUrl ||
      preview.src === imageData.processedWithBg
    ) {
      preview.src = imageData.dataUrl;
    } else {
      preview.src =
        imageData.hasWhiteBg && imageData.processedWithBg
          ? imageData.processedWithBg
          : imageData.processedUrl;
    }
  }
}

// Télécharger une image
function downloadImage(id) {
  const imageData = images.find((img) => img.id === id);
  if (imageData && imageData.processedUrl) {
    const link = document.createElement("a");
    link.href =
      imageData.hasWhiteBg && imageData.processedWithBg
        ? imageData.processedWithBg
        : imageData.processedUrl;
    const suffix = imageData.hasWhiteBg ? "_fond_blanc" : "";
    link.download = `sans_fond_${imageData.name.replace(
      /\.[^/.]+$/,
      ""
    )}${suffix}.png`;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  }
}

// Supprimer une image
function removeImage(id) {
  const index = images.findIndex((img) => img.id === id);
  if (index > -1) {
    if (images[index].processedUrl) {
      URL.revokeObjectURL(images[index].processedUrl);
    }
    if (images[index].processedWithBg) {
      URL.revokeObjectURL(images[index].processedWithBg);
    }
    images.splice(index, 1);
  }

  const card = document.getElementById(`card-${id}`);
  if (card) {
    card.remove();
  }

  updateControls();
}

// Effacer toutes les images
function clearAllImages() {
  images.forEach((img) => {
    if (img.processedUrl) {
      URL.revokeObjectURL(img.processedUrl);
    }
    if (img.processedWithBg) {
      URL.revokeObjectURL(img.processedWithBg);
    }
  });

  images = [];
  imagesGrid.innerHTML = "";
  updateControls();
  showToast("Effacé", "Toutes les images ont été supprimées.", "info");
}

// Télécharger toutes les images traitées en ZIP
async function downloadAllProcessed() {
  const processedImages = images.filter(
    (img) => img.status === "done" && img.processedUrl
  );

  if (processedImages.length === 0) {
    showToast(
      "Aucune image",
      "Aucune image traitée disponible au téléchargement.",
      "warning"
    );
    return;
  }

  downloadAllBtn.disabled = true;
  downloadAllBtn.innerHTML =
    '<i class="bi bi-hourglass-split me-1 spin"></i>Création du ZIP...';

  try {
    const zip = new JSZip();

    for (const imageData of processedImages) {
      const url =
        imageData.hasWhiteBg && imageData.processedWithBg
          ? imageData.processedWithBg
          : imageData.processedUrl;
      const response = await fetch(url);
      const blob = await response.blob();
      const suffix = imageData.hasWhiteBg ? "_fond_blanc" : "";
      const fileName = `sans_fond_${imageData.name.replace(
        /\.[^/.]+$/,
        ""
      )}${suffix}.png`;
      zip.file(fileName, blob);
    }

    const content = await zip.generateAsync({ type: "blob" });
    const timestamp = new Date().toISOString().slice(0, 10);
    saveAs(content, `images_sans_fond_${timestamp}.zip`);

    showToast(
      "Téléchargement prêt",
      `Fichier ZIP avec ${processedImages.length} image${
        processedImages.length > 1 ? "s" : ""
      } créé.`,
      "success"
    );
  } catch (error) {
    console.error("Erreur de création du ZIP :", error);
    showToast(
      "Erreur de téléchargement",
      "Échec de la création du fichier ZIP.",
      "danger"
    );
  }

  downloadAllBtn.disabled = false;
  downloadAllBtn.innerHTML =
    '<i class="bi bi-download me-2"></i>Télécharger toutes les images';
}

// Formater la taille du fichier
function formatFileSize(bytes) {
  if (bytes === 0) return "0 Octets";
  const k = 1024;
  const sizes = ["Octets", "Ko", "Mo", "Go"];
  const i = Math.floor(Math.log(bytes) / Math.log(k));
  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
}

// Afficher une notification toast
function showToast(title, message, type = "info") {
  const toast = document.getElementById("toast");
  const toastTitle = document.getElementById("toastTitle");
  const toastBody = document.getElementById("toastBody");

  toastTitle.textContent = title;
  toastBody.textContent = message;

  const header = toast.querySelector(".toast-header i");
  const colors = {
    success: "text-success",
    danger: "text-danger",
    warning: "text-warning",
    info: "text-primary",
  };
  header.className = `bi bi-bell-fill me-2 ${colors[type] || colors.info}`;

  const bsToast = new bootstrap.Toast(toast, { delay: 4000 });
  bsToast.show();
}