import React, { useState } from 'react';
import { motion } from 'framer-motion';
import { BrainCircuit, Loader2, Users, Play, PenTool } from 'lucide-react';
import { AuthButton } from './AuthButton';

interface LandingProps {
  onGenerate: (topic: string) => void;
  onCreateManual: () => void;
  onJoin: (pin: string, name: string) => void;
  isLoading: boolean;
  error: string | null;
}

export const Landing: React.FC<LandingProps> = ({ onGenerate, onCreateManual, onJoin, isLoading, error }) => {
  const [mode, setMode] = useState<'HOST' | 'JOIN'>('HOST');
  const [topic, setTopic] = useState('');
  const [pin, setPin] = useState('');
  const [name, setName] = useState('');

  const handleHostSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (topic.trim()) onGenerate(topic);
  };

  const handleJoinSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (pin.trim() && name.trim()) onJoin(pin, name);
  };

  return (
    <div className="flex flex-col items-center justify-center min-h-screen p-4 text-center relative">
      <div className="absolute top-4 right-4">
        <AuthButton />
      </div>
      <motion.div 
        initial={{ scale: 0.8, opacity: 0, rotate: -2 }}
        animate={{ scale: 1, opacity: 1, rotate: 0 }}
        transition={{ type: "spring", bounce: 0.5 }}
        className="bg-white text-gray-900 p-8 rounded-[2rem] shadow-[0_10px_0_rgba(0,0,0,0.1)] max-w-md w-full border-4 border-white/50"
      >
        <div className="flex justify-center mb-6">
          <div className="bg-theme-primary p-4 rounded-3xl rotate-3 shadow-lg">
            <BrainCircuit size={48} className="text-white" />
          </div>
        </div>
        <h1 className="text-5xl font-black mb-2 text-theme-primary tracking-tight">Kaboot</h1>
        <p className="text-gray-500 font-bold mb-6">The AI Quiz Party</p>
        
        <div className="flex bg-gray-100 p-2 rounded-2xl mb-8">
            <button 
                onClick={() => setMode('HOST')}
                className={`flex-1 py-3 rounded-xl font-black text-lg transition-all duration-200 ${mode === 'HOST' ? 'bg-white shadow-md text-theme-primary scale-105' : 'text-gray-400 hover:text-gray-600'}`}
            >
                Host
            </button>
            <button 
                onClick={() => setMode('JOIN')}
                className={`flex-1 py-3 rounded-xl font-black text-lg transition-all duration-200 ${mode === 'JOIN' ? 'bg-white shadow-md text-theme-primary scale-105' : 'text-gray-400 hover:text-gray-600'}`}
            >
                Join
            </button>
        </div>

        {mode === 'HOST' ? (
          <div className="space-y-6">
            <form onSubmit={handleHostSubmit} className="space-y-4">
              <input
                type="text"
                placeholder="Topic (e.g. 'Space')"
                value={topic}
                onChange={(e) => setTopic(e.target.value)}
                className="w-full p-4 text-xl font-bold border-2 border-gray-200 rounded-2xl focus:border-theme-primary focus:ring-4 focus:ring-theme-primary/20 outline-none transition-all placeholder:font-medium text-center"
                disabled={isLoading}
              />
              <button
                type="submit"
                disabled={isLoading || !topic.trim()}
                className="w-full bg-[#333] text-white py-4 rounded-2xl text-xl font-black shadow-[0_6px_0_#000] active:shadow-none active:translate-y-[6px] transition-all hover:bg-black flex items-center justify-center gap-3"
              >
                {isLoading ? <Loader2 className="animate-spin" /> : <><BrainCircuit size={24} /> Generate Quiz</>}
              </button>
            </form>
            
            <div className="relative flex py-2 items-center opacity-50">
                <div className="flex-grow border-t-2 border-gray-300"></div>
                <span className="flex-shrink mx-4 text-gray-400 font-bold">OR</span>
                <div className="flex-grow border-t-2 border-gray-300"></div>
            </div>

            <button 
              onClick={onCreateManual}
              className="w-full bg-white border-2 border-theme-primary text-theme-primary py-3 rounded-2xl text-lg font-black hover:bg-theme-hover shadow-[0_4px_0_var(--theme-primary)] active:shadow-none active:translate-y-[4px] transition-all flex items-center justify-center gap-2"
            >
               <PenTool size={20} /> Create Manually
            </button>
          </div>
        ) : (
            <form onSubmit={handleJoinSubmit} className="space-y-4">
              <input
                type="text"
                placeholder="Game PIN"
                value={pin}
                onChange={(e) => setPin(e.target.value)}
                className="w-full p-4 text-xl font-bold border-2 border-gray-200 rounded-2xl focus:border-theme-primary focus:ring-4 focus:ring-theme-primary/20 outline-none text-center"
              />
              <input
                type="text"
                placeholder="Nickname"
                value={name}
                onChange={(e) => setName(e.target.value)}
                className="w-full p-4 text-xl font-bold border-2 border-gray-200 rounded-2xl focus:border-theme-primary focus:ring-4 focus:ring-theme-primary/20 outline-none text-center"
              />
              <button
                type="submit"
                disabled={!pin.trim() || !name.trim()}
                className="w-full bg-[#333] text-white py-4 rounded-2xl text-xl font-black shadow-[0_6px_0_#000] active:shadow-none active:translate-y-[6px] transition-all hover:bg-black flex items-center justify-center gap-3"
              >
                <Play fill="currentColor" /> Join Game
              </button>
            </form>
        )}
        
        {error && (
          <motion.div initial={{ height: 0 }} animate={{ height: 'auto' }} className="overflow-hidden mt-4">
            <p className="text-red-500 font-bold bg-red-50 p-3 rounded-xl border-2 border-red-100">{error}</p>
          </motion.div>
        )}
      </motion.div>
    </div>
  );
};