console.log('[APP_ROUTER] 🚀 App.router.tsx loading - BEGIN')
console.time('[APP_ROUTER] Component initialization')

import { useState, Suspense, useEffect } from 'react'
console.log('[APP_ROUTER] ✅ React hooks imported')

import { BrowserRouter, useLocation } from 'react-router-dom'
console.log('[APP_ROUTER] ✅ React Router imported')

import { AppHeader } from '@/components/organisms'
console.log('[APP_ROUTER] ✅ Header components imported')

import { LoadingFallback } from '@/components/molecules'
console.log('[APP_ROUTER] ✅ LoadingFallback imported')

import { useProjectState } from '@/hooks/use-project-state'
import { useFileOperations } from '@/hooks/use-file-operations'
import { useKeyboardShortcuts } from '@/hooks/use-keyboard-shortcuts'
import { useSeedData } from '@/hooks/data/use-seed-data'
import { useRouterNavigation } from '@/hooks/use-router-navigation'
console.log('[APP_ROUTER] ✅ Custom hooks imported')

import { getPageShortcuts } from '@/config/page-loader'
console.log('[APP_ROUTER] ✅ Page config imported')

import { toast } from 'sonner'
console.log('[APP_ROUTER] ✅ Toast imported')

import { DialogRegistry, PWARegistry, preloadCriticalComponents } from '@/lib/component-registry'
console.log('[APP_ROUTER] ✅ Component registry imported')

import { RouterProvider } from '@/router'
console.log('[APP_ROUTER] ✅ Router provider imported')

const { GlobalSearch, KeyboardShortcutsDialog, PreviewDialog } = DialogRegistry
const { PWAInstallPrompt, PWAUpdatePrompt, PWAStatusBar } = PWARegistry
console.log('[APP_ROUTER] ✅ Dialog and PWA components registered')

console.log('[APP_ROUTER] 🎯 App component function executing')

function AppLayout() {
  console.log('[APP_ROUTER] 🏗️ AppLayout component rendering')
  const location = useLocation()
  const { currentPage, navigateToPage } = useRouterNavigation()
  
  console.log('[APP_ROUTER] 📍 Current location:', location.pathname)
  console.log('[APP_ROUTER] 📄 Current page:', currentPage)
  
  console.log('[APP_ROUTER] 📊 Initializing project state hook')
  const projectState = useProjectState()
  console.log('[APP_ROUTER] ✅ Project state initialized')
  
  const {
    files,
    models,
    components,
    componentTrees,
    workflows,
    lambdas,
    theme,
    playwrightTests,
    storybookStories,
    unitTests,
    flaskConfig,
    nextjsConfig,
    npmSettings,
    featureToggles,
    setFiles,
    setModels,
    setComponents,
    setComponentTrees,
    setWorkflows,
    setLambdas,
    setTheme,
    setPlaywrightTests,
    setStorybookStories,
    setUnitTests,
    setFlaskConfig,
    setNextjsConfig,
    setNpmSettings,
    setFeatureToggles,
  } = projectState

  console.log('[APP_ROUTER] 📁 Initializing file operations')
  const fileOps = useFileOperations(files, setFiles)
  console.log('[APP_ROUTER] ✅ File operations initialized')
  
  const { activeFileId, setActiveFileId, handleFileChange, handleFileAdd, handleFileClose } = fileOps

  console.log('[APP_ROUTER] 💾 Initializing state variables')
  const [searchOpen, setSearchOpen] = useState(false)
  const [shortcutsOpen, setShortcutsOpen] = useState(false)
  const [previewOpen, setPreviewOpen] = useState(false)
  const [lastSaved] = useState<number | null>(Date.now())
  const [errorCount] = useState(0)
  console.log('[APP_ROUTER] ✅ State variables initialized')

  const shortcuts = getPageShortcuts(featureToggles)
  console.log('[APP_ROUTER] ⌨️ Keyboard shortcuts configured:', shortcuts.length)

  console.log('[APP_ROUTER] ⌨️ Setting up keyboard shortcuts')
  useKeyboardShortcuts([
    ...shortcuts.map(s => ({
      key: s.key,
      ctrl: s.ctrl,
      shift: s.shift,
      description: s.description,
      action: () => {
        console.log('[APP_ROUTER] ⌨️ Shortcut triggered, navigating to:', s.action)
        navigateToPage(s.action)
      }
    })),
    { 
      key: 'k', 
      ctrl: true, 
      description: 'Search', 
      action: () => {
        console.log('[APP_ROUTER] ⌨️ Search shortcut triggered')
        setSearchOpen(true)
      }
    },
    { 
      key: '/', 
      ctrl: true, 
      description: 'Shortcuts', 
      action: () => {
        console.log('[APP_ROUTER] ⌨️ Shortcuts dialog triggered')
        setShortcutsOpen(true)
      }
    },
    { 
      key: 'p', 
      ctrl: true, 
      description: 'Preview', 
      action: () => {
        console.log('[APP_ROUTER] ⌨️ Preview shortcut triggered')
        setPreviewOpen(true)
      }
    },
  ])
  console.log('[APP_ROUTER] ✅ Keyboard shortcuts configured')

  const getCurrentProject = () => ({
    name: nextjsConfig.appName,
    files,
    models,
    components,
    componentTrees,
    workflows,
    lambdas,
    theme,
    playwrightTests,
    storybookStories,
    unitTests,
    flaskConfig,
    nextjsConfig,
    npmSettings,
    featureToggles,
  })

  const handleProjectLoad = (project: any) => {
    console.log('[APP_ROUTER] 📦 Loading project:', project.name)
    if (project.files) setFiles(project.files)
    if (project.models) setModels(project.models)
    if (project.components) setComponents(project.components)
    if (project.componentTrees) setComponentTrees(project.componentTrees)
    if (project.workflows) setWorkflows(project.workflows)
    if (project.lambdas) setLambdas(project.lambdas)
    if (project.theme) setTheme(project.theme)
    if (project.playwrightTests) setPlaywrightTests(project.playwrightTests)
    if (project.storybookStories) setStorybookStories(project.storybookStories)
    if (project.unitTests) setUnitTests(project.unitTests)
    if (project.flaskConfig) setFlaskConfig(project.flaskConfig)
    if (project.nextjsConfig) setNextjsConfig(project.nextjsConfig)
    if (project.npmSettings) setNpmSettings(project.npmSettings)
    if (project.featureToggles) setFeatureToggles(project.featureToggles)
    toast.success('Project loaded')
    console.log('[APP_ROUTER] ✅ Project loaded successfully')
  }

  useEffect(() => {
    console.log('[APP_ROUTER] 📍 Route changed to:', location.pathname, '- Page:', currentPage)
  }, [location, currentPage])

  console.log('[APP_ROUTER] 🎨 Rendering AppLayout UI')
  
  return (
    <div className="h-screen flex flex-col bg-background">
      <Suspense fallback={<div className="h-1 bg-primary animate-pulse" />}>
        <PWAStatusBar />
      </Suspense>
      <Suspense fallback={null}>
        <PWAUpdatePrompt />
      </Suspense>
      <AppHeader
        activeTab={currentPage}
        onTabChange={navigateToPage}
        featureToggles={featureToggles}
        errorCount={errorCount}
        lastSaved={lastSaved}
        currentProject={getCurrentProject()}
        onProjectLoad={handleProjectLoad}
        onSearch={() => {
          console.log('[APP_ROUTER] 🔍 Search opened')
          setSearchOpen(true)
        }}
        onShowShortcuts={() => {
          console.log('[APP_ROUTER] ⌨️ Shortcuts dialog opened')
          setShortcutsOpen(true)
        }}
        onGenerateAI={() => {
          console.log('[APP_ROUTER] 🤖 AI generation requested')
          toast.info('AI generation coming soon')
        }}
        onExport={() => {
          console.log('[APP_ROUTER] 📤 Export requested')
          toast.info('Export coming soon')
        }}
        onPreview={() => {
          console.log('[APP_ROUTER] 👁️ Preview opened')
          setPreviewOpen(true)
        }}
        onShowErrors={() => {
          console.log('[APP_ROUTER] ⚠️ Navigating to errors page')
          navigateToPage('errors')
        }}
      />
      <div className="flex-1 overflow-hidden">
        <RouterProvider 
          featureToggles={featureToggles}
          stateContext={{
            files,
            models,
            components,
            componentTrees,
            workflows,
            lambdas,
            theme,
            playwrightTests,
            storybookStories,
            unitTests,
            flaskConfig,
            nextjsConfig,
            npmSettings,
            featureToggles,
            activeFileId,
          }}
          actionContext={{
            handleFileChange,
            setActiveFileId,
            handleFileClose,
            handleFileAdd,
            setModels,
            setComponents,
            setComponentTrees,
            setWorkflows,
            setLambdas,
            setTheme,
            setPlaywrightTests,
            setStorybookStories,
            setUnitTests,
            setFlaskConfig,
            setNextjsConfig,
            setNpmSettings,
            setFeatureToggles,
          }}
        />
      </div>

      <Suspense fallback={null}>
        <GlobalSearch
          open={searchOpen}
          onOpenChange={setSearchOpen}
          files={files}
          models={models}
          components={components}
          componentTrees={componentTrees}
          workflows={workflows}
          lambdas={lambdas}
          playwrightTests={playwrightTests}
          storybookStories={storybookStories}
          unitTests={unitTests}
          onNavigate={(page) => {
            console.log('[APP_ROUTER] 🔍 Search navigation to:', page)
            navigateToPage(page)
          }}
          onFileSelect={(fileId) => {
            console.log('[APP_ROUTER] 📄 File selected from search:', fileId)
            setActiveFileId(fileId)
            navigateToPage('code')
          }}
        />
      </Suspense>

      <Suspense fallback={null}>
        <KeyboardShortcutsDialog open={shortcutsOpen} onOpenChange={setShortcutsOpen} />
      </Suspense>
      <Suspense fallback={null}>
        <PreviewDialog open={previewOpen} onOpenChange={setPreviewOpen} />
      </Suspense>
      <Suspense fallback={null}>
        <PWAInstallPrompt />
      </Suspense>
    </div>
  )
}

function App() {
  console.log('[APP_ROUTER] 🔧 Initializing App component')
  console.time('[APP_ROUTER] App render')
  
  console.log('[APP_ROUTER] 🌱 Initializing seed data hook')
  const { loadSeedData } = useSeedData()
  const projectState = useProjectState()
  const { featureToggles, files, setFiles, ...restState } = projectState
  console.log('[APP_ROUTER] ✅ Hooks initialized')

  console.log('[APP_ROUTER] 📁 Initializing file operations for router context')
  const fileOps = useFileOperations(files, setFiles)
  
  const [appReady, setAppReady] = useState(false)
  console.log('[APP_ROUTER] 💾 App ready state:', appReady)

  console.log('[APP_ROUTER] ⏰ Setting up initialization effect')
  useEffect(() => {
    console.log('[APP_ROUTER] 🚀 Initialization effect triggered')
    console.time('[APP_ROUTER] Seed data loading')
    
    const timer = setTimeout(() => {
      console.log('[APP_ROUTER] ⏱️ Fallback timer triggered (100ms)')
      setAppReady(true)
    }, 100)
    
    console.log('[APP_ROUTER] 📥 Starting seed data load')
    loadSeedData()
      .then(() => {
        console.log('[APP_ROUTER] ✅ Seed data loaded successfully')
      })
      .catch(err => {
        console.error('[APP_ROUTER] ❌ Seed data loading failed:', err)
      })
      .finally(() => {
        console.log('[APP_ROUTER] 🏁 Seed data loading complete')
        clearTimeout(timer)
        setAppReady(true)
        console.timeEnd('[APP_ROUTER] Seed data loading')
        console.log('[APP_ROUTER] ✅ App marked as ready')
        
        console.log('[APP_ROUTER] 🚀 Preloading critical components')
        preloadCriticalComponents()
      })

    return () => {
      console.log('[APP_ROUTER] 🧹 Cleaning up initialization effect')
      clearTimeout(timer)
    }
  }, [loadSeedData])

  const stateContext = {
    files,
    ...restState,
    activeFileId: fileOps.activeFileId,
  }

  const actionContext = {
    handleFileChange: fileOps.handleFileChange,
    setActiveFileId: fileOps.setActiveFileId,
    handleFileClose: fileOps.handleFileClose,
    handleFileAdd: fileOps.handleFileAdd,
    setFiles,
    ...Object.fromEntries(
      Object.entries(restState).filter(([key]) => key.startsWith('set'))
    ),
  }

  console.log('[APP_ROUTER] 🎨 Rendering App component UI')
  console.log('[APP_ROUTER] App state - appReady:', appReady)
  console.timeEnd('[APP_ROUTER] App render')
  
  if (!appReady) {
    console.log('[APP_ROUTER] ⏳ App not ready, showing loading screen')
    return (
      <div className="fixed inset-0 bg-background z-50 flex items-center justify-center">
        <div className="flex flex-col items-center gap-4">
          <div className="w-12 h-12 border-4 border-primary border-t-transparent rounded-full animate-spin" />
          <p className="text-sm text-muted-foreground">Loading CodeForge...</p>
        </div>
      </div>
    )
  }

  console.log('[APP_ROUTER] ✅ App ready, rendering router')
  return (
    <BrowserRouter>
      <AppLayout />
    </BrowserRouter>
  )
}

console.log('[APP_ROUTER] ✅ App component defined')
console.timeEnd('[APP_ROUTER] Component initialization')

export default App
