'use client';

/**
 * Admin Pages Component
 * 
 * This component handles both core admin pages and module pages.
 * Module pages are loaded dynamically on the client where hooks work properly.
 */

import { Suspense } from 'react';
import DashboardPage from './pages/DashboardPage.js';
import UsersPage from './pages/UsersPage.js';
import UserEditPage from './pages/UserEditPage.js';
import ProfilePage from './pages/ProfilePage.js';
import { getModulePageLoader } from '../../../modules/modules.pages.js';

// Loading component for suspense
function PageLoading() {
  return (
    <div className="flex items-center justify-center min-h-[400px]">
      <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-white"></div>
    </div>
  );
}

export default function AdminPagesClient({
  params,
  user,
  dashboardStats = null,
  moduleStats = {},
  modulePageInfo = null,
  routeInfo = null,
  enabledModules = {}
}) {
  // If this is a module page, render it with lazy loading
  if (modulePageInfo && routeInfo) {
    const LazyComponent = getModulePageLoader(modulePageInfo.module, modulePageInfo.path);
    if (LazyComponent) {
      // Build props for the page
      const pageProps = { user };
      if (routeInfo.action === 'edit' && routeInfo.id) {
        // Add ID props for edit pages (modules may use different prop names)
        pageProps.id = routeInfo.id;
        pageProps.invoiceId = routeInfo.id;
        pageProps.clientId = routeInfo.id;
        pageProps.itemId = routeInfo.id;
        pageProps.categoryId = routeInfo.id;
        pageProps.transactionId = routeInfo.id;
        pageProps.recurrenceId = routeInfo.id;
        pageProps.templateId = routeInfo.id;
        pageProps.postId = routeInfo.id;
      }
      
      return (
        <Suspense fallback={<PageLoading />}>
          <LazyComponent {...pageProps} />
        </Suspense>
      );
    }
  }

  // Determine core page from routeInfo or params
  let currentPage = 'dashboard';
  if (routeInfo?.path) {
    const parts = routeInfo.path.split('/').filter(Boolean);
    currentPage = parts[1] || 'dashboard'; // /admin/[page]
  } else if (params?.admin) {
    currentPage = params.admin[0] || 'dashboard';
  }

  // Core page components mapping (non-module pages)
  const usersPageComponent = routeInfo?.action === 'edit' && routeInfo?.id
    ? () => <UserEditPage userId={routeInfo.id} user={user} enabledModules={enabledModules} />
    : () => <UsersPage user={user} />;

  const corePages = {
    dashboard: () => <DashboardPage user={user} stats={dashboardStats} moduleStats={moduleStats} enabledModules={enabledModules} />,
    users: usersPageComponent,
    profile: () => <ProfilePage user={user} />,
  };

  // Render the appropriate core page or default to dashboard
  const CorePageComponent = corePages[currentPage];
  return CorePageComponent ? <CorePageComponent /> : <DashboardPage user={user} stats={dashboardStats} moduleStats={moduleStats} enabledModules={enabledModules} />;
}