"use client";

import Image from "next/image";
import Link from "next/link";
import { usePathname, useRouter } from "next/navigation";
import type { ReactNode } from "react";
import { appVersion } from "@/lib/runtime/version";

const navItems = [
  ["Dashboard", "/admin"],
  ["Kontaktanfragen", "/admin/kontaktanfragen"],
  ["Reparaturanfragen", "/admin/reparaturanfragen"],
  ["Website-Inhalte", "/admin/website"],
  ["Medien", "/admin/medien"],
  ["Einstellungen", "/admin/einstellungen"],
  ["SMTP", "/admin/smtp"],
  ["SEO", "/admin/seo"],
  ["System", "/admin/system"],
] as const;

export default function AdminShell({ children }: { children: ReactNode }) {
  const pathname = usePathname();
  const router = useRouter();

  async function logout() {
    await fetch("/api/admin/logout", { method: "POST" });
    router.push("/admin/login");
    router.refresh();
  }

  return (
    <div className="admin-shell">
      <aside className="admin-sidebar">
        <Link className="admin-logo" href="/admin">
          <Image src="/funktechnik_schubert_logo.jpg" alt="Funktechnik Schubert" width={1672} height={941} />
        </Link>
        <nav className="admin-nav" aria-label="Administration">
          {navItems.map(([label, href]) => (
            <Link key={href} href={href} aria-current={pathname === href ? "page" : undefined}>
              {label}
            </Link>
          ))}
        </nav>
        <p className="admin-version">v{appVersion}</p>
        <button className="admin-logout" type="button" onClick={logout}>Abmelden</button>
      </aside>
      <div className="admin-main">{children}</div>
    </div>
  );
}