import { useState } from 'react';
import { useLuckyDraw } from './hooks/useLuckyDraw';
import { SlotMachine } from './components/SlotMachine';
import { HistoryPanel } from './components/HistoryPanel';
import { WinnerModal } from './components/WinnerModal';
import { Sparkles } from 'lucide-react';

function App() {
  const {
    maxNumber,
    setMaxNumber,
    pool,
    history,
    isSpinning,
    currentWinner,
    drawNumber,
    completeDraw,
    resetPool,
    showModal,
    confirmWinner
  } = useLuckyDraw();

  const handleDraw = () => {
    drawNumber();
  };

  const handleAnimationComplete = () => {
    if (currentWinner !== null) {
      completeDraw(currentWinner);
    }
  };

  const handleReset = () => {
    if (window.confirm('Are you sure you want to reset everything?')) {
      resetPool(maxNumber);
    }
  };

  const handleMaxChange = (val) => {
    // Basic confirmation if pool is in use could be added here, 
    // but for now we just update config for next reset or immediately? 
    // The hook updates local state. 
    // If logic requires reset when max changes, we should safeguard.
    // For now, let's just set it. resetPool(val) might be better UX if user INTENDS to change range.
    // We'll leave it as setting the "next" max or current max state.
    // If we want to change immediately:
    if (val !== maxNumber) {
      if (window.confirm(`Change max number to ${val} and reset?`)) {
        resetPool(val);
      }
    }
  };

  return (
    <div className="relative min-h-screen w-full overflow-hidden font-sans text-slate-900">
      {/* Background Image - Fixed to fit all screen sizes */}
      <div
        className="fixed inset-0 w-full h-full z-0"
        style={{
          backgroundImage: `url('/asset/img/background.jpg')`,
          backgroundSize: 'cover',
          backgroundPosition: 'center center',
          backgroundRepeat: 'no-repeat',
          backgroundAttachment: 'fixed'
        }}
      ></div>

      {/* Dark overlay for better contrast */}
      <div className="fixed inset-0 w-full h-full z-0 bg-black/20"></div>

      {/* Content Container */}
      <div className="relative z-10 flex flex-col min-h-screen">

        {/* Main Center Area */}
        <div className="flex-1 flex flex-col items-center justify-center p-4 md:p-6 lg:p-8 py-8">

          {/* Golden Ticket + Slot Machine - Layered */}
          <div className="relative flex flex-col items-center">
            {/* Golden Ticket Title - Background Layer */}
            <div className="absolute top-0 left-1/2 -translate-x-1/2 z-0 w-[200%] max-w-none">
              <img
                src="/asset/img/Font.png"
                alt="Golden Ticket"
                className="w-full h-auto"
                style={{
                  filter: 'drop-shadow(0 0 40px rgba(255, 215, 0, 0.8)) drop-shadow(0 8px 25px rgba(212, 175, 55, 0.6))'
                }}
              />
            </div>

            {/* Slot Machine - Foreground Layer */}
            <div className="relative z-10 mt-64 sm:mt-72 md:mt-80 lg:mt-96 xl:mt-[28rem]">
              <SlotMachine
                winner={currentWinner}
                isSpinning={isSpinning}
                onAnimationComplete={handleAnimationComplete}
                onDraw={handleDraw}
                poolLength={pool.length}
              />
            </div>
          </div>

          {/* No numbers remaining message */}
          {pool.length === 0 && (
            <div className="relative z-30 flex flex-col items-center mt-8">
              <div className="text-yellow-200 bg-gradient-to-r from-yellow-900/60 to-orange-900/60 px-6 py-3 rounded-2xl backdrop-blur-sm border-2 border-yellow-600/50 font-bold shadow-xl">
                No numbers remaining!
              </div>
            </div>
          )}

          {/* Winners Panel - Below Draw Button */}
          <div className="w-full max-w-6xl px-4 mt-12 md:mt-16">
            <HistoryPanel
              history={history}
              maxNumber={maxNumber}
              onMaxNumberChange={handleMaxChange}
              onReset={handleReset}
            />
          </div>

        </div>
      </div>

      {/* Winner Modal */}
      <WinnerModal
        isOpen={showModal}
        winner={currentWinner}
        onConfirm={confirmWinner}
      />
    </div>
  );
}

export default App;
