"use client";

import { useState, type ReactNode } from "react";
import { usePathname, useSearchParams } from "next/navigation";
import { cn } from "@/lib/utils";

// Below lg the fixed sidebar becomes an off-canvas drawer — otherwise mobile
// users scroll past the entire nav before reaching any content. One instance of
// the sidebar renders at both sizes; only its positioning changes.
export function SidebarShell({ children, heading }: { children: ReactNode; heading: string }) {
  const pathname = usePathname();
  const searchParams = useSearchParams();
  const navKey = `${pathname}?${searchParams.toString()}`;
  // Storing the route the drawer was opened on means any navigation closes it
  // automatically, with no effect needed to sync the two.
  const [openedOn, setOpenedOn] = useState<string | null>(null);
  const open = openedOn === navKey;

  return (
    <>
      <div className="print:hidden flex items-center gap-3 border-b border-[#25589a] bg-[linear-gradient(120deg,#2C6BB6_0%,#255ea3_100%)] px-4 py-3 text-white lg:hidden">
        <button
          type="button"
          onClick={() => setOpenedOn(navKey)}
          aria-label="Open navigation menu"
          aria-expanded={open}
          className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl border border-white/25 bg-white/10 transition hover:bg-white/20"
        >
          <svg viewBox="0 0 20 20" className="h-5 w-5 fill-current" aria-hidden="true">
            <path d="M3 5.5h14a.75.75 0 0 0 0-1.5H3a.75.75 0 0 0 0 1.5Zm0 5.25h14a.75.75 0 0 0 0-1.5H3a.75.75 0 0 0 0 1.5ZM3 16h14a.75.75 0 0 0 0-1.5H3a.75.75 0 0 0 0 1.5Z" />
          </svg>
        </button>
        <p className="min-w-0 truncate text-base font-black tracking-tight">{heading}</p>
      </div>

      {open ? (
        <button
          type="button"
          aria-label="Close navigation menu"
          onClick={() => setOpenedOn(null)}
          className="fixed inset-0 z-40 bg-slate-900/50 backdrop-blur-[2px] lg:hidden"
        />
      ) : null}

      <aside
        className={cn(
          "print:hidden fixed inset-y-0 left-0 z-50 flex w-[300px] max-w-[85vw] flex-col overflow-y-auto border-r border-[#25589a] bg-[linear-gradient(180deg,#2C6BB6_0%,#255ea3_65%,#214f89_100%)] p-6 text-white shadow-[inset_0_1px_0_rgba(255,255,255,0.2),0_22px_45px_-28px_rgba(8,28,56,0.85)] transition-transform duration-300",
          open ? "translate-x-0" : "-translate-x-full",
          "lg:z-40 lg:w-80 lg:translate-x-0 lg:rounded-r-3xl",
        )}
      >
        <button
          type="button"
          onClick={() => setOpenedOn(null)}
          aria-label="Close navigation menu"
          className="mb-2 ml-auto flex h-9 w-9 items-center justify-center rounded-xl border border-white/25 bg-white/10 transition hover:bg-white/20 lg:hidden"
        >
          <svg viewBox="0 0 20 20" className="h-4 w-4 fill-current" aria-hidden="true">
            <path d="M5.28 4.22a.75.75 0 0 0-1.06 1.06L8.94 10l-4.72 4.72a.75.75 0 1 0 1.06 1.06L10 11.06l4.72 4.72a.75.75 0 1 0 1.06-1.06L11.06 10l4.72-4.72a.75.75 0 0 0-1.06-1.06L10 8.94Z" />
          </svg>
        </button>
        {children}
      </aside>
    </>
  );
}