"use client";

import * as React from "react";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { LifeBuoy, Zap } from "lucide-react";
import { cn } from "@/lib/utils";
import { panelTexts } from "@/lib/i18n/panel";
import { activePanelHref, panelNavSections } from "@/lib/panel-nav";

type NavProps = {
  className?: string;
  /** Mobile drawer passes a close handler so tapping a link dismisses the sheet. */
  onNavigate?: () => void;
};

export function PanelBrand({ onNavigate }: { onNavigate?: () => void }) {
  return (
    <Link
      href="/"
      onClick={onNavigate}
      className="flex items-center gap-2.5 rounded-lg outline-none focus-visible:ring-2 focus-visible:ring-blue-500/60"
    >
      <span className="grid size-9 shrink-0 place-items-center rounded-xl bg-blue-600 shadow-lg shadow-blue-600/25">
        <Zap className="size-[18px] text-white" fill="currentColor" strokeWidth={1.5} />
      </span>
      <span className="font-display text-[17px] leading-none font-semibold tracking-tight text-white">
        {panelTexts.brand}
      </span>
    </Link>
  );
}

/** The navy column body — shared by the fixed desktop rail and the mobile sheet. */
export function PanelNav({ className, onNavigate }: NavProps) {
  const pathname = usePathname();
  const active = activePanelHref(pathname);

  return (
    <div
      className={cn(
        "flex h-full w-full flex-col bg-[var(--sidebar)] text-white",
        className,
      )}
    >
      <div className="flex h-16 shrink-0 items-center px-5">
        <PanelBrand onNavigate={onNavigate} />
      </div>

      <div className="mx-5 h-px shrink-0 bg-white/10" />

      <nav
        aria-label={panelTexts.header.navigation}
        className="min-h-0 flex-1 overflow-y-auto px-3 py-4 [scrollbar-width:thin]"
      >
        {panelNavSections.map((section, index) => (
          <div key={section.label} className={cn(index > 0 && "mt-5")}>
            <p className="px-3 pb-1.5 text-[11px] font-semibold tracking-wider text-white/40 uppercase">
              {section.label}
            </p>
            <ul className="space-y-0.5">
              {section.items.map((item) => {
                const isActive = active === item.href;
                const Icon = item.icon;
                return (
                  <li key={item.href}>
                    <Link
                      href={item.href}
                      onClick={onNavigate}
                      aria-current={isActive ? "page" : undefined}
                      className={cn(
                        "group flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors outline-none",
                        "focus-visible:ring-2 focus-visible:ring-blue-400/70",
                        isActive
                          ? "bg-blue-600 text-white shadow-sm shadow-blue-600/30"
                          : "text-white/70 hover:bg-white/10 hover:text-white",
                      )}
                    >
                      <Icon
                        className={cn(
                          "size-[18px] shrink-0 transition-colors",
                          isActive ? "text-white" : "text-white/45 group-hover:text-white/90",
                        )}
                      />
                      <span className="truncate">{item.label}</span>
                    </Link>
                  </li>
                );
              })}
            </ul>
          </div>
        ))}
      </nav>

      <div className="shrink-0 p-3">
        <Link
          href="/tickets"
          onClick={onNavigate}
          className="block rounded-xl border border-white/10 bg-white/5 p-3 transition-colors outline-none hover:bg-white/10 focus-visible:ring-2 focus-visible:ring-blue-400/70"
        >
          <span className="flex items-center gap-2 text-sm font-medium text-white">
            <LifeBuoy className="size-4 text-cyan-400" />
            {panelTexts.support.title}
          </span>
          <span className="mt-1 block text-xs leading-snug text-white/50">
            {panelTexts.support.body}
          </span>
        </Link>
      </div>
    </div>
  );
}

/** Fixed rail, desktop only. Mobile uses the Sheet in mobile-nav.tsx. */
export function PanelSidebar() {
  return (
    <aside className="fixed inset-y-0 left-0 z-40 hidden w-64 lg:block">
      <PanelNav />
    </aside>
  );
}

export default PanelSidebar;