import type { ReactNode } from "react";
import Link from "next/link";
import Image from "next/image";
import { productAreas } from "@/lib/platform";

type AdminShellProps = {
  title: string;
  description: string;
  currentPath: string;
  authEnabled: boolean;
  children: ReactNode;
};

const navItems = [
  { href: "/admin", label: "Overview" },
  ...productAreas.map((area) => ({ href: area.href, label: area.title })),
  { href: "/admin/screens", label: "Screens" },
];

function isActiveNavItem(itemHref: string, currentPath: string) {
  if (itemHref === "/admin") {
    return currentPath === "/admin";
  }

  return currentPath === itemHref || currentPath.startsWith(`${itemHref}/`);
}

export function AdminShell({ title, description, currentPath, authEnabled, children }: AdminShellProps) {
  const isLogin = currentPath === "/admin/login";

  return (
    <div className="min-h-screen admin-surface">
      {isLogin ? (
        children
      ) : (
        <>
          <header className="border-b border-border/80 bg-background/90 backdrop-blur">
            <div className="mx-auto flex max-w-7xl items-center justify-between gap-6 px-4 py-4 md:px-6">
              <Link href="/" className="flex items-center gap-3 rounded-2xl transition hover:opacity-85">
                <Image
                  src="/images/ballbox-logo.png"
                  alt="Ballbox"
                  width={40}
                  height={40}
                  className="h-10 w-auto"
                />
                <div>
                  <p className="text-xs uppercase tracking-[0.24em] text-primary">Ballbox Platform</p>
                  <p className="text-sm text-muted-foreground">Host app + admin shell</p>
                </div>
              </Link>
              <nav className="hidden flex-wrap items-center gap-2 md:flex">
                {navItems.map((item) => (
                  <Link
                    key={item.href}
                    href={item.href}
                    className={
                      isActiveNavItem(item.href, currentPath)
                        ? "rounded-full border border-primary/60 bg-primary/12 px-3 py-2 text-sm text-foreground"
                        : "rounded-full border border-border/70 px-3 py-2 text-sm text-muted-foreground transition hover:border-primary/60 hover:text-foreground"
                    }
                    aria-current={isActiveNavItem(item.href, currentPath) ? "page" : undefined}
                  >
                    {item.label}
                  </Link>
                ))}
                {authEnabled ? (
                  <form action="/api/admin/logout" method="post">
                    <button
                      type="submit"
                      className="rounded-full border border-border/70 px-3 py-2 text-sm text-muted-foreground transition hover:border-primary/60 hover:text-foreground"
                    >
                      Logout
                    </button>
                  </form>
                ) : null}
              </nav>
            </div>
          </header>

          <div className="mx-auto max-w-7xl px-4 py-8 md:px-6 md:py-10">
            <div className="mb-8 flex flex-col gap-3 border-b border-border/70 pb-6">
              <p className="text-xs uppercase tracking-[0.24em] text-primary">Admin</p>
              <h1 className="text-3xl font-semibold tracking-tight md:text-4xl">{title}</h1>
              <p className="max-w-3xl text-base text-muted-foreground md:text-lg">{description}</p>
            </div>
            {children}
          </div>
        </>
      )}
    </div>
  );
}