import { useState, useEffect } from 'react'
import { BrowserRouter, Routes, Route, Navigate, useSearchParams, useNavigate } from 'react-router-dom'
import { UserProvider } from './context/UserContext'
import Dashboard from './pages/Dashboard'
import ServerDetail from './pages/ServerDetail'

// OAuth Callback Handler
function AuthCallback({ onLogin }) {
  const [searchParams] = useSearchParams()
  const navigate = useNavigate()
  const [error, setError] = useState(null)

  useEffect(() => {
    const token = searchParams.get('token')
    const errorParam = searchParams.get('error')

    if (errorParam) {
      const errorMessages = {
        'discord_denied': 'Discord-Anmeldung abgebrochen',
        'no_code': 'Kein Autorisierungscode erhalten',
        'not_in_guild': 'Du bist nicht Mitglied des Discord-Servers',
        'oauth_failed': 'Anmeldung fehlgeschlagen'
      }
      setError(errorMessages[errorParam] || 'Unbekannter Fehler')
      setTimeout(() => navigate('/'), 3000)
      return
    }

    if (token) {
      onLogin(token)
      navigate('/')
    } else {
      navigate('/')
    }
  }, [searchParams, onLogin, navigate])

  if (error) {
    return (
      <div className="min-h-screen flex items-center justify-center bg-neutral-950">
        <div className="text-center">
          <div className="text-red-400 text-xl mb-2">{error}</div>
          <div className="text-neutral-500">Weiterleitung...</div>
        </div>
      </div>
    )
  }

  return (
    <div className="min-h-screen flex items-center justify-center bg-neutral-950">
      <div className="text-neutral-400">Anmeldung wird verarbeitet...</div>
    </div>
  )
}

// Login page for unauthenticated users
function LoginPage() {
  const [searchParams] = useSearchParams()
  const error = searchParams.get('error')

  const errorMessages = {
    'discord_denied': 'Discord-Anmeldung abgebrochen',
    'no_code': 'Kein Autorisierungscode erhalten',
    'not_in_guild': 'Du bist nicht Mitglied des Discord-Servers',
    'oauth_failed': 'Anmeldung fehlgeschlagen'
  }

  const handleDiscordLogin = () => {
    window.location.href = '/api/auth/discord'
  }

  return (
    <div className="min-h-screen flex items-center justify-center bg-neutral-950">
      <div className="text-center">
        <img src="/navbarlogoweiß.png" alt="Logo" className="h-16 mx-auto mb-6" />
        <h1 className="text-2xl font-bold text-white mb-2">Gameserver Management</h1>
        <p className="text-neutral-400 mb-8">Melde dich mit Discord an, um fortzufahren</p>

        {error && (
          <div className="mb-6 p-3 bg-red-500/10 border border-red-500/30 rounded-lg text-red-400">
            {errorMessages[error] || 'Anmeldung fehlgeschlagen'}
          </div>
        )}

        <button
          onClick={handleDiscordLogin}
          className="flex items-center gap-3 mx-auto px-6 py-3 bg-[#5865F2] hover:bg-[#4752C4] text-white font-medium rounded-lg transition-colors"
        >
          <svg className="w-6 h-6" 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>

        <p className="mt-8 text-sm text-neutral-600">
          Nur für Mitglieder des Discord-Servers
        </p>
      </div>
    </div>
  )
}

export default function App() {
  const [token, setToken] = useState(localStorage.getItem('gsm_token'))

  const handleLogin = (newToken) => {
    localStorage.setItem('gsm_token', newToken)
    setToken(newToken)
  }

  const handleLogout = () => {
    localStorage.removeItem('gsm_token')
    setToken(null)
  }

  return (
    <UserProvider token={token}>
      <BrowserRouter>
        <Routes>
          <Route
            path="/"
            element={
              token ? (
                <Dashboard onLogout={handleLogout} />
              ) : (
                <LoginPage />
              )
            }
          />
          <Route
            path="/server/:serverId"
            element={
              token ? (
                <ServerDetail onLogout={handleLogout} />
              ) : (
                <Navigate to="/" replace />
              )
            }
          />
          <Route
            path="/auth/callback"
            element={<AuthCallback onLogin={handleLogin} />}
          />
          <Route
            path="/auth/discord/callback"
            element={<AuthCallback onLogin={handleLogin} />}
          />
          <Route
            path="/login"
            element={<LoginPage />}
          />
          <Route path="*" element={<Navigate to="/" replace />} />
        </Routes>
      </BrowserRouter>
    </UserProvider>
  )
}