import { useState, useEffect } from 'react'
import { motion, AnimatePresence } from 'framer-motion'
import { Lock, ChevronRight, AlertCircle } from 'lucide-react'

interface PasscodeGuardProps {
  children: React.ReactNode
}

const CORRECT_PASSCODE = '@@Gi05Br;;'

export default function PasscodeGuard({ children }: PasscodeGuardProps) {
  const [passcode, setPasscode] = useState('')
  const [isAuthenticated, setIsAuthenticated] = useState(false)
  const [error, setError] = useState(false)
  const [isLoading, setIsLoading] = useState(true)

  useEffect(() => {
    const saved = localStorage.getItem('app_access_granted')
    if (saved === 'true') {
      setIsAuthenticated(true)
    }
    setIsLoading(false)
  }, [])

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    if (passcode === CORRECT_PASSCODE) {
      localStorage.setItem('app_access_granted', 'true')
      setIsAuthenticated(true)
      setError(false)
    } else {
      setError(true)
      setPasscode('')
      // Shake animation effect could be added here
    }
  }

  if (isLoading) return null

  if (isAuthenticated) return <>{children}</>

  return (
    <div className="min-h-screen w-full bg-slate-950 flex items-center justify-center p-4 selection:bg-blue-500/30">
      {/* Background Glow */}
      <div className="fixed inset-0 overflow-hidden pointer-events-none">
        <div className="absolute top-[-10%] left-[-10%] w-[40%] h-[40%] bg-blue-600/10 blur-[120px] rounded-full" />
        <div className="absolute bottom-[-10%] right-[-10%] w-[40%] h-[40%] bg-indigo-600/10 blur-[120px] rounded-full" />
      </div>

      <motion.div 
        initial={{ opacity: 0, scale: 0.95 }}
        animate={{ opacity: 1, scale: 1 }}
        className="w-full max-w-md relative z-10"
      >
        <div className="bg-slate-900/80 backdrop-blur-xl border border-slate-800 rounded-3xl p-8 shadow-2xl shadow-black/50 overflow-hidden group">
          <div className="absolute inset-0 bg-gradient-to-tr from-blue-600/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-700 pointer-events-none" />
          
          <div className="text-center mb-10">
            <motion.div 
              initial={{ rotate: -10 }}
              animate={{ rotate: 0 }}
              className="inline-flex p-4 bg-blue-600/10 rounded-2xl mb-6 ring-1 ring-blue-500/20 shadow-inner"
            >
              <Lock className="text-blue-500 w-8 h-8" />
            </motion.div>
            <h1 className="text-3xl font-extrabold text-white tracking-tight mb-2">Acesso Restrito</h1>
            <p className="text-slate-400 font-medium">O aplicativo está em fase de desenvolvimento.</p>
          </div>

          <form onSubmit={handleSubmit} className="space-y-6">
            <div className="relative group/input">
              <input
                type="password"
                placeholder="Insira a senha de acesso"
                value={passcode}
                onChange={(e) => setPasscode(e.target.value)}
                autoFocus
                className={`w-full bg-slate-800/50 border ${error ? 'border-red-500/50 ring-2 ring-red-500/10' : 'border-slate-700/50 group-hover/input:border-slate-600 focus:border-blue-500'} h-14 rounded-2xl px-6 outline-none text-white text-lg transition-all duration-300 placeholder:text-slate-600`}
              />
              
              <AnimatePresence>
                {error && (
                  <motion.div 
                    initial={{ opacity: 0, y: -5 }}
                    animate={{ opacity: 1, y: 0 }}
                    exit={{ opacity: 0 }}
                    className="flex items-center gap-2 text-red-500 text-sm mt-3 font-medium px-2"
                  >
                    <AlertCircle size={14} />
                    Senha incorreta
                  </motion.div>
                )}
              </AnimatePresence>
            </div>

            <button
              type="submit"
              className="w-full h-14 bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-500 hover:to-indigo-500 text-white rounded-2xl font-bold shadow-lg shadow-blue-600/20 active:scale-[0.98] transition-all duration-200 flex items-center justify-center gap-2 group/btn"
            >
              Entrar no sistema
              <ChevronRight className="w-5 h-5 group-hover/btn:translate-x-1 transition-transform" />
            </button>
          </form>

          <div className="mt-8 pt-6 border-t border-slate-800/50 text-center">
            <span className="text-xs text-slate-500 font-medium uppercase tracking-[0.2em]">TrackSteel DBMaker v1.0</span>
          </div>
        </div>
      </motion.div>
    </div>
  )
}
