bakery-ia/frontend/src/pages/app/DashboardPage.tsx

// ================================================================
// frontend/src/pages/app/DashboardPage.tsx
// ================================================================
/**
 * JTBD-Aligned Dashboard Page
 *
 * Complete redesign based on Jobs To Be Done methodology.
 * Focused on answering: "What requires my attention right now?"
 *
 * Key principles:
 * - Automation-first (show what system did)
 * - Action-oriented (prioritize tasks)
 * - Progressive disclosure (show 20% that matters 80%)
 * - Mobile-first (one-handed operation)
 * - Trust-building (explain system reasoning)
 */

import React, { useState, useEffect, useMemo, useRef } from 'react';
import { useNavigate } from 'react-router-dom';
import { RefreshCw, ExternalLink, Plus, Sparkles, Wifi, WifiOff } from 'lucide-react';
import { useTranslation } from 'react-i18next';
import { useTenant } from '../../stores/tenant.store';
import {
  useBakeryHealthStatus,
  useOrchestrationSummary,
  useUnifiedActionQueue,
  useProductionTimeline,
  useApprovePurchaseOrder,
  useStartProductionBatch,
  usePauseProductionBatch,
  useExecutionProgress,
  useDashboardRealtime, // PHASE 3: SSE state sync
  useProgressiveDashboard, // PHASE 4: Progressive loading
} from '../../api/hooks/useProfessionalDashboard';
import { useRejectPurchaseOrder } from '../../api/hooks/purchase-orders';
import { useIngredients } from '../../api/hooks/inventory';
import { useSuppliers } from '../../api/hooks/suppliers';
import { useRecipes } from '../../api/hooks/recipes';
import { useQualityTemplates } from '../../api/hooks/qualityTemplates';
import { GlanceableHealthHero } from '../../components/dashboard/GlanceableHealthHero';
import { SetupWizardBlocker } from '../../components/dashboard/SetupWizardBlocker';
import { CollapsibleSetupBanner } from '../../components/dashboard/CollapsibleSetupBanner';
import { UnifiedActionQueueCard } from '../../components/dashboard/UnifiedActionQueueCard';
import { ExecutionProgressTracker } from '../../components/dashboard/ExecutionProgressTracker';
import { IntelligentSystemSummaryCard } from '../../components/dashboard/IntelligentSystemSummaryCard';
import { useAuthUser } from '../../stores';
import { UnifiedPurchaseOrderModal } from '../../components/domain/procurement/UnifiedPurchaseOrderModal';
import { UnifiedAddWizard } from '../../components/domain/unified-wizard';
import type { ItemType } from '../../components/domain/unified-wizard';
import { useDemoTour, shouldStartTour, clearTourStartPending } from '../../features/demo-onboarding';
import { Package, Users, BookOpen, Shield } from 'lucide-react';
import {
  useBatchNotifications,
  useDeliveryNotifications,
  useOrchestrationNotifications,
} from '../../hooks';


// Import Enterprise Dashboard
import EnterpriseDashboardPage from './EnterpriseDashboardPage';
import { useSubscription } from '../../api/hooks/subscription';
import { SUBSCRIPTION_TIERS } from '../../api/types/subscription';

// Rename the existing component to BakeryDashboard
export function BakeryDashboard() {
  const navigate = useNavigate();
  const { t } = useTranslation(['dashboard', 'common', 'alerts']);
  const { currentTenant } = useTenant();
  const tenantId = currentTenant?.id || '';
  const { startTour } = useDemoTour();
  const isDemoMode = localStorage.getItem('demo_mode') === 'true';




  // Unified Add Wizard state
  const [isAddWizardOpen, setIsAddWizardOpen] = useState(false);
  const [addWizardError, setAddWizardError] = useState<string | null>(null);

  // PO Details Modal state
  const [selectedPOId, setSelectedPOId] = useState<string | null>(null);
  const [isPOModalOpen, setIsPOModalOpen] = useState(false);
  const [poModalMode, setPOModalMode] = useState<'view' | 'edit'>('view');

  // Setup Progress Data
  // Always fetch setup data to determine true progress, but use localStorage as fallback during loading
  // PHASE 1 OPTIMIZATION: Only use cached value if we're still waiting for API to respond
  const setupProgressFromStorage = useMemo(() => {
    try {
      const cached = localStorage.getItem(`setup_progress_${tenantId}`);
      return cached ? parseInt(cached, 10) : 0;
    } catch {
      return 0;
    }
  }, [tenantId]);

  // Always fetch the actual data to determine true progress
  const { data: ingredients = [], isLoading: loadingIngredients } = useIngredients(
    tenantId,
    {},
    { enabled: !!tenantId }
  );
  const { data: suppliers = [], isLoading: loadingSuppliers } = useSuppliers(
    tenantId,
    {},
    { enabled: !!tenantId }
  );
  const { data: recipes = [], isLoading: loadingRecipes } = useRecipes(
    tenantId,
    {},
    { enabled: !!tenantId }
  );
  const { data: qualityData, isLoading: loadingQuality } = useQualityTemplates(
    tenantId,
    {},
    { enabled: !!tenantId }
  );
  const qualityTemplates = Array.isArray(qualityData?.templates) ? qualityData.templates : [];

  // PHASE 4: Progressive data loading for perceived performance boost
  const {
    health: {
      data: healthStatus,
      isLoading: healthLoading,
      refetch: refetchHealth,
    },
    actionQueue: {
      data: actionQueue,
      isLoading: actionQueueLoading,
      refetch: refetchActionQueue,
    },
    progress: {
      data: executionProgress,
      isLoading: executionProgressLoading,
      refetch: refetchExecutionProgress,
    },
    overallLoading,
    isReady,
  } = useProgressiveDashboard(tenantId);

  // Additional hooks not part of progressive loading
  const {
    data: orchestrationSummary,
    isLoading: orchestrationLoading,
    refetch: refetchOrchestration,
  } = useOrchestrationSummary(tenantId);

  const {
    data: productionTimeline,
    isLoading: timelineLoading,
    refetch: refetchTimeline,
  } = useProductionTimeline(tenantId);

  // Insights functionality removed as it's not needed with new architecture
  const insights = undefined;
  const insightsLoading = false;
  const refetchInsights = () => {};

  // PHASE 3: Enable SSE real-time state synchronization
  useDashboardRealtime(tenantId);


  // PHASE 6: Performance monitoring
  useEffect(() => {
    const loadTime = performance.now();
    console.log(`📊 [Performance] Dashboard loaded in ${loadTime.toFixed(0)}ms`);

    // Calculate setup completion status based on stored progress (approximation since actual data may not be loaded yet)
    const setupComplete = setupProgressFromStorage >= 100;

    if (loadTime > 1000) {
      console.warn('⚠️ [Performance] Dashboard load time exceeded target (>1000ms):', {
        loadTime: `${loadTime.toFixed(0)}ms`,
        target: '1000ms',
        setupComplete,
        queriesSkipped: setupComplete ? 4 : 0,
      });
    } else {
      console.log('✅ [Performance] Dashboard load time within target:', {
        loadTime: `${loadTime.toFixed(0)}ms`,
        target: '<1000ms',
        setupComplete,
        queriesSkipped: setupComplete ? 4 : 0,
      });
    }
  }, [setupProgressFromStorage]); // Include setupProgressFromStorage as dependency

  // Real-time event subscriptions for automatic refetching
  const { notifications: batchNotifications } = useBatchNotifications();
  const { notifications: deliveryNotifications } = useDeliveryNotifications();
  const { recentNotifications: orchestrationNotifications } = useOrchestrationNotifications();

  console.log('🔄 [Dashboard] Component render - notification counts:', {
    batch: batchNotifications.length,
    delivery: deliveryNotifications.length,
    orchestration: orchestrationNotifications.length,
    batchIds: batchNotifications.map(n => n.id).join(','),
    deliveryIds: deliveryNotifications.map(n => n.id).join(','),
    orchestrationIds: orchestrationNotifications.map(n => n.id).join(','),
  });

  // SSE connection status
  const sseConnected = true; // Simplified - based on other notification hooks

  // Store refetch callbacks in a ref to prevent infinite loop from dependency changes
  // React Query refetch functions are recreated on every query state change, which would
  // trigger useEffect again if they were in the dependency array
  const refetchCallbacksRef = useRef({
    refetchActionQueue,
    refetchHealth,
    refetchExecutionProgress,
    refetchOrchestration,
  });

  // Store previous notification IDs to prevent infinite refetch loops
  const prevBatchNotificationsRef = useRef('');
  const prevDeliveryNotificationsRef = useRef('');
  const prevOrchestrationNotificationsRef = useRef('');

  // Update ref with latest callbacks on every render
  useEffect(() => {
    refetchCallbacksRef.current = {
      refetchActionQueue,
      refetchHealth,
      refetchExecutionProgress,
      refetchOrchestration,
    };
  });

  // Track the latest notification ID to prevent re-running on same notification
  // Use stringified ID array to create stable dependency that only changes when IDs actually change
  const batchIdsString = JSON.stringify(batchNotifications.map(n => n.id));
  const deliveryIdsString = JSON.stringify(deliveryNotifications.map(n => n.id));
  const orchestrationIdsString = JSON.stringify(orchestrationNotifications.map(n => n.id));

  console.log('📝 [Dashboard] Stringified ID arrays:', {
    batchIdsString,
    deliveryIdsString,
    orchestrationIdsString,
  });

  const latestBatchNotificationId = useMemo(() => {
    const result = batchNotifications.length === 0 ? '' : (batchNotifications[0]?.id || '');
    console.log('🧮 [Dashboard] latestBatchNotificationId useMemo recalculated:', {
      result,
      dependency: batchIdsString,
      notificationCount: batchNotifications.length,
    });
    return result;
  }, [batchIdsString]);

  const latestDeliveryNotificationId = useMemo(() => {
    const result = deliveryNotifications.length === 0 ? '' : (deliveryNotifications[0]?.id || '');
    console.log('🧮 [Dashboard] latestDeliveryNotificationId useMemo recalculated:', {
      result,
      dependency: deliveryIdsString,
      notificationCount: deliveryNotifications.length,
    });
    return result;
  }, [deliveryIdsString]);

  const latestOrchestrationNotificationId = useMemo(() => {
    const result = orchestrationNotifications.length === 0 ? '' : (orchestrationNotifications[0]?.id || '');
    console.log('🧮 [Dashboard] latestOrchestrationNotificationId useMemo recalculated:', {
      result,
      dependency: orchestrationIdsString,
      notificationCount: orchestrationNotifications.length,
    });
    return result;
  }, [orchestrationIdsString]);

  useEffect(() => {
    console.log('⚡ [Dashboard] batchNotifications useEffect triggered', {
      latestBatchNotificationId,
      prevValue: prevBatchNotificationsRef.current,
      hasChanged: latestBatchNotificationId !== prevBatchNotificationsRef.current,
      notificationCount: batchNotifications.length,
      firstNotification: batchNotifications[0],
    });

    if (latestBatchNotificationId &&
      latestBatchNotificationId !== prevBatchNotificationsRef.current) {
      console.log('🔥 [Dashboard] NEW batch notification detected, updating ref and refetching');
      prevBatchNotificationsRef.current = latestBatchNotificationId;
      const latest = batchNotifications[0];

      if (['batch_completed', 'batch_started'].includes(latest.event_type)) {
        console.log('🚀 [Dashboard] Triggering refetch for batch event:', latest.event_type);
        refetchCallbacksRef.current.refetchExecutionProgress();
        refetchCallbacksRef.current.refetchHealth();
      } else {
        console.log('⏭️  [Dashboard] Skipping refetch - event type not relevant:', latest.event_type);
      }
    }
  }, [latestBatchNotificationId]); // Only run when a NEW notification arrives

  useEffect(() => {
    console.log('⚡ [Dashboard] deliveryNotifications useEffect triggered', {
      latestDeliveryNotificationId,
      prevValue: prevDeliveryNotificationsRef.current,
      hasChanged: latestDeliveryNotificationId !== prevDeliveryNotificationsRef.current,
      notificationCount: deliveryNotifications.length,
      firstNotification: deliveryNotifications[0],
    });

    if (latestDeliveryNotificationId &&
      latestDeliveryNotificationId !== prevDeliveryNotificationsRef.current) {
      console.log('🔥 [Dashboard] NEW delivery notification detected, updating ref and refetching');
      prevDeliveryNotificationsRef.current = latestDeliveryNotificationId;
      const latest = deliveryNotifications[0];

      if (['delivery_received', 'delivery_overdue'].includes(latest.event_type)) {
        console.log('🚀 [Dashboard] Triggering refetch for delivery event:', latest.event_type);
        refetchCallbacksRef.current.refetchExecutionProgress();
        refetchCallbacksRef.current.refetchHealth();
      } else {
        console.log('⏭️  [Dashboard] Skipping refetch - event type not relevant:', latest.event_type);
      }
    }
  }, [latestDeliveryNotificationId]); // Only run when a NEW notification arrives

  useEffect(() => {
    console.log('⚡ [Dashboard] orchestrationNotifications useEffect triggered', {
      latestOrchestrationNotificationId,
      prevValue: prevOrchestrationNotificationsRef.current,
      hasChanged: latestOrchestrationNotificationId !== prevOrchestrationNotificationsRef.current,
      notificationCount: orchestrationNotifications.length,
      firstNotification: orchestrationNotifications[0],
    });

    if (latestOrchestrationNotificationId &&
      latestOrchestrationNotificationId !== prevOrchestrationNotificationsRef.current) {
      console.log('🔥 [Dashboard] NEW orchestration notification detected, updating ref and refetching');
      prevOrchestrationNotificationsRef.current = latestOrchestrationNotificationId;
      const latest = orchestrationNotifications[0];

      if (latest.event_type === 'orchestration_run_completed') {
        console.log('🚀 [Dashboard] Triggering refetch for orchestration event:', latest.event_type);
        refetchCallbacksRef.current.refetchOrchestration();
        refetchCallbacksRef.current.refetchActionQueue();
      } else {
        console.log('⏭️  [Dashboard] Skipping refetch - event type not relevant:', latest.event_type);
      }
    }
  }, [latestOrchestrationNotificationId]); // Only run when a NEW notification arrives

  // Mutations
  const approvePO = useApprovePurchaseOrder();
  const rejectPO = useRejectPurchaseOrder();
  const startBatch = useStartProductionBatch();
  const pauseBatch = usePauseProductionBatch();

  // Handlers
  const handleApprove = async (actionId: string) => {
    try {
      await approvePO.mutateAsync({ tenantId, poId: actionId });
      // Refetch to update UI
      refetchActionQueue();
      refetchHealth();
    } catch (error) {
      console.error('Error approving PO:', error);
    }
  };

  const handleReject = async (actionId: string, reason: string) => {
    try {
      await rejectPO.mutateAsync({ tenantId, poId: actionId, reason });
      // Refetch to update UI
      refetchActionQueue();
      refetchHealth();
    } catch (error) {
      console.error('Error rejecting PO:', error);
    }
  };

  const handleViewDetails = (actionId: string) => {
    // Open modal to show PO details in view mode
    setSelectedPOId(actionId);
    setPOModalMode('view');
    setIsPOModalOpen(true);
  };

  const handleModify = (actionId: string) => {
    // Open modal to edit PO details
    setSelectedPOId(actionId);
    setPOModalMode('edit');
    setIsPOModalOpen(true);
  };

  const handleStartBatch = async (batchId: string) => {
    try {
      await startBatch.mutateAsync({ tenantId, batchId });
      refetchTimeline();
      refetchHealth();
    } catch (error) {
      console.error('Error starting batch:', error);
    }
  };

  const handlePauseBatch = async (batchId: string) => {
    try {
      await pauseBatch.mutateAsync({ tenantId, batchId });
      refetchTimeline();
      refetchHealth();
    } catch (error) {
      console.error('Error pausing batch:', error);
    }
  };

  // Calculate configuration sections for setup flow
  const setupSections = useMemo(() => {
    // Create safe fallbacks for icons to prevent React error #310
    const SafePackageIcon = Package;
    const SafeUsersIcon = Users;
    const SafeBookOpenIcon = BookOpen;
    const SafeShieldIcon = Shield;

    // Validate that all icons are properly imported before using them
    const sections = [
      {
        id: 'inventory',
        title: t('dashboard:config.inventory', 'Inventory'),
        icon: SafePackageIcon,
        path: '/app/database/inventory',
        count: ingredients.length,
        minimum: 3,
        recommended: 10,
        isComplete: ingredients.length >= 3,
        description: t('dashboard:config.add_ingredients', 'Add at least {{count}} ingredients', { count: 3 }),
      },
      {
        id: 'suppliers',
        title: t('dashboard:config.suppliers', 'Suppliers'),
        icon: SafeUsersIcon,
        path: '/app/database/suppliers',
        count: suppliers.length,
        minimum: 1,
        recommended: 3,
        isComplete: suppliers.length >= 1,
        description: t('dashboard:config.add_supplier', 'Add your first supplier'),
      },
      {
        id: 'recipes',
        title: t('dashboard:config.recipes', 'Recipes'),
        icon: SafeBookOpenIcon,
        path: '/app/database/recipes',
        count: recipes.length,
        minimum: 1,
        recommended: 3,
        isComplete: recipes.length >= 1,
        description: t('dashboard:config.add_recipe', 'Create your first recipe'),
      },
      {
        id: 'quality',
        title: t('dashboard:config.quality', 'Quality Standards'),
        icon: SafeShieldIcon,
        path: '/app/operations/production/quality',
        count: qualityTemplates.length,
        minimum: 0,
        recommended: 2,
        isComplete: true, // Optional
        description: t('dashboard:config.add_quality', 'Add quality checks (optional)'),
      },
    ];

    return sections;
  }, [ingredients.length, suppliers.length, recipes.length, qualityTemplates.length, t]);

  // Calculate overall progress
  const { completedSections, totalSections, progressPercentage, criticalMissing, recommendedMissing } = useMemo(() => {
    // If data is still loading, use stored value as fallback to prevent flickering
    if (loadingIngredients || loadingSuppliers || loadingRecipes || loadingQuality) {
      return {
        completedSections: 0,
        totalSections: 4, // 4 required sections
        progressPercentage: setupProgressFromStorage, // Use stored value during loading
        criticalMissing: [],
        recommendedMissing: [],
      };
    }

    // Guard against undefined or invalid setupSections
    if (!setupSections || !Array.isArray(setupSections) || setupSections.length === 0) {
      return {
        completedSections: 0,
        totalSections: 0,
        progressPercentage: 100, // Default to 100% to avoid blocking dashboard
        criticalMissing: [],
        recommendedMissing: [],
      };
    }

    const requiredSections = setupSections.filter(s => s.id !== 'quality');
    const completed = requiredSections.filter(s => s.isComplete).length;
    const total = requiredSections.length;
    const percentage = total > 0 ? Math.round((completed / total) * 100) : 100;

    const critical = setupSections.filter(s => !s.isComplete && s.id !== 'quality');
    const recommended = setupSections.filter(s => s.count < s.recommended);

    // PHASE 1 OPTIMIZATION: Cache progress to localStorage for next page load
    try {
      localStorage.setItem(`setup_progress_${tenantId}`, percentage.toString());
    } catch {
      // Ignore storage errors
    }

    return {
      completedSections: completed,
      totalSections: total,
      progressPercentage: percentage,
      criticalMissing: critical,
      recommendedMissing: recommended,
    };
  }, [setupSections, tenantId, loadingIngredients, loadingSuppliers, loadingRecipes, loadingQuality, setupProgressFromStorage]);

  const handleRefreshAll = () => {
    refetchHealth();
    refetchOrchestration();
    refetchActionQueue();
    refetchExecutionProgress();
    refetchTimeline();
    refetchInsights();
  };

  const handleAddWizardComplete = (itemType: ItemType, data?: any) => {
    console.log('Item created:', itemType, data);
    // Refetch relevant data based on what was added
    handleRefreshAll();
  };

  // Keyboard shortcut for Quick Add (Cmd/Ctrl + K)
  useEffect(() => {
    const handleKeyDown = (event: KeyboardEvent) => {
      // Check for Cmd+K (Mac) or Ctrl+K (Windows/Linux)
      if ((event.metaKey || event.ctrlKey) && event.key === 'k') {
        event.preventDefault();
        setIsAddWizardOpen(true);
      }
    };

    window.addEventListener('keydown', handleKeyDown);
    return () => window.removeEventListener('keydown', handleKeyDown);
  }, []);

  // Demo tour auto-start logic - using ref to prevent infinite loops
  useEffect(() => {
    // Only check tour start on initial render to prevent infinite loops
    if (typeof window !== 'undefined') {
      // Ensure we don't run this effect multiple times by checking a flag
      const tourCheckDone = sessionStorage.getItem('dashboard_tour_check_done');

      if (!tourCheckDone) {
        sessionStorage.setItem('dashboard_tour_check_done', 'true');

        console.log('[Dashboard] Demo mode:', isDemoMode);
        const shouldStart = shouldStartTour();
        console.log('[Dashboard] Should start tour:', shouldStart);
        console.log('[Dashboard] SessionStorage demo_tour_should_start:', sessionStorage.getItem('demo_tour_should_start'));
        console.log('[Dashboard] SessionStorage demo_tour_start_step:', sessionStorage.getItem('demo_tour_start_step'));

        // Check if there's a tour intent from redirection (higher priority)
        const shouldStartFromRedirect = sessionStorage.getItem('demo_tour_should_start') === 'true';
        const redirectStartStep = parseInt(sessionStorage.getItem('demo_tour_start_step') || '0', 10);

        if (isDemoMode && (shouldStart || shouldStartFromRedirect)) {
          console.log('[Dashboard] Starting tour in 1.5s...');
          const timer = setTimeout(() => {
            console.log('[Dashboard] Executing startTour()');
            if (shouldStartFromRedirect) {
              // Start tour from the specific step that was intended
              startTour(redirectStartStep);
              // Clear the redirect intent
              sessionStorage.removeItem('demo_tour_should_start');
              sessionStorage.removeItem('demo_tour_start_step');
            } else {
              // Start tour normally (from beginning or resume)
              startTour();
              clearTourStartPending();
            }
          }, 1500);

          return () => clearTimeout(timer);
        }
      }
    }
  }, [isDemoMode]); // Run only once after initial render
  // Note: startTour removed from deps to prevent infinite loop - the effect guards with sessionStorage ensure it only runs once

  return (
    <div className="min-h-screen pb-20 md:pb-8 bg-[var(--bg-primary)]">
      {/* Mobile-optimized container */}
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
        {/* Header */}
        <div className="flex items-center justify-between mb-6">
          <div>
            <h1 className="text-3xl md:text-4xl font-bold text-[var(--text-primary)]">{t('dashboard:title')}</h1>
            <p className="mt-1 text-[var(--text-secondary)]">{t('dashboard:subtitle')}</p>
          </div>

          {/* Action Buttons */}
          <div className="flex items-center gap-3">
            <button
              onClick={handleRefreshAll}
              className="flex items-center gap-2 px-4 py-2 rounded-lg font-semibold transition-colors duration-200 border border-[var(--border-primary)] bg-[var(--bg-primary)] text-[var(--text-secondary)]"
            >
              <RefreshCw className="w-5 h-5" />
              <span className="hidden sm:inline">{t('common:actions.refresh')}</span>
            </button>

            {/* Unified Add Button with Keyboard Shortcut */}
            <button
              onClick={() => setIsAddWizardOpen(true)}
              className="group relative flex items-center gap-2 px-6 py-2.5 rounded-lg font-semibold transition-all duration-200 shadow-lg hover:shadow-xl hover:-translate-y-0.5 active:translate-y-0 bg-gradient-to-br from-[var(--color-primary)] to-[var(--color-primary-dark)] text-white"
              title={`Quick Add (${navigator.platform.includes('Mac') ? 'Cmd' : 'Ctrl'}+K)`}
            >
              <Plus className="w-5 h-5" />
              <span className="hidden sm:inline">{t('common:actions.add')}</span>
              <Sparkles className="w-4 h-4 opacity-80" />
              {/* Keyboard shortcut badge - shown on hover */}
              <span className="hidden lg:flex absolute -bottom-8 left-1/2 -translate-x-1/2 items-center gap-1 px-2 py-1 rounded text-xs font-mono opacity-0 group-hover:opacity-100 transition-opacity duration-200 whitespace-nowrap pointer-events-none bg-[var(--bg-primary)] text-[var(--text-secondary)] shadow-sm">
                <kbd className="px-1.5 py-0.5 rounded text-xs font-semibold bg-[var(--bg-tertiary)] border border-[var(--border-secondary)]">
                  {navigator.platform.includes('Mac') ? '⌘' : 'Ctrl'}
                </kbd>
                <span>+</span>
                <kbd className="px-1.5 py-0.5 rounded text-xs font-semibold bg-[var(--bg-tertiary)] border border-[var(--border-secondary)]">
                  K
                </kbd>
              </span>
            </button>
          </div>
        </div>

        {/* Setup Flow - Three States */}
        {loadingIngredients || loadingSuppliers || loadingRecipes || loadingQuality || !isReady ? (
          /* Loading state - only show spinner until first priority data (health) is ready */
          <div className="flex items-center justify-center py-12">
            <div className="animate-spin rounded-full h-12 w-12 border-b-2" style={{ borderColor: 'var(--color-primary)' }}></div>
          </div>
        ) : progressPercentage < 50 ? (
          /* STATE 1: Critical Missing (<50%) - Full-page blocker */
          <SetupWizardBlocker
            criticalSections={setupSections}
          />
        ) : (
          /* STATE 2 & 3: Dashboard with optional banner */
          <>
            {/* Optional Setup Banner (50-99%) - Collapsible, Dismissible */}
            {progressPercentage < 100 && recommendedMissing.length > 0 && (
              <CollapsibleSetupBanner
                remainingSections={recommendedMissing}
                progressPercentage={progressPercentage}
              />
            )}

            {/* Main Dashboard Layout */}
            <div className="space-y-6">
              {/* SECTION 1: Glanceable Health Hero (Traffic Light) - PRIORITY 1 */}
              <div data-tour="dashboard-stats">
                {healthLoading ? (
                  <div className="bg-[var(--bg-primary)] rounded-lg border border-[var(--border-primary)] p-6 animate-pulse">
                    <div className="h-24 bg-[var(--bg-secondary)] rounded"></div>
                  </div>
                ) : (
                  <GlanceableHealthHero
                    healthStatus={healthStatus!}
                    loading={false}
                    urgentActionCount={actionQueue?.urgentCount || 0}
                  />
                )}
              </div>

              {/* SECTION 2: What Needs Your Attention (Unified Action Queue) - PRIORITY 2 */}
              <div data-tour="pending-po-approvals">
                {actionQueueLoading ? (
                  <div className="bg-[var(--bg-primary)] rounded-lg border border-[var(--border-primary)] p-6 animate-pulse">
                    <div className="space-y-4">
                      <div className="h-8 bg-[var(--bg-secondary)] rounded w-1/3"></div>
                      <div className="h-32 bg-[var(--bg-secondary)] rounded"></div>
                    </div>
                  </div>
                ) : (
                  <UnifiedActionQueueCard
                    actionQueue={actionQueue!}
                    loading={false}
                    tenantId={tenantId}
                  />
                )}
              </div>

              {/* SECTION 3: Execution Progress Tracker (Plan vs Actual) - PRIORITY 3 */}
              <div data-tour="execution-progress">
                {executionProgressLoading ? (
                  <div className="bg-[var(--bg-primary)] rounded-lg border border-[var(--border-primary)] p-6 animate-pulse">
                    <div className="space-y-4">
                      <div className="h-8 bg-[var(--bg-secondary)] rounded w-1/2"></div>
                      <div className="h-24 bg-[var(--bg-secondary)] rounded"></div>
                    </div>
                  </div>
                ) : (
                  <ExecutionProgressTracker
                    progress={executionProgress}
                    loading={false}
                  />
                )}
              </div>

              {/* SECTION 4: Intelligent System Summary - Unified AI Impact & Orchestration */}
              <div data-tour="intelligent-system-summary">
                <IntelligentSystemSummaryCard
                  orchestrationSummary={orchestrationSummary!}
                  orchestrationLoading={orchestrationLoading}
                  onWorkflowComplete={handleRefreshAll}
                />
              </div>

              {/* SECTION 6: Quick Action Links */}
              <div className="rounded-xl shadow-lg p-6 border border-[var(--border-primary)] bg-[var(--bg-primary)]">
                <h2 className="text-xl font-bold mb-4 text-[var(--text-primary)]">{t('dashboard:sections.quick_actions')}</h2>
                <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
                  <button
                    onClick={() => navigate('/app/operations/procurement')}
                    className="flex items-center justify-between p-4 rounded-lg transition-colors duration-200 group bg-[var(--bg-tertiary)] border-l-4 border-l-[var(--color-info)]"
                  >
                    <span className="font-semibold text-[var(--text-primary)]">{t('dashboard:quick_actions.view_orders')}</span>
                    <ExternalLink className="w-5 h-5 group-hover:translate-x-1 transition-transform duration-200 text-[var(--color-info)]" />
                  </button>

                  <button
                    onClick={() => navigate('/app/operations/production')}
                    className="flex items-center justify-between p-4 rounded-lg transition-colors duration-200 group bg-[var(--bg-tertiary)] border-l-4 border-l-[var(--color-success)]"
                  >
                    <span className="font-semibold text-[var(--text-primary)]">{t('dashboard:quick_actions.view_production')}</span>
                    <ExternalLink className="w-5 h-5 group-hover:translate-x-1 transition-transform duration-200 text-[var(--color-success)]" />
                  </button>

                  <button
                    onClick={() => navigate('/app/database/inventory')}
                    className="flex items-center justify-between p-4 rounded-lg transition-colors duration-200 group bg-[var(--bg-tertiary)] border-l-4 border-l-[var(--color-secondary)]"
                  >
                    <span className="font-semibold text-[var(--text-primary)]">{t('dashboard:quick_actions.view_inventory')}</span>
                    <ExternalLink className="w-5 h-5 group-hover:translate-x-1 transition-transform duration-200 text-[var(--color-secondary)]" />
                  </button>

                  <button
                    onClick={() => navigate('/app/database/suppliers')}
                    className="flex items-center justify-between p-4 rounded-lg transition-colors duration-200 group bg-[var(--bg-tertiary)] border-l-4 border-l-[var(--color-warning)]"
                  >
                    <span className="font-semibold text-[var(--text-primary)]">{t('dashboard:quick_actions.view_suppliers')}</span>
                    <ExternalLink className="w-5 h-5 group-hover:translate-x-1 transition-transform duration-200 text-[var(--color-warning)]" />
                  </button>
                </div>
              </div>
            </div>
          </>
        )}
      </div>

      {/* Mobile-friendly bottom padding */}
      <div className="h-20 md:hidden"></div>

      {/* Unified Add Wizard */}
      <UnifiedAddWizard
        isOpen={isAddWizardOpen}
        onClose={() => setIsAddWizardOpen(false)}
        onComplete={handleAddWizardComplete}
      />

      {/* Purchase Order Details Modal - Using Unified Component */}
      {selectedPOId && (
        <UnifiedPurchaseOrderModal
          poId={selectedPOId}
          tenantId={tenantId}
          isOpen={isPOModalOpen}
          initialMode={poModalMode}
          onClose={() => {
            setIsPOModalOpen(false);
            setSelectedPOId(null);
            setPOModalMode('view');
            handleRefreshAll();
          }}
          onApprove={handleApprove}
          onReject={handleReject}
          showApprovalActions={true}
        />
      )}
    </div>
  );
}

/**
 * Main Dashboard Page
 * Conditionally renders either the Enterprise Dashboard or the Bakery Dashboard
 * based on the user's subscription tier.
 */
export function DashboardPage() {
  const { subscriptionInfo } = useSubscription();
  const { currentTenant } = useTenant();
  const { plan, loading } = subscriptionInfo;
  const tenantId = currentTenant?.id;

  if (loading) {
    return (
      <div className="flex items-center justify-center min-h-screen">
        <div className="animate-spin rounded-full h-12 w-12 border-b-2" style={{ borderColor: 'var(--color-primary)' }}></div>
      </div>
    );
  }

  if (plan === SUBSCRIPTION_TIERS.ENTERPRISE) {
    return <EnterpriseDashboardPage tenantId={tenantId} />;
  }

  return <BakeryDashboard />;
}

export default DashboardPage;