"use client";
import { ComponentData } from "@alpaca-headless/alpaca-headless";

import React, {
  Fragment,
  ReactElement,
  ReactNode,
  useCallback,
  useEffect,
  useMemo,
  useRef,
  useState,
} from "react";

interface MultiComponentEditorProps {
  children: ReactNode;
  component: ComponentData;
  placeholderName: string;
  thumbZoom?: number;
  thumbWidth?: string;
  thumbHeight?: string;
  onSelectedComponentChange?: (payload: {
    selectedId: string | null;
    selectedIndex: number;
  }) => void;
}

export function MultiComponentEditor({
  children,
  component,
  placeholderName,
  thumbZoom,
  thumbWidth,
  thumbHeight,
  onSelectedComponentChange,
}: MultiComponentEditorProps) {
  const [selectedId, setSelectedId] = useState<string | null>(null);
  const thumbnailContainerRef = useRef<HTMLDivElement | null>(null);
  const placeholder = component.placeholders.find(
    (x) => x.name === placeholderName
  );
  const components = useMemo(
    () => placeholder?.components ?? null,
    [placeholder]
  );

  const handleMessage = useCallback(
    (event: MessageEvent) => {
      const data = event.data;
      if (!data || !components) return;

      if (data.type === "componentsSelected") {
        setSelectedId(data.componentIds?.[0] ?? null);
        return;
      }

      // Parhelia (editing-bridge) selects the surrounding component as a
      // whole, so only ids that resolve to one of our items may change the
      // selection — everything else would snap back to the first item.
      if (
        data.family === "parhelia/editing-bridge" &&
        data.name === "setSelection"
      ) {
        const ids: string[] = data.payload?.componentIds ?? [];
        const matches = components.filter((c: ComponentData) =>
          ids.some((id) => matchesComponent(id, c))
        );
        if (matches.length === 1) {
          setSelectedId(matches[0].id);
        } else if (matches.length > 1) {
          console.warn(
            "[MultiComponentEditor] ambiguous setSelection: %d components matched ids %o, selecting first",
            matches.length,
            ids
          );
          setSelectedId(matches[0].id);
        }
      }
    },
    [components]
  );

  useEffect(() => {
    window.addEventListener("message", handleMessage);

    return () => {
      window.removeEventListener("message", handleMessage);
    };
  }, [handleMessage]);

  // Parhelia's interaction overlay swallows click and pointerup before they
  // reach the thumbnails (its pointer capture retargets the release event),
  // but pointerdown still hits the DOM — select thumbnails with a native
  // capture listener so switching works in both editors.
  useEffect(() => {
    const container = thumbnailContainerRef.current;
    if (!container) return;

    const handlePointerDown = (event: PointerEvent) => {
      if (event.button !== 0) return;
      const thumb = (event.target as Element | null)?.closest(
        "[data-mce-component-id]"
      );
      const id = thumb?.getAttribute("data-mce-component-id");
      if (id) {
        setSelectedId(id);
        selectComponents([id]);
      }
    };

    container.addEventListener("pointerdown", handlePointerDown, true);
    return () => {
      container.removeEventListener("pointerdown", handlePointerDown, true);
    };
  }, []);

  const selectedIndex =
    components?.findIndex((x: ComponentData) => x.id === selectedId) ?? -1;
  const resolvedIndex = selectedIndex < 0 ? 0 : selectedIndex;
  const resolvedComponent = components?.[resolvedIndex] ?? null;
  const resolvedId = resolvedComponent?.id ?? null;

  useEffect(() => {
    if (resolvedId !== null && selectedId !== resolvedId) {
      setSelectedId(resolvedId);
    }
  }, [resolvedId, selectedId]);

  useEffect(() => {
    onSelectedComponentChange?.({
      selectedId: resolvedId,
      selectedIndex: resolvedIndex,
    });
  }, [resolvedId, resolvedIndex, onSelectedComponentChange]);

  if (!placeholder || !components) return;

  const childrenArray = React.Children.toArray(children) as ReactElement[];

  const filteredChildren = childrenArray.filter(
    (child) => child.type !== "script"
  );

  return (
    <>
      {filteredChildren[resolvedIndex]}
      <div className="a-editor-mce" ref={thumbnailContainerRef}>
        <script
          data-placeholder-start={placeholder.key}
          data-orientation="horizontal"
        />
        {filteredChildren.map((x, index) => thumbnail(x, index))}
        <script data-placeholder-end={placeholder.key} />
      </div>
    </>
  );

  function thumbnail(x: React.ReactNode, index: number) {
    const style: {
      height?: string;
      width?: string;
      zoom?: number;
      transform?: string;
    } = {};

    if (thumbHeight) {
      style.height = thumbHeight;
    }
    if (thumbWidth) {
      style.width = thumbWidth;
    }

    // Mid-transition renders (RSC refetch, fresh inserts) can deliver child
    // elements whose nesting doesn't match yet — render an empty tile for
    // that frame instead of crashing into the placeholder error boundary.
    const componentArray = (x as any).props?.children?.props?.children;
    const thumbnailContent = Array.isArray(componentArray)
      ? componentArray.slice(1, -1)
      : null;

    const component = components![index];

    return (
      <Fragment key={index}>
        <div
          className={
            "a-editor-mce-thumbnail" +
            (index === resolvedIndex ? " a-editor-mce-thumbnail--selected" : "")
          }
          style={style}
          data-mce-component-id={component.id}
        >
          <script
            data-component-start={component.id}
            data-itemid={
              component._editor?.linkedComponentItem?.id || component.id
            }
            data-layoutid={component._editor?.hostingPageItem?.id}
          />
          <div style={{ pointerEvents: "none", zoom: thumbZoom || 0.25 }}>
            {thumbnailContent}
          </div>
          <script data-component-end={component.id} />
        </div>
        <div data-dropzone={component.id}></div>
      </Fragment>
    );
  }
}

function matchesComponent(id: string, component: ComponentData) {
  const normalized = normalizeId(id);
  if (!normalized) return false;
  return (
    normalized === normalizeId(component.id) ||
    normalized === normalizeId(component._editor?.linkedComponentItem?.id)
  );
}

function normalizeId(id: string | undefined | null) {
  // Like Editor/packages/core/src/editor/utils.ts#stripGuid, but also removes
  // dashes to handle Parhelia's editing-bridge id format variations.
  return id ? id.replace(/[{}-]/g, "").toLowerCase() : null;
}

function selectComponents(componentIds: string[]) {
  window.top?.window.postMessage(
    { componentIds, type: "componentsSelected" },
    "*"
  );
}