import { CaretDown, DotsThreeVertical } from "@phosphor-icons/react";
import {
  useEffect,
  useMemo,
  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 { SearchInput } from "../inputs/search-input";
import { PanelFooterRoutes, type PanelFooterRoute } from "../layout/panel";
import { useUhuruPanelState } from "../panel-context";
import {
  getUhuruPanelLocation,
  matchesUhuruPanelRoute,
  useUhuruPanelRoute,
} from "./panel-route-context";
import { Margin } from "../layout";
import {
  filterPanelItems,
  flattenPanelItems,
  panelIconMotionClassName,
  type UhuruPanelAction,
  type UhuruPanelItem,
  type UhuruPanelItemRenderContext,
} from "./panel-item";

export type {
  UhuruPanelAction,
  UhuruPanelItem,
  UhuruPanelItemRenderContext,
} from "./panel-item";

export type UhuruPanelGroup = {
  collapsible?: boolean;
  defaultExpanded?: boolean;
  id: string;
  icon?: ReactNode;
  items: UhuruPanelItem[];
  label?: ReactNode;
};

export type UhuruGroupedPanelProps = {
  activeId?: string;
  ariaLabel?: string;
  className?: string;
  defaultRoute?: string;
  footer?: ReactNode;
  footerRoutes?: PanelFooterRoute[];
  groups: UhuruPanelGroup[];
  header?: ReactNode;
  collapsedHeader?: ReactNode;
  loading?: boolean;
  emptyState?: ReactNode;
  onItemSelect?: (item: UhuruPanelItem) => void;
  renderItem?: (
    item: UhuruPanelItem,
    context: UhuruPanelItemRenderContext,
  ) => ReactNode;
  searchPlaceholder?: string;
  searchable?: boolean;
};

export function UhuruGroupedPanel({
  activeId,
  ariaLabel = "Side panel navigation",
  className,
  defaultRoute,
  footer,
  footerRoutes,
  groups,
  header,
  collapsedHeader,
  loading = false,
  emptyState = (
    <p className="px-3 py-6 text-center text-sm text-[var(--uhuru-text-tertiary)]">
      No panel items found.
    </p>
  ),
  onItemSelect,
  renderItem,
  searchPlaceholder = "Search panel",
  searchable = false,
}: UhuruGroupedPanelProps) {
  const panelState = useUhuruPanelState();
  const collapsed = panelState?.collapsed ?? false;
  const iconHoverAnimation = panelState?.iconHoverAnimation ?? "none";
  const panelRoute = useUhuruPanelRoute();
  const [search, setSearch] = useState("");

  function selectItem(item: UhuruPanelItem) {
    if (item.route !== false && item.path && item.element) {
      panelRoute?.navigate({ element: item.element, path: item.path });
    } else {
      panelRoute?.clear();
    }

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

  const visibleGroups = useMemo(() => {
    const query = search.trim().toLowerCase();
    if (!query) return groups;

    return groups.flatMap((group) => {
      if (
        String(group.label ?? "")
          .toLowerCase()
          .includes(query)
      )
        return [group];
      const items = filterPanelItems(group.items, query);
      return items.length > 0 ? [{ ...group, items }] : [];
    });
  }, [groups, search]);

  useEffect(() => {
    const routableItems = groups.flatMap((group) =>
      flattenPanelItems(group.items),
    );
    const footerDefinitions = footerRoutes ?? [];
    const location = getUhuruPanelLocation();
    const routeItems = routableItems
      .flatMap((item) =>
        item.path && item.element
          ? [{ element: item.element, path: item.path }]
          : [],
      );
    const allRoutes = [...routeItems, ...footerDefinitions];
    const matchingRoute =
      allRoutes.find((route) => route.path === location) ??
      allRoutes.find((route) => matchesUhuruPanelRoute(route.path, location));
    const defaultItem = matchingRoute ??
      (defaultRoute
        ? routableItems.find(
            (item) => item.id === defaultRoute || item.path === defaultRoute,
          )
        : routableItems[0]);

    if (
      defaultItem?.path &&
      defaultItem.element &&
      panelRoute?.activeRoute?.path !== defaultItem.path
    ) {
      panelRoute?.navigate({
        element: defaultItem.element,
        path: defaultItem.path,
      });
    }
  }, [activeId, defaultRoute, footerRoutes, groups, panelRoute]);

  return (
    <aside
      className={cn(
        "flex h-full w-full flex-col bg-[var(--uhuru-surface-default)] text-[var(--uhuru-text-primary)]",
        "max-w-full",
        className,
      )}
      style={
        collapsed && panelState?.collapsedSize
          ? { maxWidth: panelState.collapsedSize }
          : undefined
      }
    >
      {header || collapsedHeader ? <div className="shrink-0">{collapsed ? (collapsedHeader ?? header) : header}</div> : null}
      <nav
        aria-label={ariaLabel}
        className="min-h-0 flex-1 overflow-y-auto px-[var(--uhuru-panel-padding-x)] py-[var(--uhuru-panel-padding-y)]"
      >
        {searchable && !collapsed ? (
          <Margin margin={{ bottom: 3, top: 0, left: 0, right: 0 }}>
            <SearchInput
              aria-label={searchPlaceholder}
              className="w-full"
              onChange={(event) => setSearch(event.target.value)}
              placeholder={searchPlaceholder}
              value={search}
            />
          </Margin>
        ) : null}
        {loading ? (
          <p className="px-3 py-6 text-center text-sm text-[var(--uhuru-text-tertiary)]">
            Loading panel items...
          </p>
        ) : null}
        {!loading && visibleGroups.length === 0 ? emptyState : null}
        <div
          className={cn(
            "flex flex-col",
            collapsed ? "gap-1" : "gap-[calc(var(--uhuru-stack-gap)*0.7)]",
          )}
        >
          {visibleGroups.map((group) => (
            <UhuruPanelGroupView
              activeId={activeId}
              group={group}
              key={group.id}
              onItemSelect={selectItem}
              renderItem={renderItem}
              collapsed={collapsed}
            />
          ))}
        </div>
      </nav>
      {footer ? <div className="shrink-0">{footer}</div> : null}
      <PanelFooterRoutes collapsed={collapsed} routes={footerRoutes} />
    </aside>
  );
}

export type UhuruUngroupedPanelProps = Omit<
  UhuruGroupedPanelProps,
  "groups"
> & {
  items: UhuruPanelItem[];
};

/** Flat, API-friendly panel navigation with the same item actions and routing as grouped panels. */
export function UhuruUngroupedPanel({
  items,
  ...props
}: UhuruUngroupedPanelProps) {
  const panelState = useUhuruPanelState();
  const collapsed = panelState?.collapsed ?? false;
  const panelRoute = useUhuruPanelRoute();
  const [search, setSearch] = useState("");
  const query = search.trim().toLowerCase();
  const visibleItems = query ? filterPanelItems(items, query) : items;
  const selectItem = (item: UhuruPanelItem) => {
    if (item.route !== false && item.path && item.element)
      panelRoute?.navigate({ element: item.element, path: item.path });
    props.onItemSelect?.(item);
    item.onSelect?.();
  };

  return (
    <aside
      className={cn(
        "flex h-full w-full flex-col bg-[var(--uhuru-surface-default)] text-[var(--uhuru-text-primary)]",
        props.className,
      )}
    >
      {props.header || props.collapsedHeader ? <div className="shrink-0">{collapsed ? (props.collapsedHeader ?? props.header) : props.header}</div> : null}
      <nav
        aria-label={props.ariaLabel ?? "Panel navigation"}
        className="min-h-0 flex-1 overflow-y-auto px-[var(--uhuru-panel-padding-x)] py-[var(--uhuru-panel-padding-y)]"
      >
        {props.searchable && !collapsed ? (
          <SearchInput
            aria-label={props.searchPlaceholder ?? "Search panel"}
            className="mb-3"
            onChange={(event) => setSearch(event.target.value)}
            placeholder={props.searchPlaceholder ?? "Search panel"}
            value={search}
          />
        ) : null}
        {props.loading ? (
          <p className="px-3 py-6 text-center text-sm text-[var(--uhuru-text-tertiary)]">
            Loading panel items...
          </p>
        ) : null}
        {!props.loading && visibleItems.length === 0
          ? (props.emptyState ?? (
              <p className="px-3 py-6 text-center text-sm text-[var(--uhuru-text-tertiary)]">
                No panel items found.
              </p>
            ))
          : null}
        {!props.loading ? (
          <div className="flex flex-col gap-0.5">
            {visibleItems.map((item) => (
              <UhuruPanelItemView
                activeId={props.activeId}
                collapsed={collapsed}
                item={item}
                key={item.id}
                onItemSelect={selectItem}
                renderItem={props.renderItem}
              />
            ))}
          </div>
        ) : null}
      </nav>
      {props.footer ? <div className="shrink-0">{props.footer}</div> : null}
      <PanelFooterRoutes collapsed={collapsed} routes={props.footerRoutes} />
    </aside>
  );
}

function UhuruPanelGroupView({
  activeId,
  group,
  onItemSelect,
  renderItem,
  collapsed = false,
}: {
  activeId?: string;
  group: UhuruPanelGroup;
  onItemSelect?: (item: UhuruPanelItem) => void;
  renderItem?: (
    item: UhuruPanelItem,
    context: UhuruPanelItemRenderContext,
  ) => ReactNode;
  collapsed?: boolean;
}) {
  const [expanded, setExpanded] = useState(group.defaultExpanded ?? true);
  const collapsible = group.collapsible ?? Boolean(group.label);
  const panelState = useUhuruPanelState();
  const iconMotionClass = panelIconMotionClassName(panelState?.iconHoverAnimation ?? "none");

  function handleGroupClick() {
    if (collapsed && !panelState?.expandOnHover) {
      panelState?.onToggleCollapsed?.();
      setExpanded(true);

      const firstItem = group.items[0];
      if (firstItem) {
        onItemSelect?.(firstItem);
      }
      return;
    }

    setExpanded((current) => !current);
  }

  return (
    <section
      aria-labelledby={group.label ? `side-panel-group-${group.id}` : undefined}
    >
      {group.label ? (
        collapsible ? (
          <button
            aria-controls={`side-panel-items-${group.id}`}
            aria-expanded={expanded}
            aria-label={collapsed ? String(group.label) : undefined}
            className={cn(
              "group flex min-h-[var(--uhuru-control-height)] w-full items-center justify-between rounded-[var(--uhuru-radius-md)] py-2 text-left text-xs font-medium uppercase tracking-[0.12em] text-[var(--uhuru-text-tertiary)] transition hover:bg-[var(--uhuru-surface-muted)] hover:text-[var(--uhuru-text-primary)]",
              collapsed ? "h-9 min-h-0 w-9 justify-center p-0" : "mb-1 px-3",
            )}
            id={`side-panel-group-${group.id}`}
            onClick={handleGroupClick}
            type="button"
          >
            <span
              className={cn(
                "flex min-w-0 items-center gap-2",
                collapsed ? "sr-only" : "",
              )}
            >
              {group.icon ? (
                <span className={cn("grid h-5 w-5 shrink-0 place-items-center [&_svg]:h-5 [&_svg]:w-5", iconMotionClass)}>
                  {group.icon}
                </span>
              ) : null}
              <span>{group.label}</span>
            </span>
            {collapsed ? (
              <span className={cn("grid h-9 w-9 place-items-center text-[var(--uhuru-text-secondary)] [&_svg]:h-5 [&_svg]:w-5", iconMotionClass)}>
                {group.icon ?? (
                  <span className="h-2 w-2 rounded-full bg-current opacity-45" />
                )}
              </span>
            ) : null}
            {!collapsed ? (
              <CaretDown
                aria-hidden="true"
                className={cn(
                  "transition-transform",
                  expanded ? "rotate-180" : "",
                )}
                size={16}
                weight="regular"
              />
            ) : null}
          </button>
        ) : (
          <h2
            className={cn(
              "mb-1 flex min-h-[var(--uhuru-control-height)] items-center gap-2 py-2 text-xs font-medium uppercase tracking-[0.12em] text-[var(--uhuru-text-tertiary)]",
              collapsed ? "justify-center px-2" : "px-3",
            )}
            id={`side-panel-group-${group.id}`}
          >
            {collapsed ? (
              group.icon
            ) : (
              <>
                <span>{group.icon}</span>
                <span>{group.label}</span>
              </>
            )}
          </h2>
        )
      ) : null}
      <div
        className={cn(
          "flex flex-col gap-0.5",
          collapsed || (collapsible && !expanded)
            ? "hidden"
            : "ml-6 border-l border-[var(--uhuru-border-subtle)] pl-3",
        )}
        id={`side-panel-items-${group.id}`}
      >
        {group.items.map((item) => (
          <UhuruPanelItemView
            activeId={activeId}
            item={item}
            key={item.id}
            onItemSelect={onItemSelect}
            renderItem={renderItem}
            collapsed={collapsed}
          />
        ))}
      </div>
    </section>
  );
}

function UhuruPanelItemView({
  activeId,
  item,
  onItemSelect,
  renderItem,
  depth = 0,
  collapsed = false,
}: {
  activeId?: string;
  depth?: number;
  item: UhuruPanelItem;
  onItemSelect?: (item: UhuruPanelItem) => void;
  renderItem?: (
    item: UhuruPanelItem,
    context: UhuruPanelItemRenderContext,
  ) => ReactNode;
  collapsed?: boolean;
}) {
  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}
              depth={depth + 1}
              item={child}
              key={child.id}
              onItemSelect={onItemSelect}
              renderItem={renderItem}
              collapsed={collapsed}
            />
          ))}
        </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>
  );
}