import { useState } from 'react';
import { useGameState } from './hooks/useGameState';
import { ClickButton } from './components/ClickButton';
import { UpgradePanel } from './components/UpgradePanel';
import { StatsPanel } from './components/StatsPanel';
import { AchievementsPanel } from './components/AchievementsPanel';
import { formatNumber } from './utils/formatNumber';

export function App() {
  const { 
    gameState, 
    floatingNumbers, 
    handleClick, 
    buyUpgrade, 
    getUpgradeCost,
    resetGame 
  } = useGameState();
  
  const [showResetConfirm, setShowResetConfirm] = useState(false);
  const [activeTab, setActiveTab] = useState<'upgrades' | 'achievements'>('upgrades');

  return (
    <div className="min-h-screen bg-gradient-to-br from-gray-900 via-purple-900 to-gray-900 text-white overflow-hidden">
      {/* Animated background */}
      <div className="fixed inset-0 overflow-hidden pointer-events-none">
        <div className="absolute -top-40 -right-40 w-80 h-80 bg-purple-500/20 rounded-full blur-3xl animate-pulse" />
        <div className="absolute -bottom-40 -left-40 w-80 h-80 bg-pink-500/20 rounded-full blur-3xl animate-pulse" style={{ animationDelay: '1s' }} />
        <div className="absolute top-1/2 left-1/2 w-96 h-96 bg-blue-500/10 rounded-full blur-3xl animate-pulse" style={{ animationDelay: '2s' }} />
      </div>
      
      {/* Main content */}
      <div className="relative z-10 min-h-screen flex flex-col">
        {/* Header */}
        <header className="p-4 border-b border-purple-500/30 bg-gray-900/50 backdrop-blur-sm">
          <div className="max-w-7xl mx-auto flex items-center justify-between">
            <div>
              <h1 className="text-2xl md:text-3xl font-bold bg-gradient-to-r from-purple-400 via-pink-400 to-red-400 bg-clip-text text-transparent">
                Generic Clicker 2.0
              </h1>
              <p className="text-sm text-gray-400">The ultimate clicking experience™</p>
            </div>
            
            <div className="flex items-center gap-4">
              {/* Points display */}
              <div className="text-right">
                <p className="text-3xl md:text-4xl font-bold text-yellow-400">
                  {formatNumber(gameState.points)}
                </p>
                <p className="text-xs text-gray-400">
                  +{formatNumber(gameState.pointsPerSecond * gameState.multiplier)}/sec
                </p>
              </div>
              
              {/* Reset button */}
              <button
                onClick={() => setShowResetConfirm(true)}
                className="p-2 rounded-lg bg-red-900/50 border border-red-500/50 hover:bg-red-800/50 transition-colors"
                title="Reset Game"
              >
                🔄
              </button>
            </div>
          </div>
        </header>
        
        {/* Game area */}
        <main className="flex-1 p-4 max-w-7xl mx-auto w-full">
          <div className="grid grid-cols-1 lg:grid-cols-3 gap-4 h-full">
            {/* Left panel - Stats */}
            <div className="lg:col-span-1 space-y-4">
              <StatsPanel 
                points={gameState.points}
                totalPoints={gameState.totalPoints}
                totalClicks={gameState.totalClicks}
                clickPower={gameState.clickPower}
                pointsPerSecond={gameState.pointsPerSecond}
                multiplier={gameState.multiplier}
              />
              
              {/* Mobile tabs */}
              <div className="lg:hidden flex gap-2">
                <button
                  onClick={() => setActiveTab('upgrades')}
                  className={`flex-1 py-2 rounded-lg font-semibold transition-colors ${
                    activeTab === 'upgrades' 
                      ? 'bg-purple-600 text-white' 
                      : 'bg-gray-800 text-gray-400'
                  }`}
                >
                  🛒 Upgrades
                </button>
                <button
                  onClick={() => setActiveTab('achievements')}
                  className={`flex-1 py-2 rounded-lg font-semibold transition-colors ${
                    activeTab === 'achievements' 
                      ? 'bg-purple-600 text-white' 
                      : 'bg-gray-800 text-gray-400'
                  }`}
                >
                  🏆 Achievements
                </button>
              </div>
            </div>
            
            {/* Center - Click button */}
            <div className="lg:col-span-1 flex items-center justify-center py-8 lg:py-0">
              <ClickButton 
                onClick={handleClick}
                floatingNumbers={floatingNumbers}
                clickPower={gameState.clickPower}
                multiplier={gameState.multiplier}
              />
            </div>
            
            {/* Right panel - Upgrades/Achievements */}
            <div className="lg:col-span-1 space-y-4">
              {/* Desktop: show both */}
              <div className="hidden lg:block h-[calc(100vh-250px)]">
                <UpgradePanel 
                  upgrades={gameState.upgrades}
                  points={gameState.points}
                  getCost={getUpgradeCost}
                  onBuy={buyUpgrade}
                />
              </div>
              
              {/* Mobile: tabbed */}
              <div className="lg:hidden">
                {activeTab === 'upgrades' ? (
                  <UpgradePanel 
                    upgrades={gameState.upgrades}
                    points={gameState.points}
                    getCost={getUpgradeCost}
                    onBuy={buyUpgrade}
                  />
                ) : (
                  <AchievementsPanel achievements={gameState.achievements} />
                )}
              </div>
            </div>
          </div>
          
          {/* Desktop achievements - below main area */}
          <div className="hidden lg:block mt-4">
            <AchievementsPanel achievements={gameState.achievements} />
          </div>
        </main>
        
        {/* Footer */}
        <footer className="p-4 text-center text-gray-500 text-sm border-t border-purple-500/20">
          Game auto-saves every 5 seconds 💾
        </footer>
      </div>
      
      {/* Reset confirmation modal */}
      {showResetConfirm && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm">
          <div className="bg-gray-800 rounded-2xl p-6 border border-purple-500/50 max-w-sm mx-4">
            <h3 className="text-xl font-bold text-white mb-2">Reset Game?</h3>
            <p className="text-gray-400 mb-6">
              This will delete all your progress. Are you sure?
            </p>
            <div className="flex gap-3">
              <button
                onClick={() => setShowResetConfirm(false)}
                className="flex-1 py-2 rounded-lg bg-gray-700 hover:bg-gray-600 transition-colors"
              >
                Cancel
              </button>
              <button
                onClick={() => {
                  resetGame();
                  setShowResetConfirm(false);
                }}
                className="flex-1 py-2 rounded-lg bg-red-600 hover:bg-red-500 transition-colors"
              >
                Reset
              </button>
            </div>
          </div>
        </div>
      )}
      
      {/* Custom styles for floating animation */}
      <style>{`
        @keyframes floatUp {
          0% {
            opacity: 1;
            transform: translateY(0) scale(1);
          }
          100% {
            opacity: 0;
            transform: translateY(-80px) scale(1.5);
          }
        }
      `}</style>
    </div>
  );
}


<script defer data-domain="html.cafe" src="https://milkymouse.com/js/script.js"></script>