photobooth/frontend/js/app.js

/* Application principale - Routeur SPA et logique globale */

let config = {};
let modeActuel = 'simple';
let photosSession = [];  // Photos de la session en cours
let photoFinale = null;   // Photo finale (avec effets)
let ecranActuel = 'accueil';

// --- Initialisation ---

async function init() {
  config = await apiGet('/api/config');
  appliquerConfig();
  setupEcranAccueil();
  setupModes();
  setupOnglets();
  chargerBoothInfo();
}

function appliquerConfig() {
  const event = config.evenement || {};
  const fonc = config.fonctionnalites || {};

  // Theme
  const theme = event.theme || 'base';
  document.documentElement.setAttribute('data-theme', theme);

  // Couleurs (seulement si theme base, sinon le theme CSS gere)
  if (theme === 'base') {
    document.documentElement.style.setProperty('--primaire', event.couleur_primaire || '#e91e63');
    document.documentElement.style.setProperty('--secondaire', event.couleur_secondaire || '#ffffff');
  }

  // Nom evenement
  const h1 = document.getElementById('nom-evenement');
  if (h1) h1.textContent = event.nom || 'Photobooth';

  // Visibilite des modes
  toggleVisible('btn-multi', fonc.multi_shot);
  toggleVisible('btn-imprimer', fonc.impression);
  toggleVisible('btn-email', fonc.email);
  const boothActif = config.booth?.actif;
  toggleVisible('btn-qr', fonc.qr_code || boothActif);

  // Media d'accueil (video/gif en boucle)
  appliquerMediaAccueil(event.media_accueil);
}

function appliquerMediaAccueil(media) {
  const video = document.getElementById('accueil-video');
  const gif = document.getElementById('accueil-gif');
  const animDefaut = document.getElementById('accueil-animation-defaut');

  // Reset
  video.classList.add('cache');
  gif.classList.add('cache');
  video.pause();
  video.src = '';
  gif.src = '';

  if (!media) {
    // Pas de media, afficher l'animation par defaut
    animDefaut.classList.remove('cache');
    return;
  }

  animDefaut.classList.add('cache');
  const ext = media.split('.').pop().toLowerCase();

  if (ext === 'gif') {
    gif.src = `/assets/animations/${media}`;
    gif.classList.remove('cache');
  } else {
    video.src = `/assets/animations/${media}`;
    video.classList.remove('cache');
    video.play().catch(() => {});
  }
}

// --- Navigation ---

function allerA(ecran) {
  const tous = document.querySelectorAll('.ecran');
  tous.forEach(e => e.classList.remove('actif'));

  const cible = document.getElementById('ecran-' + ecran);
  if (cible) {
    cible.classList.add('actif');
    ecranActuel = ecran;
  }

  // Actions au changement d'ecran
  if (ecran === 'accueil') {
    photosSession = [];
    photoFinale = null;
    arreterPreview();
    majCompteurAccueil();
  } else if (ecran === 'capture') {
    lancerCapture();
  } else if (ecran === 'galerie') {
    chargerGalerie();
  } else if (ecran === 'admin') {
    chargerAdmin();
  }
}

function recommencer() {
  photosSession = [];
  photoFinale = null;
  allerA('mode');
}

// --- Ecran accueil ---

function setupEcranAccueil() {
  const accueil = document.getElementById('ecran-accueil');

  // Toucher pour commencer (ignorer le bouton admin et le popup)
  accueil.addEventListener('click', (e) => {
    if (e.target.closest('.btn-admin')) return;
    allerA('mode');
  });
}

// --- Admin : icone + mot de passe ---

const MDP_ADMIN = '1234';

function ouvrirAdmin() {
  const popup = document.getElementById('popup-mdp');
  const input = document.getElementById('input-mdp-admin');
  popup.classList.remove('cache');
  input.value = '';
  document.getElementById('mdp-erreur').classList.add('cache');
}

function fermerPopupMdp() {
  document.getElementById('popup-mdp').classList.add('cache');
  document.getElementById('input-mdp-admin').value = '';
}

function paveTouche(chiffre) {
  const input = document.getElementById('input-mdp-admin');
  input.value += chiffre;
}

function paveEffacer() {
  const input = document.getElementById('input-mdp-admin');
  input.value = input.value.slice(0, -1);
}

function validerMdpAdmin() {
  const input = document.getElementById('input-mdp-admin');
  if (input.value === MDP_ADMIN) {
    fermerPopupMdp();
    allerA('admin-choix');
  } else {
    document.getElementById('mdp-erreur').classList.remove('cache');
    input.value = '';
  }
}

function ouvrirWizard() {
  allerA('wizard');
  wizardInit();
}

// Valider avec Entree
document.addEventListener('keydown', (e) => {
  if (e.key === 'Enter' && !document.getElementById('popup-mdp').classList.contains('cache')) {
    validerMdpAdmin();
  }
});

// --- Modes ---

function setupModes() {
  document.querySelectorAll('#ecran-mode .btn-mode').forEach(btn => {
    btn.addEventListener('click', () => {
      modeActuel = btn.dataset.mode;
      allerA('capture');
    });
  });
}

// --- Onglets admin ---

function setupOnglets() {
  document.querySelectorAll('.onglet').forEach(onglet => {
    onglet.addEventListener('click', () => {
      document.querySelectorAll('.onglet').forEach(o => o.classList.remove('actif'));
      document.querySelectorAll('.admin-panneau').forEach(p => p.classList.remove('actif'));
      onglet.classList.add('actif');
      const panneau = document.getElementById('panneau-' + onglet.dataset.onglet);
      if (panneau) panneau.classList.add('actif');
    });
  });
}

// --- Utilitaires ---

async function apiGet(url) {
  const resp = await fetch(url);
  return resp.json();
}

async function apiPost(url, data = {}) {
  const resp = await fetch(url, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(data),
  });
  return resp.json();
}

function toggleVisible(id, visible) {
  const el = document.getElementById(id);
  if (el) {
    if (visible === false) el.classList.add('cache');
    else el.classList.remove('cache');
  }
}

async function chargerBoothInfo() {
  const booth = config.booth || {};
  const el = document.getElementById('booth-info');
  if (!booth.actif || !booth.url) {
    el.classList.add('cache');
    return;
  }
  try {
    const info = await apiGet('/api/booth/info');
    if (info.password) {
      document.getElementById('booth-code').textContent = info.password;
      // QR code vers le site booth
      const eventId = booth.event_id || 'default';
      const qrUrl = `${booth.url}/${eventId}`;
      document.getElementById('booth-qr').src = `/api/qr?url=${encodeURIComponent(qrUrl)}`;
      el.classList.remove('cache');
    }
  } catch (e) {
    el.classList.add('cache');
  }
}

function afficherStatut(message, type = 'succes') {
  const el = document.getElementById('statut-partage');
  el.textContent = message;
  el.className = 'statut-partage ' + type;
  el.classList.remove('cache');
  setTimeout(() => el.classList.add('cache'), 4000);
}

// WebSocket : mise a jour config en temps reel
wsOnMessage('config_maj', (msg) => {
  config = msg.config;
  appliquerConfig();
});

// === WIZARD ===

let wizardStep = 1;
const WIZARD_TOTAL = 6;
let wizardData = {
  nom: '',
  theme: 'base',
  modes: { simple: true, multi: true },
  nbPhotos: 4,
  fonctions: {},
};

function wizardInit() {
  wizardStep = 1;
  wizardData.nom = config.evenement?.nom || '';
  wizardData.theme = config.evenement?.theme || 'base';
  wizardData.nbPhotos = config.multi_shot?.nombre_photos || 4;
  document.getElementById('wiz-nom').value = wizardData.nom;
  document.getElementById('wiz-nb-photos').textContent = wizardData.nbPhotos;
  wizardAfficherStep();
}

function wizardAfficherStep() {
  document.querySelectorAll('.wizard-step').forEach(s => s.classList.remove('actif'));
  const step = document.querySelector(`.wizard-step[data-step="${wizardStep}"]`);
  if (step) step.classList.add('actif');

  // Progress dots
  const prog = document.getElementById('wizard-progress');
  prog.innerHTML = '';
  for (let i = 1; i <= WIZARD_TOTAL; i++) {
    const dot = document.createElement('div');
    dot.className = 'wizard-dot' + (i === wizardStep ? ' actif' : '') + (i < wizardStep ? ' fait' : '');
    prog.appendChild(dot);
  }
}

function wizardSuivant() {
  // Sauvegarder l'etape courante
  if (wizardStep === 1) wizardData.nom = document.getElementById('wiz-nom').value;
  if (wizardStep === 4) wizardData.nbPhotos = parseInt(document.getElementById('wiz-nb-photos').textContent);

  wizardStep++;
  if (wizardStep > WIZARD_TOTAL) wizardStep = WIZARD_TOTAL;

  // Resume
  if (wizardStep === WIZARD_TOTAL) {
    const modes = Object.keys(wizardData.modes).filter(k => wizardData.modes[k]);
    const foncs = Object.keys(wizardData.fonctions).filter(k => wizardData.fonctions[k]);
    document.getElementById('wiz-resume').innerHTML = `
      <div><strong>Evenement :</strong> ${wizardData.nom || 'Photobooth'}</div>
      <div><strong>Theme :</strong> ${wizardData.theme}</div>
      <div><strong>Modes :</strong> ${modes.join(', ') || 'photo'}</div>
      <div><strong>Photos/pellicule :</strong> ${wizardData.nbPhotos}</div>
      <div><strong>Partage :</strong> ${foncs.join(', ') || 'aucun'}</div>
    `;
  }

  wizardAfficherStep();
}

function wizardChoisir(btn, key) {
  btn.closest('.wizard-choix').querySelectorAll('.wizard-card').forEach(c => c.classList.remove('actif'));
  btn.classList.add('actif');
  wizardData[key] = btn.dataset.val;
}

function wizardToggle(btn) {
  btn.classList.toggle('actif');
  const val = btn.dataset.val;
  const isActive = btn.classList.contains('actif');

  if (['simple', 'multi'].includes(val)) {
    wizardData.modes[val] = isActive;
  } else {
    wizardData.fonctions[val] = isActive;
  }
}

function wizardNbPhotos(delta) {
  const el = document.getElementById('wiz-nb-photos');
  let n = parseInt(el.textContent) + delta;
  n = Math.max(2, Math.min(8, n));
  el.textContent = n;
  wizardData.nbPhotos = n;
}

async function wizardTerminer() {
  // Sauvegarder toute la config
  await apiPost('/api/config', {
    evenement: {
      nom: wizardData.nom || 'Photobooth',
      theme: wizardData.theme,
    },
    fonctionnalites: {
      photo_simple: wizardData.modes.simple !== false,
      multi_shot: wizardData.modes.multi !== false,
      impression: !!wizardData.fonctions.impression,
      email: !!wizardData.fonctions.email,
      qr_code: !!wizardData.fonctions.qr,
    },
    multi_shot: {
      nombre_photos: wizardData.nbPhotos,
      mode: 'strip',
    },
    booth: {
      actif: !!wizardData.fonctions.galerie_live,
    },
  });

  config = await apiGet('/api/config');
  appliquerConfig();
  chargerBoothInfo();
  allerA('accueil');
}

// Demarrage
document.addEventListener('DOMContentLoaded', init);