import {
  CaretDoubleDown,
  CaretDoubleLeft,
  CaretDoubleRight,
  CaretDoubleUp,
} from "@phosphor-icons/react";
import { useEffect, useMemo, useRef, useState, type CSSProperties, type PropsWithChildren, type ReactNode } from "react";
import { cn } from "../../lib/cn";
import { IconButton } from "../actions";
import { SearchInput } from "../inputs/search-input";
import { UhuruPanelStateProvider, useUhuruPanelState } from "../panel-context";
import {
  matchesUhuruPanelRoute,
  getUhuruPanelLocation,
  useUhuruPanelRoute,
  type UhuruPanelRouteDefinition,
} from "../navigation/panel-route-context";
import {
  filterPanelItems,
  flattenPanelItems,
  UhuruPanelItemView,
  type UhuruPanelItem,
  type UhuruPanelItemRenderContext,
} from "../navigation/panel-item";

export type PanelSide = "left" | "right" | "bottom";

export type PanelConfig = {
  allowResize?: boolean;
  ariaLabel?: string;
  collapsible?: boolean;
  collapsedHeader?: ReactNode;
  defaultCollapsed?: boolean;
  defaultSize?: number;
  expandOnHover?: boolean;
  expandIcon?: ReactNode;
  iconHoverAnimation?: "none" | "lift" | "slide" | "pulse";
  footer?: ReactNode;
  footerRoutes?: PanelFooterRoute[];
  header?: ReactNode;
  beforeFooter?: ReactNode;
  showRail?: boolean;
  maxSize?: number;
  minSize?: number;
  collapsedSize?: number;
};

export type PanelFooterRoute = {
  disabled?: boolean;
  element: ReactNode;
  icon?: ReactNode;
  id: string;
  label: ReactNode;
  path: string;
};

export function PanelFooterRoutes({
  collapsed = false,
  routes,
}: {
  collapsed?: boolean;
  routes?: PanelFooterRoute[];
}) {
  const panelRoute = useUhuruPanelRoute();
  const visibleRoutes = routes ?? [];

  useEffect(() => {
    const matchingRoute = visibleRoutes.find((route) =>
      matchesUhuruPanelRoute(route.path),
    );

    if (
      matchingRoute &&
      panelRoute &&
      panelRoute.activeRoute?.path !== matchingRoute.path
    ) {
      panelRoute.navigate({
        element: matchingRoute.element,
        path: matchingRoute.path,
      });
    }
  }, [panelRoute, visibleRoutes]);

  if (visibleRoutes.length === 0) {
    return null;
  }

  return (
    <nav
      aria-label="Panel footer navigation"
      className={cn(
        "flex shrink-0 border-t border-[var(--uhuru-border-subtle)]",
        collapsed ? "flex-col items-center gap-1 px-2 py-2" : "flex-col gap-1 px-3 py-2",
      )}
    >
      {visibleRoutes.map((route) => {
        const active = panelRoute?.activeRoute?.path === route.path;

        return (
          <button
            aria-current={active ? "page" : undefined}
            aria-label={collapsed ? String(route.label) : undefined}
            className={cn(
              "flex min-h-[var(--uhuru-control-height)] items-center gap-[var(--uhuru-panel-gap)] rounded-[var(--uhuru-radius-md)] text-left text-sm transition",
              collapsed ? "w-12 justify-center px-2" : "w-full 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)]",
              route.disabled ? "cursor-not-allowed opacity-50" : "",
            )}
            disabled={route.disabled}
            key={route.id}
            onClick={() => panelRoute?.navigate({ element: route.element, path: route.path })}
            type="button"
          >
            <span className="grid h-5 w-5 shrink-0 place-items-center [&_svg]:h-5 [&_svg]:w-5">
              {route.icon ?? <span className="h-1.5 w-1.5 rounded-full bg-current opacity-45" />}
            </span>
            <span className={cn("min-w-0 truncate", collapsed ? "sr-only" : "")}>{route.label}</span>
          </button>
        );
      })}
    </nav>
  );
}

export type UhuruPanelHeaderProps = {
  children?: ReactNode;
  className?: string;
  contentClassName?: string;
  description?: ReactNode;
  descriptionClassName?: string;
  leading?: ReactNode;
  leadingClassName?: string;
  title?: ReactNode;
  titleClassName?: string;
  trailing?: ReactNode;
  trailingClassName?: string;
};

export function UhuruPanelHeader({
  children,
  className,
  contentClassName,
  description,
  descriptionClassName,
  leading,
  leadingClassName,
  title,
  titleClassName,
  trailing,
  trailingClassName,
}: UhuruPanelHeaderProps) {
  const panelState = useUhuruPanelState();
  const collapsed = panelState?.collapsed ?? false;
  const side = panelState?.side ?? "left";
  const showRail = panelState?.showRail ?? true;
  const showToggle = panelState?.showToggle ?? true;
  const onToggleCollapsed = panelState?.onToggleCollapsed;
  const expandControlIcon = side === "bottom"
    ? <CaretDoubleUp size={14} />
    : side === "left"
      ? <CaretDoubleRight size={14} />
      : <CaretDoubleLeft size={14} />;
  const collapseControlIcon = side === "bottom"
    ? <CaretDoubleDown size={14} />
    : side === "left"
      ? <CaretDoubleLeft size={14} />
      : <CaretDoubleRight size={14} />;
  const collapseControlLabel = collapsed ? `Expand ${side} panel` : `Collapse ${side} panel`;

  return (
    <div className={cn("flex min-h-[var(--uhuru-control-height)] w-full min-w-0 items-center", className)}>
      {collapsed ? (
        <div className={cn("flex w-full min-w-0 items-center justify-center", showRail ? "" : "pointer-events-none")}>
          {showRail && showToggle && onToggleCollapsed ? (
            <IconButton
              className="mx-auto"
              icon={expandControlIcon}
              label={collapseControlLabel}
              onClick={() => onToggleCollapsed()}
              tone="secondary"
            />
          ) : null}
        </div>
      ) : (
        <div className={cn("flex min-w-0 flex-1 items-center gap-3", contentClassName)}>
          {children ? (
            children
          ) : (
            <>
              {leading ? (
                <div className={cn("shrink-0", leadingClassName)}>{leading}</div>
              ) : null}
              {title || description ? (
                <div className="min-w-0">
                  {title ? (
                    <div className={cn("truncate text-sm font-medium text-[var(--uhuru-text-primary)]", titleClassName)}>
                      {title}
                    </div>
                  ) : null}
                  {description ? (
                    <div className={cn("truncate text-xs text-[var(--uhuru-text-secondary)]", descriptionClassName)}>
                      {description}
                    </div>
                  ) : null}
                </div>
              ) : null}
              {(showToggle && onToggleCollapsed) || trailing ? (
                <div className="ml-auto flex shrink-0 items-center gap-2">
                  {showToggle && onToggleCollapsed ? (
                    <IconButton
                      icon={collapseControlIcon}
                      label={collapseControlLabel}
                      onClick={() => onToggleCollapsed()}
                      tone="secondary"
                    />
                  ) : null}
                  {trailing ? (
                    <div className={cn("shrink-0", trailingClassName)}>{trailing}</div>
                  ) : null}
                </div>
              ) : null}
            </>
          )}
        </div>
      )}
    </div>
  );
}

export type UhuruPanelProps = PropsWithChildren<{
  activeId?: string;
  ariaLabel?: string;
  className?: string;
  config?: PanelConfig;
  defaultRoute?: string;
  emptyState?: ReactNode;
  loading?: boolean;
  onItemSelect?: (item: UhuruPanelItem) => void;
  renderItem?: (item: UhuruPanelItem, context: UhuruPanelItemRenderContext) => ReactNode;
  routes?: UhuruPanelRouteItem[];
  searchable?: boolean;
  searchPlaceholder?: string;
  side: PanelSide;
}>;

export type UhuruPanelRouteItem = UhuruPanelItem | UhuruPanelRouteDefinition;

function normalizePanelRoutes(routes?: UhuruPanelRouteItem[]): UhuruPanelItem[] {
  return (routes ?? []).map((route, index) => {
    const item = route as Partial<UhuruPanelItem> & UhuruPanelRouteDefinition;

    return {
      ...item,
      children: item.children ? normalizePanelRoutes(item.children as UhuruPanelRouteItem[]) : undefined,
      id: item.id ?? item.path ?? `route-${index}`,
      label: item.label ?? item.path ?? `Route ${index + 1}`,
    } as UhuruPanelItem;
  });
}

function getRouteablePanelItems(items: UhuruPanelItem[]) {
  return flattenPanelItems(items).filter((item) => item.route !== false && item.path && item.element);
}

function getPanelRouteDefinitions(items: UhuruPanelItem[]): UhuruPanelRouteDefinition[] {
  return getRouteablePanelItems(items).map((item) => ({
    element: item.element,
    path: item.path,
  }) as UhuruPanelRouteDefinition);
}

function UhuruPanelRouteItems({
  activeId,
  ariaLabel,
  defaultRoute,
  emptyState,
  loading,
  onItemSelect,
  renderItem,
  routes,
  searchable,
  searchPlaceholder,
}: Pick<
  UhuruPanelProps,
  | "activeId"
  | "ariaLabel"
  | "defaultRoute"
  | "emptyState"
  | "loading"
  | "onItemSelect"
  | "renderItem"
  | "routes"
  | "searchable"
  | "searchPlaceholder"
>) {
  const panelState = useUhuruPanelState();
  const panelRoute = useUhuruPanelRoute();
  const collapsed = panelState?.collapsed ?? false;
  const [query, setQuery] = useState("");
  const items = useMemo(() => normalizePanelRoutes(routes), [routes]);
  const flatItems = useMemo(() => flattenPanelItems(items), [items]);
  const routeDefinitions = useMemo(() => getPanelRouteDefinitions(items), [items]);
  const normalizedQuery = query.trim().toLowerCase();
  const visibleItems = useMemo(
    () => (normalizedQuery ? filterPanelItems(items, normalizedQuery) : items),
    [items, normalizedQuery],
  );
  const resolvedActiveId = activeId ?? flatItems.find((item) => (
    item.path && panelRoute?.activeRoute?.path === item.path
  ))?.id;

  useEffect(() => {
    if (routeDefinitions.length === 0) {
      return;
    }

    const location = getUhuruPanelLocation();
    const matchingRoute =
      routeDefinitions.find((route) => route.path === location) ??
      routeDefinitions.find((route) => matchesUhuruPanelRoute(route.path, location));
    const fallbackRoute = defaultRoute
      ? routeDefinitions.find((route) => route.path === defaultRoute)
      : routeDefinitions[0];
    const route = matchingRoute ?? fallbackRoute;

    if (route && panelRoute?.activeRoute?.path !== route.path) {
      panelRoute?.navigate(route);
    }
  }, [defaultRoute, panelRoute, routeDefinitions]);

  if (!loading && items.length === 0) {
    return null;
  }

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

    onItemSelect?.(item);
  }

  return (
    <nav
      aria-label={ariaLabel ?? "Panel navigation"}
      className={cn(
        "min-h-0 flex-1 overflow-y-auto",
        collapsed ? "px-2 py-2" : "px-[var(--uhuru-panel-padding-x)] py-[var(--uhuru-panel-padding-y)]",
      )}
    >
      {searchable && !collapsed ? (
        <div className="mb-3">
          <SearchInput
            aria-label={searchPlaceholder ?? "Search panel"}
            onChange={(event) => setQuery(event.target.value)}
            placeholder={searchPlaceholder ?? "Search panel"}
            value={query}
          />
        </div>
      ) : null}
      {loading ? (
        <p className="m-0 px-3 py-2 text-sm text-[var(--uhuru-text-secondary)]">
          Loading panel items...
        </p>
      ) : null}
      {!loading && visibleItems.length === 0 ? (
        emptyState ?? (
          <p className="m-0 px-3 py-2 text-sm text-[var(--uhuru-text-secondary)]">
            No panel items found.
          </p>
        )
      ) : null}
      {!loading && visibleItems.length > 0 ? (
        <div className={cn("flex flex-col", collapsed ? "gap-1" : "gap-0.5")}>
          {visibleItems.map((item) => (
            <UhuruPanelItemView
              activeId={resolvedActiveId}
              collapsed={collapsed}
              item={item}
              key={item.id}
              onItemSelect={selectItem}
              renderItem={renderItem}
            />
          ))}
        </div>
      ) : null}
    </nav>
  );
}

/**
 * The standalone panel shell owns sizing, collapse, rails, and resize behavior.
 * When rendered inside UhuruAppLayout, the app layout already owns those
 * concerns, so UhuruPanel must not create a second competing panel shell.
 */
function UhuruPanelShell({
  activeId,
  ariaLabel,
  children,
  className,
  config,
  defaultRoute,
  emptyState,
  loading,
  onItemSelect,
  renderItem,
  routes,
  searchable,
  searchPlaceholder,
  side,
}: UhuruPanelProps) {
  const isBottom = side === "bottom";
  const defaultSize = config?.defaultSize ?? (isBottom ? 240 : 280);
  const minSize = config?.minSize ?? (isBottom ? 140 : 220);
  const maxSize = config?.maxSize ?? (isBottom ? 640 : 480);
  const collapsedSize = config?.collapsedSize ?? (isBottom ? 56 : 64);
  const showRail = config?.showRail ?? true;
  const [size, setSize] = useState(Math.min(maxSize, Math.max(minSize, defaultSize)));
  const [collapsed, setCollapsed] = useState(config?.defaultCollapsed ?? false);
  const [isResizing, setIsResizing] = useState(false);
  const draggingRef = useRef(false);
  const panelRoute = useUhuruPanelRoute();

  useEffect(() => {
    if (routes?.length || !config?.footerRoutes?.length) {
      return;
    }

    const allRoutes = (config?.footerRoutes ?? []).map(({ element, path }) => ({ element, path }));
    const location = getUhuruPanelLocation();
    const matchingRoute =
      allRoutes.find((route) => route.path === location) ??
      allRoutes.find((route) => matchesUhuruPanelRoute(route.path, location));
    const fallbackRoute = defaultRoute
      ? allRoutes.find((route) => route.path === defaultRoute)
      : allRoutes[0];
    const route = matchingRoute ?? fallbackRoute;

    if (route && panelRoute?.activeRoute?.path !== route.path) {
      panelRoute?.navigate(route);
    }
  }, [config?.footerRoutes, defaultRoute, panelRoute, routes?.length]);

  useEffect(() => {
    if (!config?.allowResize) {
      return;
    }

    function handleMove(event: PointerEvent) {
      if (!draggingRef.current || collapsed) {
        return;
      }

      const nextSize = isBottom
        ? window.innerHeight - event.clientY
        : side === "left"
          ? event.clientX
          : window.innerWidth - event.clientX;

      setSize(Math.min(maxSize, Math.max(minSize, nextSize)));
    }

    function handleUp() {
      draggingRef.current = false;
      setIsResizing(false);
      document.body.style.cursor = "";
      document.body.style.userSelect = "";
    }

    window.addEventListener("pointermove", handleMove);
    window.addEventListener("pointerup", handleUp);
    return () => {
      window.removeEventListener("pointermove", handleMove);
      window.removeEventListener("pointerup", handleUp);
    };
  }, [collapsed, config?.allowResize, isBottom, maxSize, minSize, side]);

  const panelStyle: CSSProperties = isBottom
    ? collapsed
      ? { height: collapsedSize }
      : { height: size }
    : { width: collapsed ? (showRail ? collapsedSize : 0) : size };
  const hideRailCompletely = collapsed && !showRail && config?.expandOnHover && !isBottom;
  const hasHeader = Boolean(config?.header || config?.collapsedHeader || config?.collapsible);

  return (
    <section
      aria-label={config?.ariaLabel}
      className={cn(
        "flex min-h-0 min-w-0 flex-col bg-[var(--uhuru-surface-default)] text-[var(--uhuru-text-primary)] will-change-[width,height]",
        isResizing ? "transition-none" : "transition-[width,height] duration-300 ease-[cubic-bezier(0.22,1,0.36,1)]",
        isBottom
          ? "sticky bottom-0 z-30 w-full border-t border-[var(--uhuru-border-default)]"
          : hideRailCompletely
            ? "h-full overflow-visible border-transparent"
            : side === "left"
              ? "h-full border-r border-[var(--uhuru-border-default)]"
              : "h-full border-l border-[var(--uhuru-border-default)]",
        className,
      )}
      style={panelStyle}
    >
      {hideRailCompletely ? (
        <button
          aria-label={`Expand ${side} panel`}
          className={cn(
            "absolute inset-y-0 z-10 w-1.5 appearance-none border-0 bg-transparent p-0 opacity-0 outline-none",
            side === "left" ? "-right-1" : "-left-1",
          )}
          onClick={() => setCollapsed(false)}
          onFocus={() => setCollapsed(false)}
          onMouseEnter={() => setCollapsed(false)}
          type="button"
        />
      ) : null}
      <UhuruPanelStateProvider
        collapsed={collapsed}
        collapsedSize={collapsedSize}
        expandOnHover={config?.expandOnHover}
        iconHoverAnimation={config?.iconHoverAnimation}
        onToggleCollapsed={() => setCollapsed((current) => !current)}
        showRail={showRail}
        showToggle={Boolean(config?.collapsible)}
        side={side}
      >
        {hasHeader ? (
          <div
            className={cn(
              "shrink-0 border-b border-[var(--uhuru-border-subtle)] py-2",
              collapsed && !isBottom ? "!px-0" : "px-3",
            )}
          >
            <div className="min-w-0">{collapsed && !isBottom ? (config?.collapsedHeader ?? config?.header) : config?.header}</div>
          </div>
        ) : null}
        <div className={cn("min-h-0", collapsed && isBottom ? "hidden" : "flex flex-1 flex-col", isBottom ? "max-h-[45vh]" : "")}>
          <UhuruPanelRouteItems
            activeId={activeId}
            ariaLabel={ariaLabel ?? config?.ariaLabel}
            defaultRoute={defaultRoute}
            emptyState={emptyState}
            loading={loading}
            onItemSelect={onItemSelect}
            renderItem={renderItem}
            routes={routes}
            searchable={searchable}
            searchPlaceholder={searchPlaceholder}
          />
          {children}
        </div>
        {config?.beforeFooter ? (
          <div className="shrink-0 border-t border-[var(--uhuru-border-subtle)] px-3 py-2">
            {config.beforeFooter}
          </div>
        ) : null}
        {config?.allowResize && !collapsed ? (
          <button
            aria-label={`Resize ${side} panel`}
            className={cn(
              "absolute z-10 touch-none bg-transparent",
              isBottom ? "-top-1 left-0 h-3 w-full cursor-row-resize" : "top-0 h-full w-3 cursor-col-resize",
              side === "left" ? "-right-1.5" : side === "right" ? "-left-1.5" : "",
            )}
            onPointerDown={(event) => {
              event.preventDefault();
              draggingRef.current = true;
              setIsResizing(true);
              document.body.style.cursor = isBottom ? "row-resize" : "col-resize";
              document.body.style.userSelect = "none";
            }}
            type="button"
          />
        ) : null}
        {config?.footer ? (
          <div className="shrink-0 border-t border-[var(--uhuru-border-subtle)] px-3 py-2">
            {config.footer}
          </div>
        ) : null}
        <PanelFooterRoutes collapsed={collapsed && !isBottom} routes={config?.footerRoutes} />
      </UhuruPanelStateProvider>
    </section>
  );
}

function UhuruPanelContent({
  activeId,
  ariaLabel,
  children,
  className,
  config,
  defaultRoute,
  emptyState,
  loading,
  onItemSelect,
  renderItem,
  routes,
  searchable,
  searchPlaceholder,
}: UhuruPanelProps) {
  return (
    <section
      className={cn(
        "flex h-full min-h-0 min-w-0 w-full flex-col bg-[var(--uhuru-surface-default)] text-[var(--uhuru-text-primary)]",
        className,
      )}
    >
      <UhuruPanelRouteItems
        activeId={activeId}
        ariaLabel={ariaLabel ?? config?.ariaLabel}
        defaultRoute={defaultRoute}
        emptyState={emptyState}
        loading={loading}
        onItemSelect={onItemSelect}
        renderItem={renderItem}
        routes={routes}
        searchable={searchable}
        searchPlaceholder={searchPlaceholder}
      />
      {children}
    </section>
  );
}

/**
 * A reusable panel frame for side rails and bottom work areas.
 *
 * Inside UhuruAppLayout, the parent panel owns PanelConfig behavior and this
 * component becomes a full-size content frame, matching UhuruGroupedPanel.
 */
export function UhuruPanel(props: UhuruPanelProps) {
  const parentPanelState = useUhuruPanelState();

  return parentPanelState ? <UhuruPanelContent {...props} /> : <UhuruPanelShell {...props} />;
}

export function Panel({
  children,
  className,
  title,
}: PropsWithChildren<{ className?: string; title?: string }>) {
  return (
    <section className={cn("rounded-[var(--uhuru-radius-lg)] border border-[var(--uhuru-border-default)] bg-[var(--uhuru-surface-default)]", className)}>
      {title ? (
        <div className="border-b border-[var(--uhuru-border-subtle)] px-4 py-3 text-sm font-medium text-[var(--uhuru-text-primary)]">
          {title}
        </div>
      ) : null}
      <div className="p-4">{children}</div>
    </section>
  );
}