"use client";

import { useState } from "react";

import { Link, usePathname } from "@/i18n/navigation";

export interface NavItem { href: string; label: string }
export interface NavGroup { title: string; items: NavItem[] }

export function AdminShell({
  groups,
  brand,
  back,
  children,
}: {
  groups: NavGroup[];
  brand: string;
  back: string;
  children: React.ReactNode;
}) {
  const pathname = usePathname() ?? ""; // next-intl: already without the locale prefix
  const [open, setOpen] = useState(false);

  const isActive = (href: string) => pathname === href || pathname.startsWith(href + "/");
  const current = groups.flatMap((g) => g.items).find((i) => isActive(i.href));

  return (
    <div className="min-h-screen bg-[#0c0e1a] text-gray-200">
      {/* Sidebar — pinned to the right (admin is RTL-primary). lg:translate-x-0
          keeps it visible on desktop; on mobile it slides off the right edge.
          (Avoid rtl:/ltr: translate variants — their [dir] selector out-specifies
          lg: and would keep the panel off-screen.) */}
      <aside
        className={`fixed inset-y-0 right-0 z-40 flex w-60 flex-col border-l border-[#1e2235] bg-[#0d0f1c] transition-transform lg:translate-x-0 ${
          open ? "translate-x-0" : "translate-x-full"
        }`}
      >
        <div className="flex h-14 items-center gap-2 border-b border-[#1e2235] px-5">
          <span className="grid h-7 w-7 place-items-center rounded-lg bg-indigo-600 text-sm font-bold text-white">F</span>
          <span className="text-sm font-semibold text-white">{brand}</span>
        </div>
        <nav className="flex-1 space-y-5 overflow-y-auto px-3 py-4">
          {groups.map((g) => (
            <div key={g.title}>
              <div className="px-2 pb-1.5 text-[10px] font-semibold uppercase tracking-wider text-gray-600">{g.title}</div>
              <div className="space-y-0.5">
                {g.items.map((item) => {
                  const active = isActive(item.href);
                  return (
                    <Link
                      key={item.href}
                      href={item.href}
                      onClick={() => setOpen(false)}
                      className={`block rounded-lg px-3 py-1.5 text-sm transition-colors ${
                        active
                          ? "bg-indigo-600/15 font-medium text-indigo-300"
                          : "text-gray-400 hover:bg-[#161a2e] hover:text-white"
                      }`}
                    >
                      {item.label}
                    </Link>
                  );
                })}
              </div>
            </div>
          ))}
        </nav>
        <div className="border-t border-[#1e2235] p-3">
          <Link href="/dashboard" className="block rounded-lg px-3 py-1.5 text-sm text-gray-400 hover:bg-[#161a2e] hover:text-white">
            ← {back}
          </Link>
        </div>
      </aside>

      {/* Mobile overlay */}
      {open && <div className="fixed inset-0 z-30 bg-black/50 lg:hidden" onClick={() => setOpen(false)} />}

      {/* Main column */}
      <div className="lg:mr-60">
        <header className="sticky top-0 z-20 flex h-14 items-center gap-3 border-b border-[#1e2235] bg-[#0f1120]/90 px-5 backdrop-blur">
          <button
            className="rounded-lg border border-[#262b40] p-1.5 text-gray-300 hover:bg-[#161a2e] lg:hidden"
            onClick={() => setOpen(true)}
            aria-label="menu"
          >
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M3 6h18M3 12h18M3 18h18" /></svg>
          </button>
          <h2 className="text-sm font-semibold text-white">{current?.label ?? brand}</h2>
          <Link href="/dashboard" className="ms-auto text-xs text-gray-500 transition-colors hover:text-gray-300">{back}</Link>
        </header>
        <main className="mx-auto max-w-7xl px-5 py-7">{children}</main>
      </div>
    </div>
  );
}