import { Routes, Route, Navigate } from 'react-router'
import { Component, type ReactNode } from 'react'
import { StoreProvider, useStore } from './store/store'
import AppLayout from './components/AppLayout'
import Login from './pages/Login'
import Dashboard from './pages/Dashboard'
import Payments from './pages/Payments'
import Tickets from './pages/Tickets'
import Documents from './pages/Documents'
import Messages from './pages/Messages'
import BenutzerVerwaltung from './pages/BenutzerVerwaltung'

/** Fängt Render-Fehler ab – statt schwarzem Bildschirm: Hinweis + Reload. */
class FehlerGrenze extends Component<{ children: ReactNode }, { fehler: boolean }> {
  state = { fehler: false }
  static getDerivedStateFromError() {
    return { fehler: true }
  }
  render() {
    if (this.state.fehler) {
      return (
        <div className="flex min-h-screen items-center justify-center bg-[#22333b] p-6">
          <div className="max-w-md rounded-2xl bg-white p-8 text-center shadow-2xl dark:bg-slate-900">
            <h1 className="text-xl font-bold">Da ist etwas schiefgelaufen</h1>
            <p className="mt-2 text-sm text-slate-500">
              Die Seite konnte nicht korrekt dargestellt werden. Ein Neuladen hilft in der Regel weiter.
            </p>
            <button
              onClick={() => window.location.reload()}
              className="mt-5 rounded-xl bg-amber-500 px-6 py-2.5 font-semibold text-slate-900 hover:bg-amber-400"
            >
              Seite neu laden
            </button>
          </div>
        </div>
      )
    }
    return this.props.children
  }
}

function Ladebildschirm() {
  return (
    <div className="flex min-h-screen items-center justify-center bg-[#22333b]">
      <div className="text-center text-slate-300">
        <div className="text-lg font-semibold text-white">Hinterstein Immobilien</div>
        <div className="mt-1 text-sm">Mieterportal wird geladen …</div>
      </div>
    </div>
  )
}

function RequireAuth({ children }: { children: React.ReactElement }) {
  const { me, bereit } = useStore()
  if (!bereit) return <Ladebildschirm />
  if (!me) return <Navigate to="/login" replace />
  return children
}

function LoginGate() {
  const { me, bereit } = useStore()
  if (!bereit) return <Ladebildschirm />
  if (me) return <Navigate to="/" replace />
  return <Login />
}

export default function App() {
  return (
    <FehlerGrenze>
      <StoreProvider>
        <Routes>
        <Route path="/login" element={<LoginGate />} />
        <Route
          element={
            <RequireAuth>
              <AppLayout />
            </RequireAuth>
          }
        >
          <Route path="/" element={<Dashboard />} />
          <Route path="/mietkonto" element={<Payments />} />
          <Route path="/schadensmeldungen" element={<Tickets />} />
          <Route path="/dokumente" element={<Documents />} />
          <Route path="/nachrichten" element={<Messages />} />
          <Route path="/benutzer" element={<BenutzerVerwaltung />} />
        </Route>
        <Route path="*" element={<Navigate to="/" replace />} />
      </Routes>
      </StoreProvider>
    </FehlerGrenze>
  )
}