"use client";

import type { ReactNode } from "react";
import Link from "next/link";
import { usePathname } from "next/navigation";

/**
 * Ezer Mishpati navigation shell.
 *
 * Editorial/judicial aesthetic:
 * - Navy header with a gold hairline rule (border-b-3)
 * - Parchment/cream body background (set on <body> via globals.css)
 * - Hebrew RTL throughout (set on <html> in layout.tsx)
 *
 * Nav items pick up an `aria-current="page"` and a gold underline when
 * the current route matches, so screen readers announce the active
 * section and sighted users can see where they are.
 */

type NavItem = {
  href: string;
  label: string;
};

const NAV_ITEMS: NavItem[] = [
  { href: "/",            label: "בית"         },
  { href: "/archive",     label: "ארכיון"      },
  { href: "/training",    label: "אימון סגנון" },
  { href: "/precedents",  label: "ספריית פסיקה" },
  { href: "/methodology", label: "מתודולוגיה" },
  { href: "/skills",      label: "מיומנויות"  },
  { href: "/diagnostics", label: "אבחון"       },
  { href: "/settings",    label: "הגדרות"      },
];

function isActive(pathname: string, href: string): boolean {
  if (href === "/") return pathname === "/";
  return pathname === href || pathname.startsWith(`${href}/`);
}

export function AppShell({ children }: { children: ReactNode }) {
  const pathname = usePathname();

  return (
    <>
      <header
        className="
          relative z-10 flex items-center gap-4
          px-10 py-[18px]
          bg-navy text-parchment
          border-b-[3px] border-gold
          shadow-md
        "
      >
        <Link href="/" className="flex items-baseline gap-3 hover:text-parchment">
          <span className="font-display text-[1.45rem] font-bold tracking-[0.02em] text-parchment">
            עוזר משפטי
          </span>
          <span className="text-gold-soft text-sm font-medium">ניהול תיקים</span>
        </Link>

        <nav
          className="me-auto flex items-center gap-1"
          aria-label="ניווט ראשי"
        >
          {NAV_ITEMS.map((item) => {
            const active = isActive(pathname, item.href);
            return (
              <Link
                key={item.href}
                href={item.href}
                aria-current={active ? "page" : undefined}
                className={`
                  relative px-3 py-1.5 rounded text-sm transition-colors
                  ${
                    active
                      ? "text-parchment font-semibold bg-navy-soft/80"
                      : "text-parchment/80 hover:text-parchment hover:bg-navy-soft/60"
                  }
                `}
              >
                {item.label}
                {active && (
                  <span
                    className="absolute -bottom-[19px] inset-x-2 h-[2px] bg-gold"
                    aria-hidden="true"
                  />
                )}
              </Link>
            );
          })}
        </nav>
      </header>

      <main
        id="main"
        className="flex-1 w-full max-w-[1400px] mx-auto px-10 py-10"
      >
        {children}
      </main>
    </>
  );
}
