'use client'

import { useState, useEffect } from 'react'
import Sidebar from '../components/Sidebar'
import Executor from '../components/Executor'
import Miscellaneous from '../components/Miscellaneous'
import Dashboard from '../components/Dashboard'
import Settings from '../components/Settings'
import SnowEffect from '../components/SnowEffect'
import ScriptHub from '../components/ScriptHub'
import Games from '../components/Games'
import Profile from '../components/Profile'

export default function DashboardPage() {
  const [tab, setTab] = useState('dashboard')
  const [fading, setFading] = useState(false)
  const [shown, setShown] = useState('dashboard')
  const [mounted, setMounted] = useState(false)
  const [settings, setSettings] = useState(() => {
    if (typeof window !== 'undefined') {
      const saved = localStorage.getItem('settings')
      if (saved) {
        try {
          return JSON.parse(saved)
        } catch (e) {
          return null
        }
      }
    }
    return null
  })

  useEffect(() => {
    setMounted(true)
    if (typeof window !== 'undefined') {
      const saved = localStorage.getItem('activeMainTab')
      if (saved) {
        setTab(saved)
        setShown(saved)
      }
    }
  }, [])

  useEffect(() => {
    // handleSettingsChange
    const handleSettingsChange = (e) => {
      setSettings(e.detail)
    }

    window.addEventListener('settingsChanged', handleSettingsChange)
    return () => {
      window.removeEventListener('settingsChanged', handleSettingsChange)
    }
  }, [])

  // handleTabChange
  useEffect(() => {
    const handleTabChange = (e) => {
      setTab(e.detail)
    }
    
    window.addEventListener('changeTab', handleTabChange)
    return () => window.removeEventListener('changeTab', handleTabChange)
  }, [])

  useEffect(() => {
    if (typeof window !== 'undefined') {
      localStorage.setItem('activeMainTab', tab)
    }
  }, [tab])

  useEffect(() => {
    if (tab !== shown) {
      setFading(true)
      
      const t1 = setTimeout(() => {
        setShown(tab)
      }, 150)

      const t2 = setTimeout(() => {
        setFading(false)
      }, 150)

      return () => {
        clearTimeout(t1)
        clearTimeout(t2)
      }
    }
  }, [tab, shown])

  const render = () => {
    switch (shown) {
      case 'dashboard':
        return <Dashboard />
      case 'executor':
        return <Executor />
      case 'scripthub':
        return <ScriptHub />
      case 'games':
        return <Games />
      case 'miscellaneous':
        return <Miscellaneous />
      case 'settings':
        return <Settings />
      case 'profile':
        return <Profile />
      default:
        return null
    }
  }

  const compactSidebar = settings?.interface?.compactSidebar || false
  const sidebarWidth = compactSidebar ? 200 : 280
  const enableAnimations = settings?.interface?.enableAnimations !== false
  const showSnowEffect = settings?.interface?.showSnowEffect || false

  return (
    <div className="flex min-h-screen" style={{ backgroundColor: '#000000' }}>
      {mounted && showSnowEffect && <SnowEffect />}
      <Sidebar tab={tab} setTab={setTab} />
      
      <main 
        className="flex-1"
        style={{
          marginLeft: `${sidebarWidth}px`,
          transition: enableAnimations ? 'margin-left 300ms ease-out' : 'none',
        }}
      >
        {mounted && (
          <>
            <div 
              className="transition-opacity duration-300"
              style={{ 
                opacity: fading ? 0 : (shown === 'dashboard' ? 1 : 0),
                display: shown === 'dashboard' ? 'block' : 'none',
                transition: enableAnimations ? 'opacity 300ms' : 'none',
              }}
            >
              <Dashboard />
            </div>

            <div 
              className="transition-opacity duration-300"
              style={{ 
                opacity: fading ? 0 : (shown === 'executor' ? 1 : 0),
                display: shown === 'executor' ? 'block' : 'none',
                transition: enableAnimations ? 'opacity 300ms' : 'none',
              }}
            >
              <Executor />
            </div>

            <div 
              className="transition-opacity duration-300"
              style={{ 
                opacity: fading ? 0 : (shown === 'miscellaneous' ? 1 : 0),
                display: shown === 'miscellaneous' ? 'block' : 'none',
                transition: enableAnimations ? 'opacity 300ms' : 'none',
              }}
            >
              <Miscellaneous />
            </div>

            <div 
              className="transition-opacity duration-300"
              style={{ 
                opacity: fading ? 0 : (shown === 'settings' ? 1 : 0),
                display: shown === 'settings' ? 'block' : 'none',
                transition: enableAnimations ? 'opacity 300ms' : 'none',
              }}
            >
              <Settings />
            </div>

            <div 
              className="transition-opacity duration-300"
              style={{ 
                opacity: fading ? 0 : (shown === 'scripthub' ? 1 : 0),
                display: shown === 'scripthub' ? 'block' : 'none',
                transition: enableAnimations ? 'opacity 300ms' : 'none',
              }}
            >
              <ScriptHub />
            </div>

            <div 
              className="transition-opacity duration-300"
              style={{ 
                opacity: fading ? 0 : (shown === 'games' ? 1 : 0),
                display: shown === 'games' ? 'block' : 'none',
                transition: enableAnimations ? 'opacity 300ms' : 'none',
              }}
            >
              <Games />
            </div>

            <div 
              className="transition-opacity duration-300"
              style={{ 
                opacity: fading ? 0 : (shown === 'profile' ? 1 : 0),
                display: shown === 'profile' ? 'block' : 'none',
                transition: enableAnimations ? 'opacity 300ms' : 'none',
              }}
            >
              <Profile />
            </div>
          </>
        )}
        
        {shown !== 'dashboard' && shown !== 'executor' && shown !== 'miscellaneous' && shown !== 'settings' && shown !== 'scripthub' && shown !== 'games' && shown !== 'profile' && (
          <div className="p-6">
            <div className="max-w-[1400px] mx-auto">
              <div 
                className="rounded-lg border p-6 transition-opacity duration-300"
                style={{ 
                  backgroundColor: '#000000',
                  borderColor: '#1a1a1a',
                  opacity: fading ? 0 : 1,
                  transition: enableAnimations ? 'opacity 300ms' : 'none',
                }}
              >
                {render()}
              </div>
            </div>
          </div>
        )}
      </main>
    </div>
  )
}
