'use client';

import { LayoutShell } from '../../../components/layout-shell';
import { useState } from 'react';
import { AdminExperienceDeck } from '../../../components/experience/pro-experience';
import { usePlanMetrics } from '../../../hooks/use-plan-metrics';
import { useExecutiveMetrics } from '../../../hooks/use-executive-metrics';
import { PlanMetricsPanel } from '../../../components/insights/plan-metrics-panel';
import { PerformancePlaybook } from '../../../components/insights/performance-playbook';
import { FeatureGallery } from '../../../components/insights/feature-gallery';
import {
  ExecutiveHero,
  IntelligenceStack,
  DeliveryMomentumPanel,
  RiskAndConfidenceMatrix,
  StrategicActionGrid,
  ExecutiveNarratives,
} from '../../../components/super-admin/executive-suite';
import { SmartInsightsPanel } from '../../../components/super-admin/smart-insights-panel';
import { PendingReviewDeliveriesPanel } from '../../../components/super-admin/pending-review-deliveries-panel';
import { GcxLoading } from '../../../components/ui/gcx-loading';

export default function SuperAdminDashboard() {
  const [planPeriodId] = useState(1);
  const { data: metrics, isLoading } = useExecutiveMetrics(planPeriodId);

  if (isLoading) {
    return (
      <LayoutShell role="SUPER_ADMIN">
        <GcxLoading />
      </LayoutShell>
    );
  }

  return (
    <LayoutShell role="SUPER_ADMIN">
      <ExecutiveHero metrics={metrics?.summary} insight={metrics?.insight} />
      <PlanMetricsPanel metrics={metrics?.summary} />
      <IntelligenceStack tracks={metrics?.risks} />
      <DeliveryMomentumPanel momentum={metrics?.momentum} />
      <PendingReviewDeliveriesPanel />
      <RiskAndConfidenceMatrix risks={metrics?.risks} />
      <StrategicActionGrid actions={metrics?.actions} />
      <SmartInsightsPanel />
      <PerformancePlaybook />
      <AdminExperienceDeck />
      <FeatureGallery />
      <ExecutiveNarratives narratives={metrics?.narratives} />
    </LayoutShell>
  );
}