import {
  ArrowLeft,
  Gift,
  PartyPopper,
  RotateCcw,
  SkipForward,
} from 'lucide-react';
import {
  type CSSProperties,
  type PointerEvent as ReactPointerEvent,
  useCallback,
  useEffect,
  useRef,
  useState,
} from 'react';

import type {
  BabyObjectMatchDraft,
  BabyObjectMatchItemAsset,
  BabyObjectMatchVisualAsset,
  BabyObjectMatchVisualAssetKind,
} from '../../../packages/shared/src/contracts/edutainmentBabyObject';
import type {
  MocapHandInput,
  MocapInputCommand,
  UseMocapInputResult,
} from '../../services/useMocapInput';
import { useMocapInput } from '../../services/useMocapInput';
import { ResolvedAssetImage } from '../ResolvedAssetImage';

const BABY_OBJECT_MATCH_SUCCESS_TARGET = 20;
const BABY_OBJECT_MATCH_GIFT_APPEAR_DURATION_MS = 620;
const BABY_OBJECT_MATCH_GIFT_OPEN_DURATION_MS = 640;
const BABY_OBJECT_MATCH_ITEM_APPEAR_DURATION_MS = 620;
const BABY_OBJECT_MATCH_FEEDBACK_DURATION_MS = 1180;
const BABY_OBJECT_MATCH_MIN_HORIZONTAL_MOVE_DISTANCE = 0.05;
const BABY_OBJECT_MATCH_HAND_PATH_LIMIT = 16;

type BabyObjectMatchRuntimeShellProps = {
  draft: BabyObjectMatchDraft;
  embedded?: boolean;
  enableMocapInput?: boolean;
  mocapInput?: UseMocapInputResult | null;
  random?: BabyObjectMatchRandom;
  onBack?: () => void;
  onNextLevel?: () => void;
};

type BasketSide = 'left' | 'right';
type RuntimePhase =
  | 'gift-entering'
  | 'gift-opening'
  | 'item-appearing'
  | 'active'
  | 'correct'
  | 'wrong'
  | 'complete';

type RuntimeRound = {
  item: BabyObjectMatchItemAsset;
  baskets: Record<BasketSide, BabyObjectMatchItemAsset>;
};

type DragState = {
  side: BasketSide;
  startX: number;
  lastX: number;
};

type RuntimeHandPoint = {
  x: number;
  y: number;
};

type RuntimeMocapHandPaths = {
  left: RuntimeHandPoint[];
  right: RuntimeHandPoint[];
};

type BabyObjectMatchRandom = () => number;
type BabyObjectMatchStageStyle = CSSProperties &
  Partial<
    Record<
      | '--baby-object-ui-frame-image'
      | '--baby-object-gift-box-image'
      | '--baby-object-basket-image'
      | '--baby-object-smoke-image',
      string
    >
  >;

function pickRandomIndex(length: number, random: BabyObjectMatchRandom) {
  if (length <= 1) {
    return 0;
  }

  return Math.min(length - 1, Math.floor(random() * length));
}

function buildRuntimeRound(
  draft: BabyObjectMatchDraft,
  random: BabyObjectMatchRandom,
): RuntimeRound {
  const items = draft.itemAssets;
  const item = items[pickRandomIndex(items.length, random)] ?? items[0]!;

  return {
    item,
    baskets: {
      left: items[0]!,
      right: items[1]!,
    },
  };
}

function isHorizontalDrag(dragState: DragState) {
  return (
    Math.abs(dragState.lastX - dragState.startX) >=
    BABY_OBJECT_MATCH_MIN_HORIZONTAL_MOVE_DISTANCE
  );
}

function mocapHandToRuntimePoint(
  hand: MocapHandInput | null | undefined,
): RuntimeHandPoint | null {
  if (!hand) {
    return null;
  }

  return { x: hand.x, y: hand.y };
}

function appendRuntimeHandPoint(
  points: RuntimeHandPoint[],
  point: RuntimeHandPoint,
) {
  return [...points, point].slice(-BABY_OBJECT_MATCH_HAND_PATH_LIMIT);
}

function hasRuntimeHorizontalMovePath(points: RuntimeHandPoint[]) {
  if (points.length < 3) {
    return false;
  }

  const xValues = points.map((point) => point.x);
  return (
    Math.max(...xValues) - Math.min(...xValues) >=
    BABY_OBJECT_MATCH_MIN_HORIZONTAL_MOVE_DISTANCE
  );
}

function resolveMocapHandPaths(
  command: MocapInputCommand,
  currentPaths: RuntimeMocapHandPaths,
) {
  // 本地 mocap 当前按摄像头视角输出 handedness，这里换回用户身体视角再选篮。
  const leftPoint = mocapHandToRuntimePoint(command.rightHand);
  const rightPoint = mocapHandToRuntimePoint(command.leftHand);

  return {
    left: leftPoint
      ? appendRuntimeHandPoint(currentPaths.left, leftPoint)
      : currentPaths.left,
    right: rightPoint
      ? appendRuntimeHandPoint(currentPaths.right, rightPoint)
      : currentPaths.right,
  } satisfies RuntimeMocapHandPaths;
}

function resolveMocapHorizontalMoveSide(
  paths: RuntimeMocapHandPaths,
): BasketSide | null {
  if (hasRuntimeHorizontalMovePath(paths.left)) {
    return 'left';
  }

  if (hasRuntimeHorizontalMovePath(paths.right)) {
    return 'right';
  }

  return null;
}

function buildMocapPacketKey(
  command: MocapInputCommand,
  rawPacketPreview: UseMocapInputResult['rawPacketPreview'],
) {
  return rawPacketPreview?.receivedAtMs !== undefined
    ? `${rawPacketPreview.receivedAtMs}:${rawPacketPreview.text}`
    : JSON.stringify(command);
}

function findVisualAsset(
  draft: BabyObjectMatchDraft,
  kind: BabyObjectMatchVisualAssetKind,
): BabyObjectMatchVisualAsset | null {
  return (
    draft.visualPackage?.assets.find((asset) => asset.assetKind === kind) ??
    null
  );
}

function buildCssImageValue(src: string) {
  return `url("${src.replace(/"/gu, '\\"')}")`;
}

export function BabyObjectMatchRuntimeShell({
  draft,
  embedded = false,
  enableMocapInput = true,
  mocapInput = null,
  random,
  onBack,
  onNextLevel,
}: BabyObjectMatchRuntimeShellProps) {
  const randomRef = useRef<BabyObjectMatchRandom>(
    random ?? (() => Math.random()),
  );
  const introTimerRef = useRef<number | null>(null);
  const feedbackTimerRef = useRef<number | null>(null);
  const dragStateRef = useRef<DragState | null>(null);
  const handledMocapPacketKeyRef = useRef<string | null>(null);
  const latestMocapPacketKeyRef = useRef<string | null>(null);
  const mocapHandPathsRef = useRef<RuntimeMocapHandPaths>({
    left: [],
    right: [],
  });
  const [phase, setPhase] = useState<RuntimePhase>('gift-entering');
  const [successCount, setSuccessCount] = useState(0);
  const [round, setRound] = useState<RuntimeRound | null>(() =>
    buildRuntimeRound(draft, randomRef.current),
  );
  const [feedbackText, setFeedbackText] = useState<string | null>(null);
  const [lastTargetSide, setLastTargetSide] = useState<BasketSide | null>(null);
  const liveMocapInput = useMocapInput({
    enabled: enableMocapInput && !mocapInput,
  });
  const resolvedMocapInput = mocapInput ?? liveMocapInput;
  const backgroundAsset = findVisualAsset(draft, 'background');
  const uiFrameAsset = findVisualAsset(draft, 'ui-frame');
  const giftBoxAsset = findVisualAsset(draft, 'gift-box');
  const basketAsset = findVisualAsset(draft, 'basket');
  const smokeAsset = findVisualAsset(draft, 'smoke-puff');
  const stageStyle: BabyObjectMatchStageStyle = {
    ...(uiFrameAsset
      ? {
          '--baby-object-ui-frame-image': buildCssImageValue(
            uiFrameAsset.imageSrc,
          ),
        }
      : {}),
    ...(giftBoxAsset
      ? {
          '--baby-object-gift-box-image': buildCssImageValue(
            giftBoxAsset.imageSrc,
          ),
        }
      : {}),
    ...(basketAsset
      ? {
          '--baby-object-basket-image': buildCssImageValue(
            basketAsset.imageSrc,
          ),
        }
      : {}),
    ...(smokeAsset
      ? {
          '--baby-object-smoke-image': buildCssImageValue(
            smokeAsset.imageSrc,
          ),
        }
      : {}),
  };

  const progressText = `${successCount}/${BABY_OBJECT_MATCH_SUCCESS_TARGET}`;
  const isComplete = phase === 'complete';
  const currentItem = round?.item ?? null;
  const isJudgementOpen = phase === 'active';
  const shouldShowCurrentItem =
    currentItem &&
    (phase === 'item-appearing' ||
      phase === 'active' ||
      phase === 'correct' ||
      phase === 'wrong');
  const shouldShowGift = phase === 'gift-entering' || phase === 'gift-opening';
  const shouldShowSmoke =
    phase === 'gift-opening' || phase === 'item-appearing';

  useEffect(() => {
    randomRef.current = random ?? (() => Math.random());
  }, [random]);

  useEffect(() => {
    latestMocapPacketKeyRef.current = resolvedMocapInput.latestCommand
      ? buildMocapPacketKey(
          resolvedMocapInput.latestCommand,
          resolvedMocapInput.rawPacketPreview,
        )
      : null;
  }, [resolvedMocapInput.latestCommand, resolvedMocapInput.rawPacketPreview]);

  const clearFeedbackTimer = useCallback(() => {
    if (feedbackTimerRef.current !== null) {
      window.clearTimeout(feedbackTimerRef.current);
      feedbackTimerRef.current = null;
    }
  }, []);

  const clearIntroTimer = useCallback(() => {
    if (introTimerRef.current !== null) {
      window.clearTimeout(introTimerRef.current);
      introTimerRef.current = null;
    }
  }, []);

  const resetInputPaths = useCallback(() => {
    dragStateRef.current = null;
    handledMocapPacketKeyRef.current = null;
    mocapHandPathsRef.current = { left: [], right: [] };
  }, []);

  useEffect(() => {
    clearIntroTimer();

    if (phase === 'gift-entering') {
      introTimerRef.current = window.setTimeout(() => {
        introTimerRef.current = null;
        setPhase('gift-opening');
      }, BABY_OBJECT_MATCH_GIFT_APPEAR_DURATION_MS);
      return clearIntroTimer;
    }

    if (phase === 'gift-opening') {
      introTimerRef.current = window.setTimeout(() => {
        introTimerRef.current = null;
        setPhase('item-appearing');
      }, BABY_OBJECT_MATCH_GIFT_OPEN_DURATION_MS);
      return clearIntroTimer;
    }

    if (phase === 'item-appearing') {
      introTimerRef.current = window.setTimeout(() => {
        introTimerRef.current = null;
        resetInputPaths();
        handledMocapPacketKeyRef.current = latestMocapPacketKeyRef.current;
        setPhase('active');
      }, BABY_OBJECT_MATCH_ITEM_APPEAR_DURATION_MS);
      return clearIntroTimer;
    }

    return clearIntroTimer;
  }, [clearIntroTimer, phase, resetInputPaths]);

  const resetRuntime = useCallback(() => {
    clearIntroTimer();
    clearFeedbackTimer();
    resetInputPaths();
    setSuccessCount(0);
    setRound(buildRuntimeRound(draft, randomRef.current));
    setFeedbackText(null);
    setLastTargetSide(null);
    setPhase('gift-entering');
  }, [clearFeedbackTimer, clearIntroTimer, draft, resetInputPaths]);

  const finishFeedback = useCallback(
    (nextSuccessCount: number, wasCorrect: boolean) => {
      clearIntroTimer();
      clearFeedbackTimer();
      feedbackTimerRef.current = window.setTimeout(() => {
        feedbackTimerRef.current = null;
        if (wasCorrect) {
          if (nextSuccessCount >= BABY_OBJECT_MATCH_SUCCESS_TARGET) {
            setFeedbackText('恭喜你！小朋友！');
            setRound(null);
            setPhase('complete');
            return;
          }

          setRound(buildRuntimeRound(draft, randomRef.current));
          setFeedbackText(null);
          setLastTargetSide(null);
          resetInputPaths();
          setPhase('gift-entering');
          return;
        }

        setFeedbackText(null);
        setLastTargetSide(null);
        resetInputPaths();
        setPhase('active');
      }, BABY_OBJECT_MATCH_FEEDBACK_DURATION_MS);
    },
    [clearFeedbackTimer, clearIntroTimer, draft, resetInputPaths],
  );

  const sendItemToBasket = useCallback(
    (side: BasketSide) => {
      if (!isJudgementOpen || !round) {
        return;
      }

      const isCorrect = round.baskets[side].itemId === round.item.itemId;
      setLastTargetSide(side);
      if (isCorrect) {
        const nextSuccessCount = successCount + 1;
        setSuccessCount(nextSuccessCount);
        setFeedbackText('真棒');
        setPhase('correct');
        finishFeedback(nextSuccessCount, true);
        return;
      }

      setFeedbackText('再想一想吧');
      setPhase('wrong');
      finishFeedback(successCount, false);
    },
    [finishFeedback, isJudgementOpen, round, successCount],
  );

  useEffect(
    () => () => {
      clearIntroTimer();
      clearFeedbackTimer();
    },
    [clearFeedbackTimer, clearIntroTimer],
  );

  useEffect(() => {
    const command = resolvedMocapInput.latestCommand;
    if (!command || isComplete) {
      return;
    }

    const packetKey = buildMocapPacketKey(
      command,
      resolvedMocapInput.rawPacketPreview,
    );
    if (handledMocapPacketKeyRef.current === packetKey) {
      return;
    }
    handledMocapPacketKeyRef.current = packetKey;

    if (!isJudgementOpen) {
      resetInputPaths();
      return;
    }

    const nextPaths = resolveMocapHandPaths(command, mocapHandPathsRef.current);
    mocapHandPathsRef.current = nextPaths;

    const targetSide = resolveMocapHorizontalMoveSide(nextPaths);
    if (targetSide) {
      sendItemToBasket(targetSide);
      resetInputPaths();
    }
  }, [
    isComplete,
    isJudgementOpen,
    resetInputPaths,
    resolvedMocapInput.latestCommand,
    resolvedMocapInput.rawPacketPreview,
    sendItemToBasket,
  ]);

  const getPointerUnitX = (
    event: ReactPointerEvent<HTMLElement>,
    element: HTMLElement,
  ) => {
    const rect = element.getBoundingClientRect();
    const width = rect.width || 1;
    return Math.max(0, Math.min(1, (event.clientX - rect.left) / width));
  };

  const handlePointerDown = (event: ReactPointerEvent<HTMLElement>) => {
    if (!isJudgementOpen) {
      return;
    }

    if (event.button !== 0 && event.button !== 2) {
      return;
    }

    const side: BasketSide = event.button === 2 ? 'right' : 'left';
    const pointerX = getPointerUnitX(event, event.currentTarget);
    dragStateRef.current = {
      side,
      startX: pointerX,
      lastX: pointerX,
    };
    event.preventDefault();
    if (typeof event.currentTarget.setPointerCapture === 'function') {
      event.currentTarget.setPointerCapture(event.pointerId);
    }
  };

  const handlePointerMove = (event: ReactPointerEvent<HTMLElement>) => {
    if (!isJudgementOpen) {
      dragStateRef.current = null;
      return;
    }

    if (!dragStateRef.current) {
      return;
    }

    dragStateRef.current = {
      ...dragStateRef.current,
      lastX: getPointerUnitX(event, event.currentTarget),
    };
  };

  const handlePointerUp = (event: ReactPointerEvent<HTMLElement>) => {
    const dragState = dragStateRef.current;
    dragStateRef.current = null;
    if (
      typeof event.currentTarget.hasPointerCapture === 'function' &&
      event.currentTarget.hasPointerCapture(event.pointerId)
    ) {
      event.currentTarget.releasePointerCapture(event.pointerId);
    }

    if (!dragState || !isHorizontalDrag(dragState)) {
      return;
    }

    sendItemToBasket(dragState.side);
  };

  return (
    <main
      className={`baby-object-runtime${embedded ? ' baby-object-runtime--embedded' : ''}`}
      data-testid="baby-object-match-runtime"
    >
      <section
        className={`baby-object-runtime__stage${
          backgroundAsset ? ' baby-object-runtime__stage--skinned' : ''
        }`}
        style={stageStyle}
        onPointerDown={handlePointerDown}
        onPointerMove={handlePointerMove}
        onPointerUp={handlePointerUp}
        onPointerCancel={handlePointerUp}
        onContextMenu={(event) => event.preventDefault()}
      >
        {backgroundAsset ? (
          <ResolvedAssetImage
            src={backgroundAsset.imageSrc}
            alt=""
            className="baby-object-runtime__background-image"
            data-testid="baby-object-background-image"
            aria-hidden="true"
          />
        ) : null}

        {onBack ? (
          <button
            type="button"
            className="baby-object-runtime__back"
            onClick={onBack}
            aria-label="返回"
            title="返回"
          >
            <ArrowLeft className="h-5 w-5" />
          </button>
        ) : null}

        <div className="baby-object-runtime__subtitle" role="status">
          将物品放入对应的篮子里
        </div>

        <div className="baby-object-runtime__counter" aria-label="成功次数">
          {progressText}
        </div>

        {shouldShowGift ? (
          <div
            className={`baby-object-runtime__gift${
              giftBoxAsset ? ' baby-object-runtime__gift--skinned' : ''
            }${
              phase === 'gift-entering'
                ? ' baby-object-runtime__gift--entering'
                : ''
            }${
              phase === 'gift-opening'
                ? ' baby-object-runtime__gift--opening baby-object-runtime__gift--open'
                : ''
            }`}
            aria-label="礼物盒"
          >
            {giftBoxAsset ? (
              <ResolvedAssetImage
                src={giftBoxAsset.imageSrc}
                alt="礼物盒"
                className="baby-object-runtime__gift-image"
              />
            ) : (
              <Gift className="baby-object-runtime__gift-icon" />
            )}
          </div>
        ) : null}

        {shouldShowSmoke ? (
          <div
            className={`baby-object-runtime__smoke${
              smokeAsset ? ' baby-object-runtime__smoke--skinned' : ''
            }${
              phase === 'item-appearing'
                ? ' baby-object-runtime__smoke--releasing'
                : ''
            }`}
            data-testid="baby-object-smoke-effect"
            aria-hidden="true"
          />
        ) : null}

        <div
          className={`baby-object-runtime__item${
            shouldShowCurrentItem ? ' baby-object-runtime__item--visible' : ''
          }${
            phase === 'item-appearing'
              ? ' baby-object-runtime__item--appearing'
              : ''
          }${
            phase === 'correct'
              ? ` baby-object-runtime__item--to-${lastTargetSide ?? 'left'}`
              : phase === 'wrong'
                ? ` baby-object-runtime__item--wrong-${lastTargetSide ?? 'left'}`
                : ''
          }`}
          data-testid="baby-object-current-item"
          aria-live="polite"
        >
          {shouldShowCurrentItem ? (
            <>
              <ResolvedAssetImage
                src={currentItem.imageSrc}
                alt={currentItem.itemName}
                className="baby-object-runtime__item-image"
              />
              <span className="baby-object-runtime__item-name">
                {currentItem.itemName}
              </span>
            </>
          ) : null}
        </div>

        {feedbackText ? (
          <div
            className={`baby-object-runtime__feedback baby-object-runtime__feedback--${phase}`}
          >
            {feedbackText}
          </div>
        ) : null}

        {isComplete ? (
          <div className="baby-object-runtime__complete" role="dialog">
            <PartyPopper className="h-8 w-8" />
            <div>恭喜你！小朋友！</div>
            <div className="baby-object-runtime__complete-actions">
              <button type="button" onClick={resetRuntime}>
                <RotateCcw className="h-4 w-4" />
                再来一次
              </button>
              <button type="button" onClick={onNextLevel}>
                <SkipForward className="h-4 w-4" />
                下一关
              </button>
            </div>
          </div>
        ) : null}

        <div className="baby-object-runtime__baskets">
          {(['left', 'right'] as const).map((side) => {
            const basketItem =
              round?.baskets[side] ?? draft.itemAssets[side === 'left' ? 0 : 1];

            return (
              <div
                key={side}
                className={`baby-object-runtime__basket baby-object-runtime__basket--${side}${
                  phase === 'correct' && lastTargetSide === side
                    ? ' baby-object-runtime__basket--correct'
                    : ''
                }`}
                aria-label={`${side === 'left' ? '左侧' : '右侧'}篮子 ${basketItem.itemName}`}
              >
                <div className="baby-object-runtime__basket-icon">
                  <ResolvedAssetImage
                    src={basketItem.imageSrc}
                    alt={basketItem.itemName}
                    className="baby-object-runtime__basket-image"
                  />
                </div>
                <div
                  className={`baby-object-runtime__basket-body${
                    basketAsset
                      ? ' baby-object-runtime__basket-body--skinned'
                      : ''
                  }`}
                >
                  {basketAsset ? (
                    <ResolvedAssetImage
                      src={basketAsset.imageSrc}
                      alt=""
                      className="baby-object-runtime__basket-shell-image"
                    />
                  ) : null}
                </div>
              </div>
            );
          })}
        </div>
      </section>
    </main>
  );
}

export default BabyObjectMatchRuntimeShell;