import { CaretDown, DotsThreeVertical } from "@phosphor-icons/react";
import {
  useEffect,
  useRef,
  useState,
  type MouseEvent,
  type ReactNode,
} from "react";
import { cn } from "../../lib/cn";
import { IconButton } from "../actions/icon-button";
import { Menu, type MenuItem } from "../actions/menu";
import { useUhuruPanelState } from "../panel-context";
import { useUhuruPanelRoute } from "./panel-route-context";

export type UhuruPanelAction = Omit<MenuItem, "onSelect"> & {
  onClick: () => void;
};

export type UhuruPanelItem = {
  action?: UhuruPanelAction[];
  active?: boolean;
  badge?: ReactNode;
  children?: UhuruPanelItem[];
  disabled?: boolean;
  element?: ReactNode;
  href?: string;
  icon?: ReactNode;
  id: string;
  label: ReactNode;
  onSelect?: () => void;
  path?: string;
  route?: boolean;
};

export type UhuruPanelItemRenderContext = {
  active: boolean;
  collapsed: boolean;
  depth: number;
  expanded: boolean;
  hasChildren: boolean;
};

export function filterPanelItems(
  items: UhuruPanelItem[],
  query: string,
): UhuruPanelItem[] {
  return items.flatMap((item) => {
    const itemMatches = String(item.label).toLowerCase().includes(query);
    const children = item.children
      ? filterPanelItems(item.children, query)
      : [];
    return itemMatches || children.length > 0
      ? [{ ...item, children: children.length > 0 ? children : item.children }]
      : [];
  });
}

export function flattenPanelItems(items: UhuruPanelItem[]): UhuruPanelItem[] {
  return items.flatMap((item) => [
    item,
    ...(item.children ? flattenPanelItems(item.children) : []),
  ]);
}

export function panelIconMotionClassName(
  animation: "none" | "lift" | "slide" | "pulse",
  groupHover = true,
) {
  const hoverSelector = groupHover ? "group-hover:" : "hover:";

  switch (animation) {
    case "lift":
      return `transition-transform duration-200 motion-reduce:transform-none ${hoverSelector}-translate-y-0.5`;
    case "slide":
      return `transition-transform duration-200 motion-reduce:transform-none ${hoverSelector}translate-x-0.5`;
    case "pulse":
      return `transition-transform duration-200 motion-reduce:transform-none ${hoverSelector}scale-105`;
    default:
      return "";
  }
}

export function UhuruPanelItemView({
  activeId,
  item,
  onItemSelect,
  renderItem,
  depth = 0,
  collapsed = false,
}: {
  activeId?: string;
  collapsed?: boolean;
  depth?: number;
  item: UhuruPanelItem;
  onItemSelect?: (item: UhuruPanelItem) => void;
  renderItem?: (
    item: UhuruPanelItem,
    context: UhuruPanelItemRenderContext,
  ) => ReactNode;
}) {
  const panelRoute = useUhuruPanelRoute();
  const active =
    item.active ??
    (item.id === activeId ||
      Boolean(item.path && panelRoute?.activeRoute?.path === item.path));
  const [expanded, setExpanded] = useState(active);
  const hasChildren = Boolean(item.children?.length);
  const panelState = useUhuruPanelState();
  const iconMotionClass = panelIconMotionClassName(
    panelState?.iconHoverAnimation ?? "none",
  );

  function handleSelect(
    event: MouseEvent<HTMLAnchorElement | HTMLButtonElement>,
  ) {
    if (item.disabled) {
      event.preventDefault();
      return;
    }

    if (item.route !== false && item.path && item.element) {
      event.preventDefault();
    }

    onItemSelect?.(item);
    item.onSelect?.();
  }

  const defaultContent = (
    <>
      {depth === 0 ? (
        <span
          className={cn(
            "grid h-5 w-5 shrink-0 place-items-center text-[var(--uhuru-text-secondary)] [&_svg]:h-5 [&_svg]:w-5",
            iconMotionClass,
          )}
        >
          {item.icon ?? (
            <span className="h-1.5 w-1.5 rounded-full bg-current opacity-45" />
          )}
        </span>
      ) : null}
      <span
        className={cn("min-w-0 flex-1 truncate", collapsed ? "sr-only" : "")}
      >
        {item.label}
      </span>
      {item.badge && !collapsed ? (
        <span className="shrink-0 text-xs text-[var(--uhuru-text-tertiary)]">
          {item.badge}
        </span>
      ) : null}
      {hasChildren && !collapsed ? (
        <CaretDown
          aria-hidden="true"
          className={cn(
            "shrink-0 transition-transform",
            expanded ? "rotate-180" : "",
          )}
          size={16}
          weight="regular"
        />
      ) : null}
    </>
  );
  const content = renderItem
    ? renderItem(item, { active, collapsed, depth, expanded, hasChildren })
    : defaultContent;

  const itemClassName = cn(
    "flex min-h-[var(--uhuru-control-height)] w-full items-center gap-[var(--uhuru-panel-gap)] rounded-[var(--uhuru-radius-md)] py-2 text-left text-sm transition",
    collapsed ? "justify-center px-2" : "px-3",
    active
      ? "bg-[var(--uhuru-surface-muted)] text-[var(--uhuru-text-primary)]"
      : "text-[var(--uhuru-text-secondary)] hover:bg-[var(--uhuru-surface-muted)] hover:text-[var(--uhuru-text-primary)]",
    item.disabled ? "cursor-not-allowed opacity-50" : "",
  );

  return (
    <div>
      <div
        className={cn("flex min-w-0 items-center", depth > 0 ? "gap-2" : "")}
      >
        {depth > 0 ? (
          <span
            className={cn(
              "-ml-[22px] grid h-5 w-5 shrink-0 place-items-center text-[var(--uhuru-text-secondary)] [&_svg]:h-5 [&_svg]:w-5",
              iconMotionClass,
            )}
          >
            {item.icon ?? (
              <span className="h-1.5 w-1.5 rounded-full bg-current opacity-45" />
            )}
          </span>
        ) : null}
        {item.href ? (
          <a
            aria-current={active ? "page" : undefined}
            aria-disabled={item.disabled}
            className={cn(itemClassName, "group min-w-0 flex-1")}
            href={
              item.disabled
                ? undefined
                : (item.href ?? (item.route === false ? undefined : item.path))
            }
            onClick={handleSelect}
            style={{
              paddingLeft: `${depth > 0 ? 0.75 : 0.75 + depth * 1.25}rem`,
            }}
          >
            {content}
          </a>
        ) : (
          <button
            aria-current={active ? "page" : undefined}
            aria-disabled={item.disabled}
            className={cn(itemClassName, "group min-w-0 flex-1")}
            disabled={item.disabled}
            onClick={(event) => {
              handleSelect(event);
              if (hasChildren) {
                setExpanded((current) => !current);
              }
            }}
            style={{
              paddingLeft: `${depth > 0 ? 0.75 : 0.75 + depth * 1.25}rem`,
            }}
            type="button"
          >
            {content}
          </button>
        )}
        {item.action?.length && !collapsed ? (
          <PanelItemActionMenu actions={item.action} />
        ) : null}
      </div>
      {hasChildren && expanded ? (
        <div className="mt-0.5 flex flex-col gap-0.5">
          {item.children?.map((child) => (
            <UhuruPanelItemView
              activeId={activeId}
              collapsed={collapsed}
              depth={depth + 1}
              item={child}
              key={child.id}
              onItemSelect={onItemSelect}
              renderItem={renderItem}
            />
          ))}
        </div>
      ) : null}
    </div>
  );
}

function PanelItemActionMenu({ actions }: { actions: UhuruPanelAction[] }) {
  const containerRef = useRef<HTMLDivElement>(null);
  const [open, setOpen] = useState(false);

  useEffect(() => {
    function handlePointerDown(event: globalThis.PointerEvent) {
      if (!containerRef.current?.contains(event.target as Node)) {
        setOpen(false);
      }
    }

    function handleEscape(event: KeyboardEvent) {
      if (event.key === "Escape") {
        setOpen(false);
      }
    }

    window.addEventListener("pointerdown", handlePointerDown);
    window.addEventListener("keydown", handleEscape);
    return () => {
      window.removeEventListener("pointerdown", handlePointerDown);
      window.removeEventListener("keydown", handleEscape);
    };
  }, []);

  return (
    <div className="relative shrink-0 pr-2" ref={containerRef}>
      <IconButton
        icon={<DotsThreeVertical weight="bold" />}
        label="Row actions"
        onClick={(event) => {
          event.stopPropagation();
          setOpen((current) => !current);
        }}
        tone="ghost"
      />
      <div
        className={cn(
          "absolute right-0 top-[calc(100%+0.35rem)] z-[60] min-w-56 origin-top-right overflow-hidden rounded-[min(var(--uhuru-radius-lg),1rem)] border border-[var(--uhuru-border-default)] bg-[var(--uhuru-surface-default)] shadow-[var(--uhuru-shadow-md)] transition-[max-height,opacity,transform] duration-220 ease-out",
          open
            ? "pointer-events-auto max-h-80 translate-y-0 opacity-100"
            : "pointer-events-none max-h-0 -translate-y-2 opacity-0",
        )}
      >
        <Menu
          items={actions.map((action) => ({
            ...action,
            onSelect: () => {
              action.onClick?.();
              setOpen(false);
            },
          }))}
        />
      </div>
    </div>
  );
}