'use client';

/**
 * Admin Dashboard Page
 * Displays core stats and dynamically loads module dashboard widgets
 */

import { Suspense } from 'react';
import { StatCard } from '../../../../shared/components';
import { UserMultiple02Icon } from '../../../../shared/Icons.js';
import { getModuleDashboardWidgets } from '../../../../modules/modules.pages.js';

/**
 * Loading placeholder for widgets
 */
function WidgetLoading() {
  return (
    <div className="animate-pulse bg-neutral-200 dark:bg-neutral-800 rounded-lg h-32"></div>
  );
}

export default function DashboardPage({ user, stats, moduleStats = {}, enabledModules = {} }) {
  const loading = !stats;

  // Get only enabled module dashboard widgets
  const allModuleWidgets = getModuleDashboardWidgets();
  const moduleWidgets = Object.fromEntries(
    Object.entries(allModuleWidgets).filter(([moduleName]) => enabledModules[moduleName])
  );

  return (
    <div className="flex flex-col gap-4 sm:gap-6 lg:gap-8">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-lg sm:text-xl font-semibold text-neutral-900 dark:text-white">
            Tableau de bord
          </h1>
          <p className="mt-1 text-xs text-neutral-400">Vue d'ensemble de votre application</p>
        </div>
      </div>

      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6">
        {/* Module dashboard widgets (dynamically loaded) */}
        {Object.entries(moduleWidgets).map(([moduleName, widgets]) => (
          widgets.map((Widget, index) => (
            <Suspense key={`${moduleName}-widget-${index}`} fallback={<WidgetLoading />}>
              <Widget stats={moduleStats[moduleName]} />
            </Suspense>
          ))
        ))}

        {/* Core stats - always shown */}
        <StatCard
          title="Nombre d'utilisateurs"
          value={loading ? '-' : String(stats?.totalUsers || 0)}
          icon={UserMultiple02Icon}
          color="text-purple-400"
          bgColor="bg-purple-500/10"
          loading={loading}
        />
      </div>
    </div>
  );
}