import {
  useCallback,
  useEffect,
  useRef,
  useState,
  type ComponentType,
  type CSSProperties,
  type KeyboardEvent,
  type ReactNode,
} from "react";

export const ADMIN_SHELL_CONTRACT = "b3-wvs-admin-shell-v1";
export const MAX_SETTINGS_SEARCH_QUERY_LENGTH = 120;

/** Matches the index.css breakpoint where the sidebar stacks above main. */
export const STACKED_SHELL_QUERY = "(max-width: 1024px)";

/**
 * On the stacked (phone/tablet) layout the main panel sits below the whole
 * nav and the live preview, so choosing a section would otherwise change
 * content far off screen. Bring the panel's top to just under the sticky
 * topbar and move focus there so VoiceOver continues from the new section.
 */
function revealStackedMainContent(
  main: HTMLElement | null,
  topbar: HTMLElement | null,
): void {
  if (
    !main ||
    typeof window.matchMedia !== "function" ||
    !window.matchMedia(STACKED_SHELL_QUERY).matches
  ) {
    return;
  }

  let stickyOffset = 0;
  if (topbar) {
    const stickyTop = parseFloat(window.getComputedStyle(topbar).top);
    stickyOffset =
      (Number.isFinite(stickyTop) ? stickyTop : 0) + topbar.offsetHeight;
  }

  const target =
    main.getBoundingClientRect().top + window.scrollY - stickyOffset - 12;
  const reduceMotion = window.matchMedia(
    "(prefers-reduced-motion: reduce)",
  ).matches;

  window.scrollTo({
    top: Math.max(0, target),
    behavior: reduceMotion ? "auto" : "smooth",
  });
  main.focus({ preventScroll: true });
}

export type AdminShellNavIconProps = { className?: string };

export type AdminShellNavItem<SectionId extends string> = {
  id: SectionId;
  label: string;
  Icon: ComponentType<AdminShellNavIconProps>;
};

export type AdminShellAction = {
  id: string;
  label: string;
  onClick: () => void;
  disabled?: boolean;
  variant: "primary" | "secondary";
};

export type AdminShellSearch = {
  value: string;
  label: string;
  placeholder: string;
  help: string;
  clearLabel: string;
  clearText: string;
  onChange: (value: string) => void;
  onSubmit?: () => void;
  onFocusResults?: () => void;
};

export type AdminShellPreview = {
  title: string;
  meta: ReactNode;
  content: ReactNode;
  footer: string;
};

export type AdminShellToast = {
  show: boolean;
  type: "success" | "error" | "info";
  message: string;
};

export interface AdminShellProps<SectionId extends string> {
  adminColor: string;
  title: string;
  brandBadge?: ReactNode;
  topbarActions?: AdminShellAction[];
  search: AdminShellSearch;
  navigationLabel: string;
  navItems: Array<AdminShellNavItem<SectionId>>;
  activeSection: SectionId;
  onSelectSection: (section: SectionId) => void;
  preview: AdminShellPreview;
  sidebarFooter?: ReactNode;
  mainContent: ReactNode;
  mainActions?: AdminShellAction[];
  toast: AdminShellToast;
}

function renderActions(actions: AdminShellAction[] | undefined) {
  if (!actions?.length) return null;

  return actions.map((action) => (
    <button
      key={action.id}
      type="button"
      onClick={action.onClick}
      disabled={action.disabled}
      className={`b3-wvs-shell-button is-${action.variant}`}
    >
      {action.label}
    </button>
  ));
}

export function AdminShell<SectionId extends string>({
  adminColor,
  title,
  brandBadge,
  topbarActions,
  search,
  navigationLabel,
  navItems,
  activeSection,
  onSelectSection,
  preview,
  sidebarFooter,
  mainContent,
  mainActions,
  toast,
}: AdminShellProps<SectionId>) {
  const navRef = useRef<HTMLElement>(null);
  const topbarRef = useRef<HTMLElement>(null);
  const mainRef = useRef<HTMLElement>(null);
  const isSearching = search.value.trim().length > 0;
  const navButtonRefs = useRef<Record<string, HTMLButtonElement | null>>({});
  const [navSliderStyle, setNavSliderStyle] = useState<CSSProperties>({
    height: 0,
    width: 0,
    transform: "translate(0,0)",
    opacity: 0,
  });

  const updateNavSlider = useCallback(() => {
    const activeElement = navButtonRefs.current[activeSection];
    const container = navRef.current;
    if (!activeElement || !container) return;

    try {
      const activeRect = activeElement.getBoundingClientRect();
      const containerRect = container.getBoundingClientRect();
      if (activeRect.height === 0 || containerRect.height === 0) return;

      setNavSliderStyle({
        height: activeRect.height,
        width: activeRect.width,
        transform: `translate(${activeRect.left - containerRect.left}px,${activeRect.top - containerRect.top}px)`,
        opacity: 1,
      });
    } catch {
      // Ignore measurements while the admin viewport is changing.
    }
  }, [activeSection]);

  useEffect(() => {
    requestAnimationFrame(updateNavSlider);
  }, [updateNavSlider]);

  useEffect(() => {
    let resizeTimer: number;
    const handleResize = () => {
      window.clearTimeout(resizeTimer);
      resizeTimer = window.setTimeout(
        () => requestAnimationFrame(updateNavSlider),
        50,
      );
    };

    window.addEventListener("resize", handleResize, { passive: true });
    const fallbackTimer = window.setTimeout(updateNavSlider, 150);

    return () => {
      window.removeEventListener("resize", handleResize);
      window.clearTimeout(fallbackTimer);
      window.clearTimeout(resizeTimer);
    };
  }, [updateNavSlider]);

  function handleSearchKeyDown(event: KeyboardEvent<HTMLInputElement>) {
    if (event.key === "Escape" && search.value) {
      event.preventDefault();
      search.onChange("");
      return;
    }

    if (event.key === "Enter" && search.onSubmit) {
      event.preventDefault();
      search.onSubmit();
      return;
    }

    if (event.key === "ArrowDown" && search.value && search.onFocusResults) {
      event.preventDefault();
      search.onFocusResults();
    }
  }

  return (
    <div
      className={`b3-wvs-shell-app is-density-compact${
        isSearching ? " is-searching" : ""
      }`}
      style={{ "--b3-wvs-admin-color": adminColor } as CSSProperties}
      data-density="compact"
      data-admin-shell-contract={ADMIN_SHELL_CONTRACT}
    >
      <header ref={topbarRef} className="b3-wvs-shell-topbar">
        <div className="b3-wvs-shell b3-wvs-shell-topbar-inner">
          <div className="b3-wvs-shell-brand">
            <span className="b3-wvs-shell-brand-mark" aria-hidden="true">
              <BrandLogoMark className="b3-wvs-shell-brand-icon" />
            </span>
            <div className="b3-wvs-shell-brand-text">
              <h1 className="b3-wvs-shell-brand-title">{title}</h1>
            </div>
            {brandBadge}
          </div>
          <div className="b3-wvs-shell-topbar-actions">
            {renderActions(topbarActions)}
          </div>
        </div>
      </header>

      <div className="b3-wvs-shell b3-wvs-shell-body">
        <aside className="b3-wvs-shell-sidebar">
          <div className="b3-wvs-shell-search-block">
            <label
              htmlFor="b3-wvs-settings-search"
              className="b3-wvs-shell-sr-only"
            >
              {search.label}
            </label>

            <div className="b3-wvs-shell-search">
              <span className="b3-wvs-shell-search-icon" aria-hidden="true">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth={2}
                    d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
                  />
                </svg>
              </span>

              <input
                id="b3-wvs-settings-search"
                type="search"
                value={search.value}
                maxLength={MAX_SETTINGS_SEARCH_QUERY_LENGTH}
                onChange={(event) =>
                  search.onChange(
                    event.target.value.slice(
                      0,
                      MAX_SETTINGS_SEARCH_QUERY_LENGTH,
                    ),
                  )
                }
                onKeyDown={handleSearchKeyDown}
                placeholder={search.placeholder}
                aria-describedby="b3-wvs-settings-search-help"
                aria-controls={
                  search.value ? "b3-wvs-settings-search-results" : undefined
                }
                className="b3-wvs-shell-search-input"
              />

              <button
                type="button"
                onClick={() => search.onChange("")}
                disabled={!search.value}
                tabIndex={search.value ? 0 : -1}
                className={`b3-wvs-shell-search-clear ${
                  search.value ? "" : "is-hidden"
                }`}
                aria-label={search.clearLabel}
                aria-hidden={search.value ? undefined : true}
              >
                {search.clearText}
              </button>
            </div>

            <p
              id="b3-wvs-settings-search-help"
              className="b3-wvs-shell-search-help"
            >
              {search.help}
            </p>
          </div>

          <nav
            ref={navRef}
            className="b3-wvs-shell-nav"
            aria-label={navigationLabel}
          >
            <div
              className="b3-wvs-shell-nav-slider"
              style={navSliderStyle}
              aria-hidden="true"
            />

            {navItems.map((item) => {
              const isActive = item.id === activeSection;
              return (
                <button
                  key={item.id}
                  ref={(element) => {
                    navButtonRefs.current[item.id] = element;
                  }}
                  type="button"
                  onClick={() => {
                    onSelectSection(item.id);
                    requestAnimationFrame(() =>
                      revealStackedMainContent(
                        mainRef.current,
                        topbarRef.current,
                      ),
                    );
                  }}
                  className={`b3-wvs-shell-nav-item ${isActive ? "is-active" : ""}`}
                  aria-current={isActive ? "page" : undefined}
                >
                  <item.Icon className="b3-wvs-shell-nav-icon" />
                  <span>{item.label}</span>
                </button>
              );
            })}
          </nav>

          {/*
            Only this block is sticky. The preview must stay in view while the
            settings are edited; the search + nav above scroll with the page so
            the sidebar itself never becomes a second scroll container. The
            preview stage is the one region that scrolls (see index.css).
          */}
          <div className="b3-wvs-shell-sidebar-sticky">
            <div className="b3-wvs-shell-side-card b3-wvs-shell-preview-card">
              <div className="b3-wvs-shell-preview-head">
                <h3 className="b3-wvs-shell-preview-title">{preview.title}</h3>
                <div className="b3-wvs-shell-preview-meta">{preview.meta}</div>
              </div>

              <div className="b3-wvs-admin-preview b3-wvs-shell-preview-stage">
                <div className="b3-wvs-shell-preview-list">
                  {preview.content}
                </div>
              </div>

              <p className="b3-wvs-shell-preview-foot">{preview.footer}</p>
            </div>

            {sidebarFooter}
          </div>
        </aside>

        <main
          ref={mainRef}
          id="b3-wvs-settings-content"
          tabIndex={-1}
          className="b3-wvs-shell-main"
        >
          <div className="b3-wvs-shell-main-panel">
            {mainContent}
            {mainActions?.length ? (
              <div className="b3-wvs-shell-main-actions">
                {renderActions(mainActions)}
              </div>
            ) : null}
          </div>
        </main>
      </div>

      {/* Presentational only. The owning app announces through the persistent
          live regions in `liveAnnouncer`, which also lets an error toast be
          announced assertively — this node was hardcoded to `polite`. It stays
          mounted after it fades out (opacity, not display), so exposing it would
          leave a stale message in the a11y tree. */}
      <div
        aria-hidden="true"
        className={`b3-wvs-shell-toast is-${toast.type} ${
          toast.show ? "" : "is-hidden"
        }`}
      >
        <span className="b3-wvs-shell-toast-dot" aria-hidden="true" />
        <span className="b3-wvs-shell-toast-message">{toast.message}</span>
      </div>
    </div>
  );
}

export function BookIcon({
  className = "bwvs:w-4 bwvs:h-4",
}: AdminShellNavIconProps) {
  return (
    <svg
      className={className}
      fill="none"
      viewBox="0 0 24 24"
      strokeWidth={1.5}
      stroke="currentColor"
      aria-hidden="true"
      focusable="false"
    >
      <path
        strokeLinecap="round"
        strokeLinejoin="round"
        d="M12 6.042A8.967 8.967 0 0 0 6 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 0 1 6 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 0 1 6-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0 0 18 18a8.967 8.967 0 0 0-6 2.292m0-14.25v14.25"
      />
    </svg>
  );
}

export function GearIcon({
  className = "bwvs:w-4 bwvs:h-4",
}: AdminShellNavIconProps) {
  return (
    <svg
      className={className}
      fill="none"
      viewBox="0 0 24 24"
      strokeWidth={1.5}
      stroke="currentColor"
      aria-hidden="true"
      focusable="false"
    >
      <path
        strokeLinecap="round"
        strokeLinejoin="round"
        d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.431.992a7.723 7.723 0 0 1 0 .255c-.007.378.138.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 0 1 0-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28Z"
      />
      <path
        strokeLinecap="round"
        strokeLinejoin="round"
        d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
      />
    </svg>
  );
}

/**
 * Animated B3 Swatches logo mark: the four tiles of the Classic icon, in its
 * colors, with a clockwise pulse. Mirrors the geometry and SMIL animation in
 * assets/b3-swatches-settings-logo.svg used by the WP menu.
 */
export function BrandLogoMark({
  className = "bwvs:w-4 bwvs:h-4",
}: AdminShellNavIconProps) {
  const tiles = [
    { x: 0, y: 0, fill: "#ffffff", opacity: 0.62 },
    { x: 88, y: 0, fill: "#ffffff", opacity: 1 },
    { x: 88, y: 88, fill: "#ffffff", opacity: 0.62 },
    { x: 0, y: 88, fill: "#0b1220", opacity: 0.55 },
  ];
  return (
    <svg
      className={`b3-wvs-brand-logo ${className}`}
      viewBox="0 0 156 156"
      aria-hidden="true"
      focusable="false"
    >
      {tiles.map((tile, index) => (
        <rect
          key={`${tile.x}-${tile.y}`}
          className="b3-wvs-brand-logo-tile"
          x={tile.x}
          y={tile.y}
          width="68"
          height="68"
          rx="19"
          ry="19"
          fill={tile.fill}
          fillOpacity={tile.opacity}
          style={{ animationDelay: `${index * 0.4}s` }}
        />
      ))}
    </svg>
  );
}

export function SwatchIcon({
  className = "bwvs:w-4 bwvs:h-4",
}: AdminShellNavIconProps) {
  return (
    <svg
      className={className}
      fill="none"
      viewBox="0 0 24 24"
      strokeWidth={1.5}
      stroke="currentColor"
      aria-hidden="true"
      focusable="false"
    >
      <rect
        x="3"
        y="3"
        width="7.5"
        height="7.5"
        rx="1.75"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
      <rect
        x="13.5"
        y="3"
        width="7.5"
        height="7.5"
        rx="1.75"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
      <rect
        x="3"
        y="13.5"
        width="7.5"
        height="7.5"
        rx="1.75"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
      <rect
        x="13.5"
        y="13.5"
        width="7.5"
        height="7.5"
        rx="1.75"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  );
}

export function TypeIcon({
  className = "bwvs:w-4 bwvs:h-4",
}: AdminShellNavIconProps) {
  return (
    <svg
      className={className}
      fill="none"
      viewBox="0 0 24 24"
      strokeWidth={1.5}
      stroke="currentColor"
      aria-hidden="true"
      focusable="false"
    >
      <path
        strokeLinecap="round"
        strokeLinejoin="round"
        d="M4.5 6h15m-7.5 0v12m-4.5 0h9"
      />
    </svg>
  );
}

export function TooltipIcon({
  className = "bwvs:w-4 bwvs:h-4",
}: AdminShellNavIconProps) {
  return (
    <svg
      className={className}
      fill="none"
      viewBox="0 0 24 24"
      strokeWidth={1.5}
      stroke="currentColor"
      aria-hidden="true"
      focusable="false"
    >
      <path
        strokeLinecap="round"
        strokeLinejoin="round"
        d="M8 8h8M8 12h5M5 4h14a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H9l-6 4V6a2 2 0 0 1 2-2Z"
      />
    </svg>
  );
}

export function QuantityIcon({
  className = "bwvs:w-4 bwvs:h-4",
}: AdminShellNavIconProps) {
  return (
    <svg
      className={className}
      fill="none"
      viewBox="0 0 24 24"
      strokeWidth={1.5}
      stroke="currentColor"
      aria-hidden="true"
      focusable="false"
    >
      <path
        strokeLinecap="round"
        strokeLinejoin="round"
        d="M3.75 7.5h16.5v9h-16.5v-9Zm4.5 4.5h3m6-1.5v3m-1.5-1.5h3"
      />
    </svg>
  );
}

export function WrenchIcon({
  className = "bwvs:w-4 bwvs:h-4",
}: AdminShellNavIconProps) {
  return (
    <svg
      className={className}
      fill="none"
      viewBox="0 0 24 24"
      strokeWidth={1.5}
      stroke="currentColor"
      aria-hidden="true"
      focusable="false"
    >
      <path
        strokeLinecap="round"
        strokeLinejoin="round"
        d="M11.42 15.17 17.25 21A2.652 2.652 0 0 0 21 17.25l-5.877-5.877m-1.144-1.143v-.001l-.001-.001m-1.143 1.144-.002.001-.001.002m1.146-1.146 2.496-3.03c.317-.384.74-.626 1.208-.766M11.42 15.17l-4.655 5.653a2.548 2.548 0 1 1-3.586-3.586l6.837-5.63m5.108-.233c.55-.164 1.163-.188 1.743-.14a4.5 4.5 0 0 0 4.486-6.336l-3.276 3.277a3.004 3.004 0 0 1-2.25-2.25l3.276-3.276a4.5 4.5 0 0 0-6.336 4.486c.091 1.076-.071 2.264-.904 2.95l-.102.085m-1.745 1.437L5.909 7.5H4.5L2.25 3.75l1.5-1.5L7.5 4.5v1.409l4.26 4.26m-1.745 1.437 1.745-1.437m6.615 8.206L15.75 15.75M4.867 19.125h.008v.008h-.008v-.008Z"
      />
    </svg>
  );
}

export function MotionIcon({
  className = "bwvs:w-4 bwvs:h-4",
}: AdminShellNavIconProps) {
  return (
    <svg
      className={className}
      fill="none"
      viewBox="0 0 24 24"
      strokeWidth={1.5}
      stroke="currentColor"
      aria-hidden="true"
      focusable="false"
    >
      <path
        strokeLinecap="round"
        strokeLinejoin="round"
        d="M3.75 12h3.75l2.25-7.5 4.5 15 2.25-7.5h3.75"
      />
    </svg>
  );
}