import React, { useState, useEffect } from 'react'
import {
  Tabs,
  TabsContent,
  TabsList,
  TabsTrigger,
} from './components/CustomTabs'
import { useGameTick } from './hooks/useGameTick'
import Field from './components/Field'
import Warehouse from './components/Warehouse'
import Market from './components/Market'
import Temple from './components/Temple'
import { ActionCooldown } from './components/ActionCooldown'
import { useSaveSystem } from './store/useSaveSystem'
import { Console } from './components/Console'
import { GodModal } from './components/GodModal'

const appContainerStyle: React.CSSProperties = {
  maxWidth: '1200px',
  margin: '0 auto',
  padding: '2rem',
}

const tabsListStyles: React.CSSProperties = {
  display: 'grid',
  width: '100%',
  gridTemplateColumns: 'repeat(4, 1fr)',
}

function App() {
  useGameTick()
  useSaveSystem()
  const [isGodModalOpen, setIsGodModalOpen] = useState(false)

  useEffect(() => {
    const handleKeyPress = (event: KeyboardEvent) => {
      if (event.key.toLowerCase() === 'g') {
        setIsGodModalOpen(prev => !prev)
      }
    }

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

  return (
    <div>
      <ActionCooldown />
      <div style={appContainerStyle}>
        <Tabs defaultValue="fields">
          <TabsList style={tabsListStyles}>
            <TabsTrigger value="fields">Fields</TabsTrigger>
            <TabsTrigger value="warehouse">Warehouse</TabsTrigger>
            <TabsTrigger value="market">Market</TabsTrigger>
            <TabsTrigger value="temple">Temple</TabsTrigger>
          </TabsList>
          <TabsContent value="fields">
            <Field />
          </TabsContent>
          <TabsContent value="warehouse">
            <Warehouse />
          </TabsContent>
          <TabsContent value="market">
            <Market />
          </TabsContent>
          <TabsContent value="temple">
            <Temple />
          </TabsContent>
        </Tabs>
        <Console />
      </div>
      {isGodModalOpen && <GodModal onClose={() => setIsGodModalOpen(false)} />}
    </div>
  )
}

export default App