import { useEffect, useState } from 'react'
import { useSearchParams, useNavigate } from 'react-router-dom'
import { useUser } from '../context/UserContext'

const API_URL = import.meta.env.VITE_API_URL || '/api'

const ERROR_MESSAGES = {
  discord_denied: 'Discord-Anmeldung wurde abgebrochen.',
  no_code: 'Kein Autorisierungscode erhalten.',
  not_in_guild: 'Du bist nicht Mitglied eines berechtigten Discord-Servers.',
  oauth_failed: 'Discord-Anmeldung fehlgeschlagen. Bitte versuche es erneut.',
}

export default function LoginPage({ onLogin }) {
  const [searchParams] = useSearchParams()
  const navigate = useNavigate()
  const { user, loading } = useUser()
  const [error, setError] = useState(null)
  const [guestLoading, setGuestLoading] = useState(false)

  useEffect(() => {
    if (!loading && user) {
      navigate('/', { replace: true })
    }
  }, [user, loading, navigate])

  useEffect(() => {
    const errorCode = searchParams.get('error')
    if (errorCode) {
      setError(ERROR_MESSAGES[errorCode] || 'Ein unbekannter Fehler ist aufgetreten.')
    }
  }, [searchParams])

  const handleDiscordLogin = () => {
    window.location.href = `${API_URL}/auth/discord`
  }

  const handleGuestLogin = async () => {
    setGuestLoading(true)
    try {
      const res = await fetch(`${API_URL}/auth/guest`, { method: 'POST' })
      const data = await res.json()
      if (data.token) {
        onLogin(data.token)
        navigate('/', { replace: true })
      }
    } catch (err) {
      setError('Gast-Anmeldung fehlgeschlagen.')
    } finally {
      setGuestLoading(false)
    }
  }

  if (loading) {
    return (
      <div className="min-h-screen bg-black flex items-center justify-center">
        <div className="text-neutral-400">Laden...</div>
      </div>
    )
  }

  return (
    <div className="min-h-screen bg-black flex flex-col items-center justify-center p-4 relative overflow-hidden">
      {/* Pulsing Spotlight */}
      <div
        className="absolute w-[800px] h-[800px] rounded-full"
        style={{
          background: 'radial-gradient(circle, rgba(241, 68, 232, 0.3) 0%, rgba(113, 40, 215, 0.2) 40%, transparent 70%)',
          filter: 'blur(60px)',
          animation: 'pulse 4s ease-in-out infinite',
        }}
      />

      <style>{`
        @keyframes pulse {
          0%, 100% {
            transform: scale(1);
            opacity: 0.8;
          }
          50% {
            transform: scale(1.15);
            opacity: 1;
          }
        }
      `}</style>

      <div className="flex flex-col items-center relative z-10">
        {/* Logo */}
        <a
          href="https://zeasy.software"
          target="_blank"
          rel="noopener noreferrer"
          className="relative block group mb-4"
        >
          <img
            src="/navbarlogoweiß.png"
            alt="Zeasy"
            className="h-20 transition-opacity duration-300 group-hover:opacity-0"
          />
          <img
            src="/navbarlogograuer.png"
            alt="Zeasy"
            className="h-20 absolute top-0 left-0 opacity-0 transition-opacity duration-300 group-hover:opacity-100"
          />
        </a>

        <p className="text-white text-xl font-semibold mb-8">Gameserver Management</p>

        {error && (
          <div className="bg-red-500/10 border border-red-500/30 text-red-400 px-4 py-3 rounded-lg mb-6 text-sm text-center">
            {error}
          </div>
        )}

        <div className="flex flex-col items-center gap-3">
          <button
            onClick={handleDiscordLogin}
            className="flex items-center justify-center gap-3 text-white font-medium py-3 px-6 rounded-lg transition-all duration-200 hover:scale-[1.02] hover:shadow-lg"
            style={{
              background: 'linear-gradient(135deg, #f144e8 0%, #7128d7 100%)',
            }}
          >
            <svg className="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
              <path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028 14.09 14.09 0 0 0 1.226-1.994.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z"/>
            </svg>
            Mit Discord anmelden
          </button>

          <button
            onClick={handleGuestLogin}
            disabled={guestLoading}
            className="text-neutral-400 hover:text-white text-sm transition-colors"
          >
            {guestLoading ? 'Laden...' : 'Als Gast fortfahren'}
          </button>
        </div>
      </div>
    </div>
  )
}
