import {
  createContext,
  type ReactNode,
  useContext,
  useEffect,
  useMemo,
  useState,
} from 'react';
import * as AnimationTransportModule from './AnimationTransport';
import {
  createIdleAnimationBridgeSnapshot,
  createMachineAnimationPlayerAdapter,
  type AnimationBridgeSnapshot,
  type MachineAnimationPlayerAdapter,
  type MachineAnimationPlayerAdapterOptions,
} from '../../animations/playerAdapter';

type AnyRecord = Record<string, unknown>;

export interface AnimationRuntimeControls {
  play: () => void;
  pause: () => void;
  resume: () => void;
  restart: () => void;
  stop: () => void;
  toggle: () => void;
  stepForward: (steps?: number) => void;
  stepBackward: (steps?: number) => void;
  seek: (normalizedTime: number) => void;
  setRpm: (rpm: number) => void;
  setTimeScale: (timeScale: number) => void;
  setLoop: (loop: boolean) => void;
}

export interface AnimationRuntimeBridgeContextValue {
  player: MachineAnimationPlayerAdapter | null;
  snapshot: AnimationBridgeSnapshot;
  controls: AnimationRuntimeControls;
  reducedMotion: boolean;
}

export interface AnimationRuntimeBridgeProps {
  machineId: string;
  animationModule: unknown;
  animationId?: string;
  autoPlay?: boolean;
  respectReducedMotion?: boolean;
  allowReducedMotionPlayback?: boolean;
  initialRpm?: number;
  initialTimeScale?: number;
  initialLoop?: boolean;
  stepCount?: number;
  showTransport?: boolean;
  className?: string;
  transportClassName?: string;
  onSnapshotChange?: (snapshot: AnimationBridgeSnapshot, player: MachineAnimationPlayerAdapter) => void;
  onPlaybackStateChange?: (snapshot: AnimationBridgeSnapshot) => void;
  renderTransport?: (context: AnimationRuntimeBridgeContextValue) => ReactNode;
  children?: ReactNode | ((context: AnimationRuntimeBridgeContextValue) => ReactNode);
}

export interface AnimationTransportSurfaceProps {
  context: AnimationRuntimeBridgeContextValue;
  className?: string;
}

const AnimationRuntimeContext = createContext<AnimationRuntimeBridgeContextValue | null>(null);

function resolveTransportComponent() {
  const moduleRecord = AnimationTransportModule as AnyRecord;
  const candidate =
    moduleRecord.AnimationTransport ??
    moduleRecord.AnimationTransportPanel ??
    moduleRecord.default;

  return typeof candidate === 'function' ? candidate : null;
}

function usePrefersReducedMotion(): boolean {
  const [prefersReducedMotion, setPrefersReducedMotion] = useState(() => {
    if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') {
      return false;
    }

    return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  });

  useEffect(() => {
    if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') {
      return undefined;
    }

    const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
    const handleChange = () => {
      setPrefersReducedMotion(mediaQuery.matches);
    };

    handleChange();

    if (typeof mediaQuery.addEventListener === 'function') {
      mediaQuery.addEventListener('change', handleChange);
      return () => {
        mediaQuery.removeEventListener('change', handleChange);
      };
    }

    mediaQuery.addListener(handleChange);
    return () => {
      mediaQuery.removeListener(handleChange);
    };
  }, []);

  return prefersReducedMotion;
}

function createNoopControls(player: MachineAnimationPlayerAdapter | null): AnimationRuntimeControls {
  return {
    play: () => player?.play(),
    pause: () => player?.pause(),
    resume: () => player?.resume(),
    restart: () => player?.restart(),
    stop: () => player?.stop(),
    toggle: () => player?.toggle(),
    stepForward: (steps?: number) => player?.stepForward(steps),
    stepBackward: (steps?: number) => player?.stepBackward(steps),
    seek: (normalizedTime: number) => player?.seek(normalizedTime),
    setRpm: (rpm: number) => player?.setRpm(rpm),
    setTimeScale: (timeScale: number) => player?.setTimeScale(timeScale),
    setLoop: (loop: boolean) => player?.setLoop(loop),
  };
}

export function useAnimationRuntime(): AnimationRuntimeBridgeContextValue {
  const context = useContext(AnimationRuntimeContext);
  if (!context) {
    throw new Error('useAnimationRuntime must be used within AnimationRuntimeBridge.');
  }

  return context;
}

export function AnimationTransportSurface({
  context,
  className,
}: AnimationTransportSurfaceProps) {
  const TransportComponent = resolveTransportComponent();
  const { snapshot, controls, player, reducedMotion } = context;

  const transportProps: AnyRecord = {
    snapshot,
    state: snapshot,
    animationState: snapshot,
    player,
    rawPlayer: player?.rawPlayer,
    controls,
    reducedMotion,
    isPlaying: snapshot.isPlaying,
    isPaused: snapshot.isPaused,
    status: snapshot.status,
    rpm: snapshot.rpm,
    timeScale: snapshot.timeScale,
    loop: snapshot.loop,
    progress: snapshot.progress,
    normalizedTime: snapshot.normalizedTime,
    stepIndex: snapshot.stepIndex,
    stepCount: snapshot.stepCount,
    onPlay: controls.play,
    onPause: controls.pause,
    onResume: controls.resume,
    onRestart: controls.restart,
    onStop: controls.stop,
    onToggle: controls.toggle,
    onStep: controls.stepForward,
    onStepForward: controls.stepForward,
    onStepBackward: controls.stepBackward,
    onSeek: controls.seek,
    onProgressChange: controls.seek,
    onRpmChange: controls.setRpm,
    onRPMChange: controls.setRpm,
    onTimeScaleChange: controls.setTimeScale,
    onPlaybackRateChange: controls.setTimeScale,
    onLoopChange: controls.setLoop,
    className,
  };

  if (TransportComponent) {
    const Component = TransportComponent as React.ComponentType<AnyRecord>;
    return <Component {...transportProps} />;
  }

  return <DefaultAnimationTransportSurface context={context} className={className} />;
}

function DefaultAnimationTransportSurface({
  context,
  className = '',
}: AnimationTransportSurfaceProps) {
  const { snapshot, controls, reducedMotion } = context;

  return (
    <section
      className={`rounded-2xl border border-white/10 bg-[#121721]/85 p-4 text-sm text-slate-100 shadow-2xl shadow-black/30 backdrop-blur-xl ${className}`}
      aria-label="Animation transport controls"
    >
      <div className="mb-3 flex items-center justify-between gap-3">
        <div>
          <p className="text-xs uppercase tracking-[0.24em] text-slate-500">Animation</p>
          <p className="font-medium text-white">
            {snapshot.status === 'playing' ? 'Running' : snapshot.status}
          </p>
        </div>
        <span className="rounded-full border border-sky-400/30 bg-sky-400/10 px-2.5 py-1 text-xs text-sky-200">
          {Math.round(snapshot.progress * 100)}%
        </span>
      </div>

      {reducedMotion ? (
        <p className="mb-3 rounded-xl border border-amber-400/20 bg-amber-400/10 px-3 py-2 text-xs text-amber-100">
          Reduced motion is enabled. Use step controls for a lower-motion walkthrough.
        </p>
      ) : null}

      <div className="grid grid-cols-4 gap-2">
        <button
          type="button"
          className="rounded-xl bg-sky-500 px-3 py-2 font-medium text-white transition hover:bg-sky-400 focus:outline-none focus-visible:ring-2 focus-visible:ring-sky-300"
          onClick={snapshot.isPlaying ? controls.pause : controls.play}
        >
          {snapshot.isPlaying ? 'Pause' : 'Play'}
        </button>
        <button
          type="button"
          className="rounded-xl border border-white/10 bg-white/5 px-3 py-2 text-slate-200 transition hover:bg-white/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-sky-300"
          onClick={controls.restart}
        >
          Restart
        </button>
        <button
          type="button"
          className="rounded-xl border border-white/10 bg-white/5 px-3 py-2 text-slate-200 transition hover:bg-white/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-sky-300"
          onClick={() => controls.stepBackward()}
          aria-label="Step backward"
        >
          − Step
        </button>
        <button
          type="button"
          className="rounded-xl border border-white/10 bg-white/5 px-3 py-2 text-slate-200 transition hover:bg-white/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-sky-300"
          onClick={() => controls.stepForward()}
          aria-label="Step forward"
        >
          + Step
        </button>
      </div>

      <label className="mt-4 block">
        <span className="mb-2 flex justify-between text-xs text-slate-400">
          <span>RPM</span>
          <span className="font-mono tabular-nums text-slate-200">{Math.round(snapshot.rpm)}</span>
        </span>
        <input
          type="range"
          min={0}
          max={6000}
          step={10}
          value={snapshot.rpm}
          onChange={(event) => controls.setRpm(Number(event.currentTarget.value))}
          className="w-full accent-[#4C8DFF]"
        />
      </label>

      <label className="mt-4 block">
        <span className="mb-2 flex justify-between text-xs text-slate-400">
          <span>Time scale</span>
          <span className="font-mono tabular-nums text-slate-200">
            {snapshot.timeScale.toFixed(1)}×
          </span>
        </span>
        <input
          type="range"
          min={0.1}
          max={3}
          step={0.1}
          value={snapshot.timeScale}
          onChange={(event) => controls.setTimeScale(Number(event.currentTarget.value))}
          className="w-full accent-[#4C8DFF]"
        />
      </label>

      <label className="mt-4 flex items-center justify-between gap-3 text-xs text-slate-300">
        <span>Loop animation</span>
        <input
          type="checkbox"
          checked={snapshot.loop}
          onChange={(event) => controls.setLoop(event.currentTarget.checked)}
          className="h-4 w-4 accent-[#4C8DFF]"
        />
      </label>
    </section>
  );
}

export function AnimationRuntimeBridge({
  machineId,
  animationModule,
  animationId,
  autoPlay = false,
  respectReducedMotion = true,
  allowReducedMotionPlayback = false,
  initialRpm,
  initialTimeScale,
  initialLoop = true,
  stepCount,
  showTransport = true,
  className = '',
  transportClassName = '',
  onSnapshotChange,
  onPlaybackStateChange,
  renderTransport,
  children,
}: AnimationRuntimeBridgeProps) {
  const reducedMotion = usePrefersReducedMotion();
  const [player, setPlayer] = useState<MachineAnimationPlayerAdapter | null>(null);
  const [snapshot, setSnapshot] = useState<AnimationBridgeSnapshot>(() =>
    createIdleAnimationBridgeSnapshot(machineId, animationId ?? 'machine-animation'),
  );

  useEffect(() => {
    const options: MachineAnimationPlayerAdapterOptions = {
      machineId,
      animationId,
      initialRpm,
      initialTimeScale,
      initialLoop,
      stepCount,
      reducedMotion,
      respectReducedMotion,
      allowReducedMotionPlayback,
    };
    const nextPlayer = createMachineAnimationPlayerAdapter(animationModule, options);
    setPlayer(nextPlayer);
    setSnapshot(nextPlayer.getSnapshot());

    const unsubscribe = nextPlayer.subscribe((nextSnapshot) => {
      setSnapshot(nextSnapshot);
    });

    if (autoPlay && (!reducedMotion || allowReducedMotionPlayback || !respectReducedMotion)) {
      nextPlayer.play();
    }

    return () => {
      unsubscribe();
      nextPlayer.dispose();
    };
  }, [
    allowReducedMotionPlayback,
    animationId,
    animationModule,
    autoPlay,
    initialLoop,
    initialRpm,
    initialTimeScale,
    machineId,
    reducedMotion,
    respectReducedMotion,
    stepCount,
  ]);

  useEffect(() => {
    player?.setReducedMotion(reducedMotion);
  }, [player, reducedMotion]);

  useEffect(() => {
    if (!player) {
      return;
    }

    onSnapshotChange?.(snapshot, player);
    onPlaybackStateChange?.(snapshot);
  }, [onPlaybackStateChange, onSnapshotChange, player, snapshot]);

  const controls = useMemo(() => createNoopControls(player), [player]);

  const context = useMemo<AnimationRuntimeBridgeContextValue>(
    () => ({
      player,
      snapshot,
      controls,
      reducedMotion,
    }),
    [controls, player, reducedMotion, snapshot],
  );

  const renderedChildren =
    typeof children === 'function'
      ? (children as (context: AnimationRuntimeBridgeContextValue) => ReactNode)(context)
      : children;

  return (
    <AnimationRuntimeContext.Provider value={context}>
      <div className={className}>
        {renderedChildren}
        {showTransport
          ? renderTransport
            ? renderTransport(context)
            : (
              <AnimationTransportSurface
                context={context}
                className={transportClassName}
              />
            )
          : null}
      </div>
    </AnimationRuntimeContext.Provider>
  );
}