botino/public/lib/router.js

import { emit } from "./bus.js";

// Mapeo de rutas a vistas
const ROUTES = [
  { pattern: /^\/$/, view: "home", params: [] },
  { pattern: /^\/home$/, view: "home", params: [] },
  { pattern: /^\/chat$/, view: "chat", params: [] },
  { pattern: /^\/conversaciones$/, view: "conversations", params: [] },
  { pattern: /^\/usuarios$/, view: "users", params: [] },
  { pattern: /^\/usuarios\/([^/]+)$/, view: "users", params: ["id"] },
  { pattern: /^\/productos$/, view: "products", params: [] },
  { pattern: /^\/productos\/([^/]+)$/, view: "products", params: ["id"] },
  { pattern: /^\/equivalencias$/, view: "aliases", params: [] },
  { pattern: /^\/crosssell$/, view: "crosssell", params: [] },
  { pattern: /^\/crosssell\/([^/]+)$/, view: "crosssell", params: ["id"] },
  { pattern: /^\/cantidades$/, view: "quantities", params: [] },
  { pattern: /^\/pedidos$/, view: "orders", params: [] },
  { pattern: /^\/pedidos\/([^/]+)$/, view: "orders", params: ["id"] },
  { pattern: /^\/config-prompts$/, view: "prompts", params: [] },
  { pattern: /^\/atencion-humana$/, view: "takeovers", params: [] },
  { pattern: /^\/configuracion$/, view: "settings", params: [] },
  { pattern: /^\/operadores$/, view: "operadores", params: [] },
  { pattern: /^\/actividad$/, view: "actividad", params: [] },
];

// Mapeo de vistas a rutas base (para navegación sin parámetros)
const VIEW_TO_PATH = {
  home: "/home",
  chat: "/chat",
  conversations: "/conversaciones",
  users: "/usuarios",
  products: "/productos",
  aliases: "/equivalencias",
  crosssell: "/crosssell",
  quantities: "/cantidades",
  orders: "/pedidos",
  prompts: "/config-prompts",
  takeovers: "/atencion-humana",
  settings: "/configuracion",
  operadores: "/operadores",
  actividad: "/actividad",
};

/**
 * Parsea el pathname y devuelve { view, params }
 */
export function parseRoute(pathname) {
  const path = pathname || "/";
  
  for (const route of ROUTES) {
    const match = path.match(route.pattern);
    if (match) {
      const params = {};
      route.params.forEach((name, i) => {
        params[name] = match[i + 1];
      });
      return { view: route.view, params };
    }
  }
  
  // Fallback a home si no matchea ninguna ruta
  return { view: "home", params: {} };
}

/**
 * Obtiene la ruta actual del browser
 */
export function getCurrentRoute() {
  return parseRoute(window.location.pathname);
}

/**
 * Navega a una nueva ruta sin recargar la página
 */
export function navigate(path, { replace = false } = {}) {
  if (replace) {
    history.replaceState(null, "", path);
  } else {
    history.pushState(null, "", path);
  }
  
  const route = parseRoute(path);
  emit("router:change", route);
}

/**
 * Navega a una vista (sin parámetros)
 */
export function navigateToView(view) {
  const path = VIEW_TO_PATH[view] || "/";
  navigate(path);
}

/**
 * Navega a una vista con un ID específico
 */
export function navigateToItem(view, id) {
  const basePath = VIEW_TO_PATH[view];
  if (!basePath) return;
  
  const path = id ? `${basePath}/${encodeURIComponent(id)}` : basePath;
  navigate(path);
}

/**
 * Inicializa el router - debe llamarse después de que los componentes estén listos
 */
export function initRouter() {
  // Escuchar popstate (botón atrás/adelante del browser)
  window.addEventListener("popstate", () => {
    const route = getCurrentRoute();
    emit("router:change", route);
  });
  
  // Emitir la ruta inicial
  const route = getCurrentRoute();
  emit("router:change", route);
  
  return route;
}

export const router = {
  parseRoute,
  getCurrentRoute,
  navigate,
  navigateToView,
  navigateToItem,
  initRouter,
  VIEW_TO_PATH,
};