Ciné Délices
du design au déploiement.

// Debounce dynamique : plus on tape, plus on est rapide

const input = $('.search-input');
let timer, controller;

function delayFor(query) {
  const n = query.length;
  if (n === 0) return 0;
  if (n < 2)  return 500;
  if (n < 4)  return 280;
  return 150;
}

input.addEventListener('input', (e) => {
  clearTimeout(timer);
  controller?.abort();

  const q = e.target.value.trim();
  if (!q) return renderEmpty();

  timer = setTimeout(async () => {
    controller = new AbortController();
    try {
      const res = await fetch(
        `/api/search?q=${encodeURIComponent(q)}`,
        { signal: controller.signal }
      );
      render(await res.json());
    } catch (err) {
      if (err.name !== 'AbortError') renderError();
    }
  }, delayFor(q));
});

// Rating : 2 états séparés (committed + preview)

class StarRating {
  constructor(root, { initial = 0, onChange } = {}) {
    this.root = root;
    this.committed = initial;
    this.preview   = null;
    this.onChange  = onChange;
    this.bind();
    this.render();
  }

  get displayed() {
    return this.preview ?? this.committed;
  }

  bind() {
    this.root.querySelectorAll('[data-v]').forEach(s => {
      const v = +s.dataset.v;
      s.addEventListener('mouseenter', () => { this.preview = v; this.render(); });
      s.addEventListener('click', () => this.commit(v));
    });
    this.root.addEventListener('mouseleave', () => {
      this.preview = null;
      this.render();
    });
    this.root.addEventListener('keydown', (e) => {
      if (e.key === 'ArrowLeft')  this.commit(Math.max(0, this.committed - 1));
      if (e.key === 'ArrowRight') this.commit(Math.min(5, this.committed + 1));
    });
  }

  commit(v) {
    this.committed = v;
    this.preview   = null;
    this.render();
    this.onChange?.(v);
  }

  render() {
    const v = this.displayed;
    this.root.querySelectorAll('[data-v]').forEach(s => {
      s.classList.toggle('on', +s.dataset.v <= v);
    });
  }
}

// Carrousel : flag isProgrammatic

class Carousel {
  constructor(track) {
    this.track = track;
    this.isProgrammatic = false;
    this.idx = 0;
    this.bind();
  }

  bind() {
    this.track.addEventListener('scroll', () => {
      if (this.isProgrammatic) return;
      this.syncIndexFromScroll();
    }, { passive: true });

    $('.next').addEventListener('click', () => this.go(+1));
    $('.prev').addEventListener('click', () => this.go(-1));
  }

  go(dir) {
    const next = Math.max(0, Math.min(this.max, this.idx + dir));
    this.idx = next;
    this.scrollToIndex(next);
  }

  scrollToIndex(i) {
    this.isProgrammatic = true;
    const card = this.track.children[i];
    this.track.scrollTo({ left: card.offsetLeft - 12, behavior: 'smooth' });
    const reset = () => { this.isProgrammatic = false; };
    this.track.addEventListener('scrollend', reset, { once: true });
    setTimeout(reset, 700);
  }
}

// Sécurité serveur : Helmet + rate limit + CSP

import helmet      from 'helmet';
import rateLimit   from 'express-rate-limit';
import argon2      from 'argon2';
import { sanitize } from './xss.js';

export function applySecurity(app) {
  app.use(helmet({
    contentSecurityPolicy: {
      directives: {
        defaultSrc: ["'self'"],
        imgSrc:     ["'self'", "https://image.tmdb.org"],
        scriptSrc:  ["'self'"],
        styleSrc:   ["'self'", "'unsafe-inline'"],
      },
    },
    crossOriginEmbedderPolicy: false,
  }));

  app.use('/api/auth', rateLimit({
    windowMs: 15 * 60 * 1000,
    max: 5,
    standardHeaders: true,
    message: { error: 'Trop de tentatives, réessayez plus tard.' },
  }));

  app.use(rateLimit({ windowMs: 60_000, max: 120 }));

  app.use((req, _res, next) => {
    if (req.body && typeof req.body === 'object') {
      for (const k in req.body) {
        if (typeof req.body[k] === 'string') {
          req.body[k] = sanitize(req.body[k]);
        }
      }
    }
    next();
  });
}

export const hashPassword = (pw) => argon2.hash(pw, {
  type: argon2.argon2id,
  memoryCost: 19456,
  timeCost:   2,
  parallelism: 1,
});