import {
  createContext,
  type ReactNode,
  useContext,
  useEffect,
  useMemo,
  useState,
} from 'react';
import * as GuidedTourOverlayModule from './GuidedTourOverlay';
import {
  createGuidedTourPlayerAdapter,
  createIdleGuidedTourSnapshot,
  type GuidedTourBridgeSnapshot,
  type GuidedTourPlayerAdapter,
  type GuidedTourPlayerAdapterOptions,
} from '../../animations/guidedTourAdapter';

type AnyRecord = Record<string, unknown>;

export interface GuidedTourRuntimeControls {
  start: () => void;
  pause: () => void;
  resume: () => void;
  restart: () => void;
  stop: () => void;
  next: () => void;
  previous: () => void;
  goToStep: (index: number) => void;
}

export interface GuidedTourRuntimeBridgeContextValue {
  player: GuidedTourPlayerAdapter | null;
  snapshot: GuidedTourBridgeSnapshot;
  controls: GuidedTourRuntimeControls;
}

export interface GuidedTourRuntimeBridgeProps {
  machineId: string;
  tour: unknown;
  tourId?: string;
  autoStart?: boolean;
  autoLoop?: boolean;
  showOverlay?: boolean;
  className?: string;
  overlayClassName?: string;
  onSnapshotChange?: (snapshot: GuidedTourBridgeSnapshot, player: GuidedTourPlayerAdapter) => void;
  onHighlightChange?: (partIds: string[], snapshot: GuidedTourBridgeSnapshot) => void;
  onCameraPresetChange?: (preset: string, snapshot: GuidedTourBridgeSnapshot) => void;
  renderOverlay?: (context: GuidedTourRuntimeBridgeContextValue) => ReactNode;
  children?: ReactNode | ((context: GuidedTourRuntimeBridgeContextValue) => ReactNode);
}

export interface GuidedTourOverlaySurfaceProps {
  context: GuidedTourRuntimeBridgeContextValue;
  className?: string;
}

const GuidedTourRuntimeContext = createContext<GuidedTourRuntimeBridgeContextValue | null>(null);

function resolveOverlayComponent() {
  const moduleRecord = GuidedTourOverlayModule as AnyRecord;
  const candidate =
    moduleRecord.GuidedTourOverlay ??
    moduleRecord.TourOverlay ??
    moduleRecord.default;

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

function createNoopControls(player: GuidedTourPlayerAdapter | null): GuidedTourRuntimeControls {
  return {
    start: () => player?.start(),
    pause: () => player?.pause(),
    resume: () => player?.resume(),
    restart: () => player?.restart(),
    stop: () => player?.stop(),
    next: () => player?.next(),
    previous: () => player?.previous(),
    goToStep: (index: number) => player?.goToStep(index),
  };
}

export function useGuidedTourRuntime(): GuidedTourRuntimeBridgeContextValue {
  const context = useContext(GuidedTourRuntimeContext);
  if (!context) {
    throw new Error('useGuidedTourRuntime must be used within GuidedTourRuntimeBridge.');
  }

  return context;
}

export function GuidedTourOverlaySurface({
  context,
  className,
}: GuidedTourOverlaySurfaceProps) {
  const OverlayComponent = resolveOverlayComponent();
  const { snapshot, controls, player } = context;
  const activeStep = snapshot.activeStep;

  const overlayProps: AnyRecord = {
    snapshot,
    state: snapshot,
    tourState: snapshot,
    tour: player?.tour,
    player,
    rawPlayer: player?.rawPlayer,
    controls,
    activeStep,
    step: activeStep,
    activeStepIndex: snapshot.activeStepIndex,
    stepCount: snapshot.stepCount,
    progress: snapshot.progress,
    status: snapshot.status,
    isPlaying: snapshot.isPlaying,
    isPaused: snapshot.isPaused,
    highlightedPartIds: snapshot.highlightedPartIds,
    cameraPreset: snapshot.cameraPreset,
    onStart: controls.start,
    onPlay: controls.start,
    onPause: controls.pause,
    onResume: controls.resume,
    onRestart: controls.restart,
    onStop: controls.stop,
    onClose: controls.stop,
    onNext: controls.next,
    onPrevious: controls.previous,
    onPrev: controls.previous,
    onStepChange: controls.goToStep,
    goToStep: controls.goToStep,
    className,
  };

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

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

function DefaultGuidedTourOverlaySurface({
  context,
  className = '',
}: GuidedTourOverlaySurfaceProps) {
  const { snapshot, controls } = context;
  const activeStep = snapshot.activeStep;

  if (snapshot.stepCount === 0) {
    return null;
  }

  return (
    <section
      className={`pointer-events-auto rounded-2xl border border-white/10 bg-[#121721]/90 p-4 text-sm text-slate-100 shadow-2xl shadow-black/40 backdrop-blur-xl ${className}`}
      aria-label="Guided tour"
    >
      <div className="mb-3 flex items-start justify-between gap-4">
        <div>
          <p className="text-xs uppercase tracking-[0.24em] text-slate-500">
            Guided tour · {snapshot.activeStepIndex + 1}/{snapshot.stepCount}
          </p>
          <h2 className="mt-1 text-base font-semibold text-white">
            {activeStep?.title ?? 'Guided tour'}
          </h2>
        </div>
        <span className="rounded-full border border-[#FFB04C]/30 bg-[#FFB04C]/10 px-2.5 py-1 text-xs text-[#FFD7A3]">
          {Math.round(snapshot.progress * 100)}%
        </span>
      </div>

      <p className="leading-6 text-slate-300">
        {activeStep?.caption ?? 'Step through the highlighted components to learn how this machine works.'}
      </p>

      <div className="mt-4 h-1.5 overflow-hidden rounded-full bg-white/10">
        <div
          className="h-full rounded-full bg-[#4C8DFF] transition-[width]"
          style={{ width: `${Math.round(snapshot.progress * 100)}%` }}
        />
      </div>

      <div className="mt-4 grid grid-cols-4 gap-2">
        <button
          type="button"
          onClick={snapshot.isPlaying ? controls.pause : controls.start}
          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"
        >
          {snapshot.isPlaying ? 'Pause' : 'Play'}
        </button>
        <button
          type="button"
          onClick={controls.previous}
          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"
        >
          Back
        </button>
        <button
          type="button"
          onClick={controls.next}
          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"
        >
          Next
        </button>
        <button
          type="button"
          onClick={controls.restart}
          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"
        >
          Restart
        </button>
      </div>
    </section>
  );
}

export function GuidedTourRuntimeBridge({
  machineId,
  tour,
  tourId,
  autoStart = false,
  autoLoop = false,
  showOverlay = true,
  className = '',
  overlayClassName = '',
  onSnapshotChange,
  onHighlightChange,
  onCameraPresetChange,
  renderOverlay,
  children,
}: GuidedTourRuntimeBridgeProps) {
  const [player, setPlayer] = useState<GuidedTourPlayerAdapter | null>(null);
  const [snapshot, setSnapshot] = useState<GuidedTourBridgeSnapshot>(() =>
    createIdleGuidedTourSnapshot(tour, { machineId, tourId }),
  );

  useEffect(() => {
    const options: GuidedTourPlayerAdapterOptions = {
      machineId,
      tourId,
      autoLoop,
    };
    const nextPlayer = createGuidedTourPlayerAdapter(tour, options);
    setPlayer(nextPlayer);
    setSnapshot(nextPlayer.getSnapshot());

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

    if (autoStart) {
      nextPlayer.start();
    }

    return () => {
      unsubscribe();
      nextPlayer.dispose();
    };
  }, [autoLoop, autoStart, machineId, tour, tourId]);

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

    onSnapshotChange?.(snapshot, player);
    onHighlightChange?.(snapshot.highlightedPartIds, snapshot);

    if (snapshot.cameraPreset) {
      onCameraPresetChange?.(snapshot.cameraPreset, snapshot);
    }
  }, [onCameraPresetChange, onHighlightChange, onSnapshotChange, player, snapshot]);

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

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

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

  return (
    <GuidedTourRuntimeContext.Provider value={context}>
      <div className={className}>
        {renderedChildren}
        {showOverlay
          ? renderOverlay
            ? renderOverlay(context)
            : <GuidedTourOverlaySurface context={context} className={overlayClassName} />
          : null}
      </div>
    </GuidedTourRuntimeContext.Provider>
  );
}