"use client";

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

/**
 * Mobile bottom tab bar — premium 5-tab navigacija (Apple HIG limit).
 *
 * 4 najčešća admin pristupa + "Meni" toggle za drawer (pristup celom navu).
 * "Meni" dispatchuje `admin:open-sidebar` event koji AdminMobileSidebar
 * sluša pa otvara full slide-in drawer.
 *
 * Tab struktura izabrana po realnoj admin frekvenciji:
 *   1. Pregled — kontrolna tabla (daily start)
 *   2. Prijave — nove firme za pregled (hourly action)
 *   3. Kompanije — direktorijum management
 *   4. Pretraga — Cmd+K paleta otvorena (search firmu, korisnika, itd.)
 *   5. Meni — otvara puni sidebar drawer
 */

const OPEN_SIDEBAR_EVENT = "admin:open-sidebar";
const OPEN_PALETTE_EVENT = "admin:open-palette";

type NavItem = {
  type: "link" | "action";
  label: string;
  href?: string;
  matchPaths?: string[];
  event?: string;
  icon: React.ReactNode;
};

const items: NavItem[] = [
  {
    type: "link",
    href: "/admin",
    label: "Pregled",
    matchPaths: ["/admin"],
    icon: (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" className="h-5 w-5" aria-hidden="true">
        <rect x="3" y="3" width="7" height="9" rx="1" />
        <rect x="14" y="3" width="7" height="5" rx="1" />
        <rect x="14" y="12" width="7" height="9" rx="1" />
        <rect x="3" y="16" width="7" height="5" rx="1" />
      </svg>
    ),
  },
  {
    type: "link",
    href: "/admin/prijave",
    label: "Prijave",
    icon: (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" className="h-5 w-5" aria-hidden="true">
        <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
        <polyline points="14 2 14 8 20 8" />
        <line x1="9" y1="13" x2="15" y2="13" />
        <line x1="9" y1="17" x2="13" y2="17" />
      </svg>
    ),
  },
  {
    type: "link",
    href: "/admin/kompanije",
    label: "Firme",
    icon: (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" className="h-5 w-5" aria-hidden="true">
        <path d="M3 21h18" />
        <path d="M5 21V7l8-4v18" />
        <path d="M19 21V11l-6-4" />
        <line x1="9" y1="9" x2="9" y2="9.01" />
        <line x1="9" y1="13" x2="9" y2="13.01" />
        <line x1="9" y1="17" x2="9" y2="17.01" />
      </svg>
    ),
  },
  {
    type: "action",
    event: OPEN_PALETTE_EVENT,
    label: "Pretraga",
    icon: (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" className="h-5 w-5" aria-hidden="true">
        <circle cx="11" cy="11" r="8" />
        <path d="m21 21-4.3-4.3" />
      </svg>
    ),
  },
  {
    type: "action",
    event: OPEN_SIDEBAR_EVENT,
    label: "Meni",
    icon: (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" className="h-5 w-5" aria-hidden="true">
        <line x1="3" y1="6" x2="21" y2="6" />
        <line x1="3" y1="12" x2="21" y2="12" />
        <line x1="3" y1="18" x2="21" y2="18" />
      </svg>
    ),
  },
];

export function AdminBottomNav() {
  const pathname = usePathname();

  function isActive(item: NavItem): boolean {
    if (item.type !== "link" || !item.href) return false;
    if (item.matchPaths) return item.matchPaths.includes(pathname);
    return pathname === item.href || pathname.startsWith(`${item.href}/`);
  }

  return (
    <nav
      aria-label="Mobilna admin navigacija"
      className="admin-bottom-nav lg:hidden"
      style={{ paddingBottom: "env(safe-area-inset-bottom)" }}
    >
      <ul className="grid grid-cols-5">
        {items.map((item, idx) => {
          const active = isActive(item);
          const className = `admin-bottom-nav-item${active ? " is-active" : ""}`;

          if (item.type === "action" && item.event) {
            const eventName = item.event;
            return (
              <li key={`action-${idx}`}>
                <button
                  type="button"
                  onClick={() => window.dispatchEvent(new CustomEvent(eventName))}
                  className={className}
                  aria-label={item.label}
                >
                  {item.icon}
                  <span>{item.label}</span>
                </button>
              </li>
            );
          }

          return (
            <li key={item.href}>
              <Link href={item.href!} className={className}>
                {item.icon}
                <span>{item.label}</span>
              </Link>
            </li>
          );
        })}
      </ul>
    </nav>
  );
}