import { useEffect, useState } from "react";
import AppLayout from "../layouts/AppLayout";
import HomePage from "../modules/home/HomePage";
import EmployeesPage from "../modules/employees/EmployeesPage";
import FacilitiesPage from "../modules/facilities/FacilitiesPage";
import OrdersPage from "../modules/orders/OrdersPage";
import AbsencesPage from "../modules/absences/AbsencesPage";
import TimeEntriesPage from "../modules/timeEntries/TimeEntriesPage";
import LoginPage from "../modules/auth/LoginPage";
import ChangePasswordScreen from "../modules/auth/ChangePasswordScreen";
import ForgotPasswordUsernamePage from "../modules/auth/ForgotPasswordUsernamePage";
import ForgotPasswordPinPage from "../modules/auth/ForgotPasswordPinPage";
import ForgotPasswordNewPasswordPage from "../modules/auth/ForgotPasswordNewPasswordPage";
import DebugSessionsPage from "../modules/debug/DebugSessionsPage";
import SettingsPage from "../modules/settings/SettingsPage";
import AuditLogPage from "../modules/auditLog/AuditLogPage";
import TrashPage from "../modules/trash/TrashPage";
import { useAuth } from "./AuthContext";
import { isNavItemVisible } from "./navPermissions";
function PlaceholderPage({ title }) {
  return (
    <section className="welcome-card">
      <h2>{title}</h2>
      <p>Dieses Modul bauen wir als Nächstes vollständig aus.</p>
    </section>
  );
}

export default function App() {
  const [activePage, setActivePage] = useState("Home");
  const [authView, setAuthView] = useState({ screen: "login" });
  const { isAuthenticated, isLoading, hasPermission, mustChangePassword } = useAuth();

  useEffect(() => {
    if (isAuthenticated && !isNavItemVisible(activePage, hasPermission)) {
      setActivePage("Home");
    }
  }, [isAuthenticated, activePage, hasPermission]);

  if (isLoading) {
    return <div className="login-screen">Lädt...</div>;
  }

  if (!isAuthenticated) {
    switch (authView.screen) {
      case "forgotUsername":
        return (
          <ForgotPasswordUsernamePage
            onNext={(username) => setAuthView({ screen: "forgotPin", username })}
            onBackToLogin={() => setAuthView({ screen: "login" })}
          />
        );
      case "forgotPin":
        return (
          <ForgotPasswordPinPage
            username={authView.username}
            onVerified={(resetToken) => setAuthView({ screen: "forgotNewPassword", resetToken })}
            onRestart={() => setAuthView({ screen: "forgotUsername" })}
            onBackToLogin={() => setAuthView({ screen: "login" })}
          />
        );
      case "forgotNewPassword":
        return (
          <ForgotPasswordNewPasswordPage
            resetToken={authView.resetToken}
            onDone={() => setAuthView({ screen: "login" })}
            onBackToLogin={() => setAuthView({ screen: "login" })}
          />
        );
      default:
        return <LoginPage onForgotPassword={() => setAuthView({ screen: "forgotUsername" })} />;
    }
  }

  if (mustChangePassword) {
    return <ChangePasswordScreen />;
  }

  const renderPage = () => {
    switch (activePage) {
      case "Home":
        return <HomePage />;
      case "Mitarbeiter":
        return <EmployeesPage />;
      case "Kunden":
        return <FacilitiesPage />;
      case "Disposition":
        return <OrdersPage />;
      case "Abwesenheiten":
        return <AbsencesPage />;
      case "Zeiterfassung":
        return <TimeEntriesPage />;
      case "Kalkulation":
        return <PlaceholderPage title="Kalkulation" />;
      case "Fahrzeuge":
        return <PlaceholderPage title="Fahrzeuge" />;
      case "Rechnungen":
        return <PlaceholderPage title="Rechnungen" />;
      case "Controlling":
        return <PlaceholderPage title="Controlling" />;
      case "Einstellungen":
        return <SettingsPage />;
      case "Debug":
        return <DebugSessionsPage />;
      case "Audit-Log":
        return <AuditLogPage />;
      case "Papierkorb":
        return <TrashPage />;
      default:
        return <HomePage />;
    }
  };

  return (
    <AppLayout
      activePage={activePage}
      onNavigate={setActivePage}
    >
      {renderPage()}
    </AppLayout>
  );
}