import type { ReactNode } from "react";
import { NavLink, useNavigate } from "react-router-dom";

import { useAuth } from "../auth/AuthContext";
import { ThemeToggle } from "./ThemeToggle";

/** Gemeinsamer Rahmen (Kopfzeile + Navigation) für alle eingeloggten Screens. */
export function AppShell({ children }: { children: ReactNode }) {
  const { istAdmin, istVerantwortlich, logout } = useAuth();
  const navigate = useNavigate();

  function handleLogout() {
    logout();
    navigate("/login");
  }

  return (
    <div className="app-shell">
      <header className="topbar">
        <NavLink to="/objekte" className="topbar-brand">
          MABEA
        </NavLink>
        <nav className="topbar-nav">
          <NavLink to="/objekte" className={({ isActive }) => (isActive ? "active" : "")}>
            Objekte
          </NavLink>
          <NavLink to="/maengel" className={({ isActive }) => (isActive ? "active" : "")}>
            Mängel
          </NavLink>
          {istVerantwortlich && (
            <NavLink to="/dashboard" className={({ isActive }) => (isActive ? "active" : "")}>
              Dashboard
            </NavLink>
          )}
          {istVerantwortlich && (
            <NavLink to="/fehlbestaende" className={({ isActive }) => (isActive ? "active" : "")}>
              Fehlbestände
            </NavLink>
          )}
          {istVerantwortlich && (
            <NavLink to="/admin" className={({ isActive }) => (isActive ? "active" : "")}>
              {istAdmin ? "Administration" : "Verwaltung"}
            </NavLink>
          )}
          <ThemeToggle />
          <button className="btn btn-secondary" onClick={handleLogout}>
            Abmelden
          </button>
        </nav>
      </header>
      {children}
    </div>
  );
}