import { useAstroContext } from './context/AstroContext';
import { AstroData } from './types';
import { INITIAL_DATA } from './constants';
import Step0Input from './components/Step0Input';
import TechnicalRoadmap from './components/TechnicalRoadmap';
import Screen3VargaSelection from './components/Screen3VargaSelection';
import Screen4VargaOutput from './components/Screen4VargaOutput';
import Screen5TimingInput from './components/Screen5TimingInput';
import { Sparkles, Moon, Sun, Star } from 'lucide-react';
import { motion, AnimatePresence } from 'motion/react';

export default function App() {
  const { state, setScreen, setStep1Data, setStep1Summary } = useAstroContext();

  const handleDataComplete = (data: AstroData) => {
    setStep1Data(data);
    setScreen(2);
  };

  return (
    <div className="min-h-screen bg-[#F5F5F0] text-stone-900 font-sans selection:bg-stone-200">
      {/* Decorative Background Elements */}
      <div className="fixed inset-0 pointer-events-none overflow-hidden opacity-5">
        <div className="absolute top-[-10%] left-[-10%] w-[40%] h-[40%] rounded-full bg-stone-900 blur-[120px]" />
        <div className="absolute bottom-[-10%] right-[-10%] w-[40%] h-[40%] rounded-full bg-stone-900 blur-[120px]" />
      </div>

      {/* Header */}
      <header className="relative z-10 border-b border-stone-200 bg-white/50 backdrop-blur-md">
        <div className="max-w-7xl mx-auto px-6 py-4 flex justify-between items-center">
          <div className="flex items-center gap-3">
            <div className="w-10 h-10 bg-stone-900 rounded-full flex items-center justify-center text-stone-50">
              <Sparkles size={20} />
            </div>
            <div>
              <h1 className="text-xl font-serif italic font-semibold tracking-tight">Vedic Astro Guide</h1>
              <p className="text-[10px] font-mono uppercase tracking-[0.3em] text-stone-400">Systematic Interpretation</p>
            </div>
          </div>
          
          <nav className="hidden md:flex items-center gap-6">
            {[1, 2, 3, 4, 5].map((s) => (
              <button 
                key={s}
                onClick={() => setScreen(s as 1|2|3|4|5)}
                className={`flex items-center gap-2 transition-all hover:opacity-80 ${state.currentScreen === s ? 'text-stone-900' : 'text-stone-400'}`}
              >
                <span className={`w-6 h-6 rounded-full border flex items-center justify-center text-[10px] font-mono transition-colors ${
                  state.currentScreen === s ? 'border-stone-900 bg-stone-900 text-white' : 'border-stone-200'
                }`}>
                  {s}
                </span>
                <span className="text-xs font-mono uppercase tracking-widest hidden lg:block">
                  {s === 1 && "Input"}
                  {s === 2 && "Rashi"}
                  {s === 3 && "Varga Select"}
                  {s === 4 && "Varga Audit"}
                  {s === 5 && "Timing"}
                </span>
              </button>
            ))}
          </nav>
        </div>
      </header>

      {/* Main Content */}
      <main className="relative z-10 py-12 px-4 max-w-7xl mx-auto">
        <AnimatePresence mode="wait">
          {state.currentScreen === 1 && (
            <motion.div
              key="screen1"
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              exit={{ opacity: 0, y: -20 }}
              transition={{ duration: 0.4 }}
            >
              <Step0Input onComplete={handleDataComplete} initialData={state.step1_2_Data || INITIAL_DATA} />
            </motion.div>
          )}

          {state.currentScreen === 2 && (
            <motion.div key="screen2" className="py-20 text-center space-y-6">
              <h2 className="text-4xl font-serif italic text-stone-900 leading-tight">Phase 0 Pivot: <br/>Guru Logic Hardening</h2>
              <p className="text-stone-500 max-w-xl mx-auto leading-relaxed">
                We are currently upgrading the internal rule engine to ensure 100% Parashari accuracy. 
                Interpretations via this screen are temporarily disabled.
              </p>
              <div className="pt-8 font-mono text-[10px] uppercase tracking-[0.3em] text-stone-400">
                Please use the "Copy Master Context" in Screen 1
              </div>
            </motion.div>
          )}

          {state.currentScreen === 3 && (
            <motion.div key="screen3" className="py-20 text-center space-y-6">
              <h2 className="text-3xl font-serif italic text-stone-900">Screen 3: Varga Selection</h2>
              <p className="text-stone-400 font-mono text-xs uppercase tracking-widest">To Be Updated</p>
            </motion.div>
          )}

          {state.currentScreen === 4 && (
            <motion.div key="screen4" className="py-20 text-center space-y-6">
              <h2 className="text-3xl font-serif italic text-stone-900">Screen 4: Varga Audit</h2>
              <p className="text-stone-400 font-mono text-xs uppercase tracking-widest">To Be Updated</p>
            </motion.div>
          )}

          {state.currentScreen === 5 && (
            <motion.div key="screen5" className="py-20 text-center space-y-6">
              <h2 className="text-3xl font-serif italic text-stone-900">Screen 5: Timing</h2>
              <p className="text-stone-400 font-mono text-xs uppercase tracking-widest">To Be Updated</p>
            </motion.div>
          )}
        </AnimatePresence>
      </main>

      {/* Footer */}
      <footer className="relative z-10 py-12 border-t border-stone-200 mt-20">
        <div className="max-w-7xl mx-auto px-6 flex flex-col md:flex-row justify-between items-center gap-8">
          <div className="flex gap-6 text-stone-400">
            <Sun size={20} />
            <Moon size={20} />
            <Star size={20} />
          </div>
          <p className="text-xs font-mono text-stone-400 uppercase tracking-widest">
            © 2026 Vedic Astro Guide • Systematic Karma Analysis
          </p>
        </div>
      </footer>
    </div>
  );
}