import React from 'react';
import { Link, useLocation } from 'react-router-dom';
import type { SubItem } from '@/nav/tree';

type Props = { items?: SubItem[]; fullscreen?: boolean; headerVisible?: boolean };

export default function SubmenuBar({ items = [], fullscreen = false, headerVisible = true }: Props) {
  // Always call hooks first
  const { pathname } = useLocation();
  
  // Single source of truth: props.items. No fallbacks, no demos, no path-based defaults
  if (items.length === 0) return null;

  // Hide submenu on mobile for detail/new/edit pages (only show on index)
  const isDetailPage = /\/(orders|products|coupons|customers)\/(?:new|\d+(?:\/edit)?)$/.test(pathname);
  const hiddenOnMobile = isDetailPage ? 'hidden md:block' : '';

  // Calculate top position based on fullscreen state
  // Fullscreen: top-0 (no contextual headers, submenu is first element)
  // Normal: top-[calc(7rem+32px)] (below WP admin bar + menu bar)
  const topClass = fullscreen ? 'top-0' : 'top-[calc(7rem+32px)]';

  return (
    <div data-submenubar className={`border-b border-border bg-background md:bg-background/95 md:backdrop-blur md:supports-[backdrop-filter]:bg-background/60 ${hiddenOnMobile}`}>
      <div className="px-4 py-2">
        <div className="flex gap-2 overflow-x-auto no-scrollbar">
          {items.map((it) => {
            const key = `${it.label}-${it.path || it.href}`;
            // Exact match for submenu items, or match with sub-paths (e.g., /settings/notifications matches /settings/notifications/staff)
            // Special handling: if item has exact flag, only match exact path
            let isActive = false;
            if (it.path) {
              if (it.exact) {
                isActive = pathname === it.path;
              } else {
                isActive = pathname === it.path || pathname.startsWith(it.path + '/');
              }
            }
            const cls = [
              'ui-ctrl inline-flex items-center gap-2 rounded-md px-2.5 py-1.5 border text-sm whitespace-nowrap',
              'focus:outline-none focus:ring-0 focus:shadow-none',
              isActive ? 'bg-accent text-accent-foreground' : 'hover:bg-accent hover:text-accent-foreground',
            ].join(' ');

            if (it.mode === 'spa' && it.path) {
              return (
                <Link key={key} to={it.path} className={cls} data-discover>
                  {it.label}
                </Link>
              );
            }

            if (it.mode === 'bridge' && it.href) {
              return (
                <a key={key} href={it.href} className={cls} data-discover>
                  {it.label}
                </a>
              );
            }

            return null;
          })}
        </div>
      </div>
    </div>
  );
}