script.js

const modalContent = {
  revenus: {
    title: "Vos revenus TIE",
    text: "Les revenus générés par vos clients privés apparaîtront ici. Vous pourrez suivre vos gains du jour, de la semaine, du mois et votre progression.",
    icon: `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 3v18h18"/><path d="M18 17V9"/><path d="M13 17V5"/><path d="M8 17v-3"/></svg>`
  },
  status: {
    title: "Votre statut est important",
    text: "Quand vous êtes en ligne, vous pouvez recevoir des demandes. Pensez à passer en indisponible ou en vacances si vous ne pouvez pas répondre, pour éviter de manquer une course ou de frustrer un client.",
    icon: `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>`
  },
  clients: {
    title: "Votre premier challenge client",
    text: "Objectif simple : lors de votre prochaine course réussie, proposez au client de scanner votre QR code TIE. Il pourra vous retrouver directement pour ses prochains trajets privés.",
    icon: `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>`
  },
  courses: {
    title: "Vos courses du jour",
    text: "Quand vos clients privés vous enverront des demandes, vous verrez ici les trajets du jour, les prix proposés, vos revenus et le suivi de votre activité.",
    icon: `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="8" height="4" x="8" y="2" rx="1"/><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/><path d="M12 11h4"/><path d="M12 16h4"/><path d="M8 11h.01"/><path d="M8 16h.01"/></svg>`
  },
  demandes: {
    title: "Demandes en attente",
    text: "Lorsqu’un client vous demande une course, vous disposez d’un temps limité pour accepter, refuser ou proposer un confrère de confiance.",
    icon: `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>`
  },
  qr: {
    title: "Votre QR code chauffeur",
    text: "Montrez ce QR code à vos clients privés pour qu’ils puissent enregistrer votre profil et vous recontacter facilement via TIE.",
    icon: `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg>`
  },
  challenge: {
    title: "Lancer votre premier challenge",
    text: "Pendant vos 5 prochaines courses, présentez TIE aux clients satisfaits. L’objectif : obtenir votre premier client privé enregistré.",
    icon: `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9H4.5a2.5 2.5 0 0 1 0-5H6"/><path d="M18 9h1.5a2.5 2.5 0 0 0 0-5H18"/><path d="M4 22h16"/><path d="M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22"/><path d="M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22"/><path d="M18 2H6v7a6 6 0 0 0 12 0V2Z"/></svg>`
  },
  menu: {
    title: "Menu chauffeur",
    text: "Ici, vous retrouverez bientôt votre profil, vos documents, vos tarifs, vos disponibilités et le support TIE.",
    icon: `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="4" x2="20" y1="12" y2="12"/><line x1="4" x2="20" y1="6" y2="6"/><line x1="4" x2="20" y1="18" y2="18"/></svg>`
  }
};

function getGreeting(name) {
  const hour = new Date().getHours();
  if (hour >= 18 || hour < 5) return `Bonsoir ${name}`;
  return `Bonjour ${name}`;
}

function openModal(type) {
  const modal = document.getElementById("modal");
  const backdrop = document.getElementById("modalBackdrop");
  const panel = document.getElementById("modalPanel");
  const title = document.getElementById("modalTitle");
  const text = document.getElementById("modalText");
  const iconContainer = document.getElementById("modalIcon");

  const data = modalContent[type] || modalContent.challenge;
  title.textContent = data.title;
  text.textContent = data.text;
  iconContainer.innerHTML = data.icon;

  modal.classList.remove("hidden");
  document.body.style.overflow = "hidden";

  requestAnimationFrame(() => {
    backdrop.classList.remove("opacity-0");
    panel.classList.remove("translate-y-full");
  });
}

function closeModal() {
  const modal = document.getElementById("modal");
  const backdrop = document.getElementById("modalBackdrop");
  const panel = document.getElementById("modalPanel");

  backdrop.classList.add("opacity-0");
  panel.classList.add("translate-y-full");

  setTimeout(() => {
    modal.classList.add("hidden");
    document.body.style.overflow = "";
  }, 300);
}

const statusConfig = {
  online: {
    label: "En ligne",
    dotColor: "bg-emerald-400",
    pingColor: "bg-emerald-400",
    btnBg: "bg-emerald-500/10",
    btnBorder: "border-emerald-500/20",
    btnText: "text-emerald-400",
    toast: "Vous êtes en ligne",
    toastDot: "bg-emerald-400"
  },
  unavailable: {
    label: "Indisponible",
    dotColor: "bg-orange-400",
    pingColor: "bg-orange-400",
    btnBg: "bg-orange-500/10",
    btnBorder: "border-orange-500/20",
    btnText: "text-orange-400",
    toast: "Vous êtes indisponible",
    toastDot: "bg-orange-400"
  },
  vacation: {
    label: "En vacances",
    dotColor: "bg-sky-400",
    pingColor: "bg-sky-400",
    btnBg: "bg-sky-500/10",
    btnBorder: "border-sky-500/20",
    btnText: "text-sky-400",
    toast: "Vous êtes en vacances",
    toastDot: "bg-sky-400"
  }
};

function showToast(message, dotColor = "bg-emerald-400") {
  const toast = document.getElementById("toast");
  const text = document.getElementById("toastText");
  const dot = document.getElementById("toastDot");
  if (text) text.textContent = message;
  if (dot) dot.className = `w-2 h-2 rounded-full ${dotColor}`;
  toast.classList.remove("hidden");
  toast.classList.add("flex");
  clearTimeout(window.__toastTimer);
  window.__toastTimer = setTimeout(() => {
    toast.classList.add("hidden");
    toast.classList.remove("flex");
  }, 2200);
}

function setActiveStep(stepNum) {
  const container = document.getElementById('stepsContainer');
  if (!container) return;

  const ping1 = document.getElementById('ping-1');
  if (ping1 && !ping1.dataset.stopped) {
    ping1.style.animation = 'none';
    ping1.style.opacity = '0';
    ping1.dataset.stopped = 'true';
  }

  container.querySelectorAll('.step-card').forEach(card => {
    const body = card.querySelector('.step-body');
    const num = parseInt(card.dataset.step);

    if (num === stepNum) {
      card.classList.add('bg-tie-elevated', 'border-emerald-500/30', 'scale-[1.01]');
      card.classList.remove('bg-tie-surface', 'border-white/[0.08]');
      body.style.maxHeight = body.scrollHeight + 'px';
      body.classList.remove('opacity-0');
      body.classList.add('opacity-100');
    } else {
      card.classList.remove('bg-tie-elevated', 'border-emerald-500/30', 'scale-[1.01]');
      card.classList.add('bg-tie-surface', 'border-white/[0.08]');
      body.style.maxHeight = '0px';
      body.classList.remove('opacity-100');
      body.classList.add('opacity-0');
    }
  });
}

function toggleStep(stepNum) {
  const container = document.getElementById('stepsContainer');
  if (!container) return;
  const card = container.querySelector(`[data-step="${stepNum}"]`);
  if (!card) return;
  const body = card.querySelector('.step-body');
  if (body.classList.contains('opacity-100')) return;
  setActiveStep(stepNum);
}

function handleStatusClick() {
  if (!localStorage.getItem("statusHintShown")) {
    localStorage.setItem("statusHintShown", "true");
    openModal("status");
    return;
  }
  toggleStatusDropdown();
}

function toggleStatusDropdown() {
  const dropdown = document.getElementById("statusDropdown");
  dropdown.classList.toggle("hidden");
}

function selectStatus(key) {
  const cfg = statusConfig[key];
  const btn = document.getElementById("statusBtn");
  const ping = document.getElementById("statusPing");
  const dot = document.getElementById("statusDotInner");
  const label = document.getElementById("statusLabel");
  if (!btn || !cfg) return;

  btn.className = `shrink-0 inline-flex items-center gap-2 rounded-full px-3.5 py-2 text-xs font-semibold active:scale-95 transition ${cfg.btnBg} ${cfg.btnBorder} ${cfg.btnText}`;
  if (ping) ping.className = `animate-ping absolute inline-flex h-full w-full rounded-full opacity-60 ${cfg.pingColor}`;
  if (dot) dot.className = `relative inline-flex rounded-full h-2 w-2 ${cfg.dotColor}`;
  if (label) label.textContent = cfg.label;

  document.getElementById("statusDropdown").classList.add("hidden");
  showToast(cfg.toast, cfg.toastDot);
}

function copyLink() {
  if (navigator.clipboard) {
    navigator.clipboard.writeText("https://tie.app/chauffeur/TIE-123456").catch(() => {});
  }
  showToast("Lien copié dans le presse-papiers");
}

document.addEventListener("click", function (e) {
  const dropdown = document.getElementById("statusDropdown");
  const btn = document.getElementById("statusBtn");
  if (dropdown && !dropdown.classList.contains("hidden") && !dropdown.contains(e.target) && btn && !btn.contains(e.target)) {
    dropdown.classList.add("hidden");
  }
});

document.addEventListener("keydown", function (event) {
  if (event.key === "Escape") {
    closeModal();
    const dropdown = document.getElementById("statusDropdown");
    if (dropdown) dropdown.classList.add("hidden");
  }
});

document.addEventListener("DOMContentLoaded", function () {
  const name = localStorage.getItem("driverName") || "Jean";
  document.getElementById("header-greeting").textContent = getGreeting(name.split(" ")[0]);

  setTimeout(() => setActiveStep(1), 50);
});