import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom'
import { AuthProvider, useAuth } from './context/AuthContext'
import Navbar from './components/Navbar'
import Footer from './components/Footer'
import PixelBlast from './components/PixelBlast'
import LoginPage from './pages/LoginPage'
import TicketsPage from './pages/TicketsPage'
import DashboardPage from './pages/DashboardPage'
import AssetsPage from './pages/AssetsPage'
import PlanboardPage from './pages/PlanboardPage'
import ProjectsPage from './pages/ProjectsPage'
import ReportsPage from './pages/ReportsPage'
import DocsPage from './pages/DocsPage'
import AdminPage from './pages/AdminPage'

function ProtectedRoute({ children }) {
  const { user, loading } = useAuth()
  
  if (loading) {
    return (
      <div className="text-center p-4">
        <div className="spinner"></div>
        <p>Loading...</p>
      </div>
    )
  }
  
  if (!user) {
    return <Navigate to="/login" replace />
  }
  
  return children
}

function AppRoutes() {
  const { user } = useAuth()
  
  return (
    <Routes>
      <Route path="/login" element={user ? <Navigate to="/tickets" replace /> : <LoginPage />} />
      <Route path="/" element={<Navigate to="/tickets" replace />} />
      <Route path="/tickets" element={<ProtectedRoute><TicketsPage /></ProtectedRoute>} />
      <Route path="/dashboard" element={<ProtectedRoute><DashboardPage /></ProtectedRoute>} />
      <Route path="/assets" element={<ProtectedRoute><AssetsPage /></ProtectedRoute>} />
      <Route path="/planboard" element={<ProtectedRoute><PlanboardPage /></ProtectedRoute>} />
      <Route path="/projects" element={<ProtectedRoute><ProjectsPage /></ProtectedRoute>} />
      <Route path="/reports" element={<ProtectedRoute><ReportsPage /></ProtectedRoute>} />
      <Route path="/docs" element={<ProtectedRoute><DocsPage /></ProtectedRoute>} />
      <Route path="/admin" element={<ProtectedRoute><AdminPage /></ProtectedRoute>} />
    </Routes>
  )
}

function AppContent() {
  const { user } = useAuth()
  
  if (!user) {
    return (
      <>
        {/* PixelBlast Background für Login-Seite */}
        <div style={{
          position: 'fixed',
          top: 0,
          left: 0,
          width: '100vw',
          height: '100vh',
          zIndex: 0,
          background: '#1a202c'
        }}>
          <PixelBlast
            color="#10b981"
            variant="circle"
            pixelSize={4}
            patternScale={2}
            patternDensity={0.8}
            enableRipples={true}
            rippleIntensityScale={1.5}
            speed={0.3}
            edgeFade={0.3}
          />
        </div>
        <div style={{ position: 'relative', zIndex: 1 }}>
          <AppRoutes />
        </div>
      </>
    )
  }
  
  return (
    <>
      {/* PixelBlast Background für Haupt-App */}
      <div style={{
        position: 'fixed',
        top: 0,
        left: 0,
        width: '100vw',
        height: '100vh',
        zIndex: 0,
        background: '#1a202c'
      }}>
        <PixelBlast
          color="#10b981"
          variant="circle"
          pixelSize={4}
          patternScale={2}
          patternDensity={0.8}
          enableRipples={true}
          rippleIntensityScale={1.5}
          speed={0.3}
          edgeFade={0.3}
        />
      </div>
      <div style={{ position: 'relative', zIndex: 1, display: 'flex', height: '100vh', overflow: 'hidden' }}>
        <Navbar />
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
          <div style={{ flex: 1, overflowY: 'auto' }}>
            <AppRoutes />
          </div>
          <Footer />
        </div>
      </div>
    </>
  )
}

export default function App() {
  return (
    <BrowserRouter>
      <AuthProvider>
        <AppContent />
      </AuthProvider>
    </BrowserRouter>
  )
}
