import { renderDashboard } from './DashboardPage.js';
import { renderTestPage } from './test.js';
import { renderFacturasPage } from './Facturas.js';

// Registry of all pages available in the application
export const pagesRegistry = [
  {
    route: 'dashboard',
    name: 'Dashboard',
    icon: '🏠',
    requiresAuth: true,
    showInSidebar: true,
    render: renderDashboard
  },
  {
    route: 'test',
    name: 'Test Page',
    icon: '🧪',
    requiresAuth: true,
    showInSidebar: true,
    render: renderTestPage
  },
  {
    route: 'invoices',
    name: 'Facturas',
    icon: '📄',
    requiresAuth: true,
    showInSidebar: true,
    render: renderFacturasPage
  },
  {
    route: 'clients',
    name: 'Clientes',
    icon: '👥',
    requiresAuth: true,
    showInSidebar: true,
    render: () => {
      const div = document.createElement('div');
      div.innerHTML = '<h1>Clientes</h1><p>Página en construcción...</p>';
      return div;
    }
  },
  {
    route: 'settings',
    name: 'Configuración',
    icon: '⚙️',
    requiresAuth: true,
    showInSidebar: true,
    render: () => {
      const div = document.createElement('div');
      div.innerHTML = '<h1>Configuración</h1><p>Página en construcción...</p>';
      return div;
    }
  }
];

// Get pages that the user can access
export function getAvailablePages(isAuthenticated) {
  if (!isAuthenticated) {
    return [];
  }
  // Filter pages based on authentication requirement and sidebar visibility
  return pagesRegistry.filter(page => {
    if (page.requiresAuth && !isAuthenticated) return false;
    return page.showInSidebar;
  });
}

// Get page by route
export function getPageByRoute(route) {
  return pagesRegistry.find(page => page.route === route);
}