"use client";

import { useVisualization } from "@/lib/visualizations/use-visualization";
import type { AlgorithmDefinition } from "@/lib/visualizations/types";
import { VisualizationContainer } from "../core/visualization-container";
import { ArrayView } from "../data-structures/array-view";
import { CalculationBubble } from "../primitives/calculation-bubble";

interface TwoPointersVisualizationProps {
  algorithm: AlgorithmDefinition;
  className?: string;
}

export function TwoPointersVisualization({
  algorithm,
  className,
}: TwoPointersVisualizationProps) {
  const {
    currentStep,
    currentStepIndex,
    totalSteps,
    playback,
    controls,
    currentPhase,
    progress,
  } = useVisualization(algorithm);

  const { dataState } = currentStep;
  const mainArray = dataState.arrays[0];
  const calculation = dataState.calculations[0] ?? null;

  return (
    <VisualizationContainer
      title={algorithm.title}
      pattern={algorithm.pattern}
      code={algorithm.code}
      currentLine={currentStep.codeLine}
      highlightLines={currentStep.codeHighlightLines}
      explanation={currentStep.explanation}
      decision={currentStep.decision}
      phase={currentPhase}
      variables={dataState.variables}
      currentStepIndex={currentStepIndex}
      totalSteps={totalSteps}
      isPlaying={playback.isPlaying}
      speed={playback.speed}
      controls={controls}
      progress={progress}
      className={className}
    >
      <div className="flex flex-col items-center">
        {/* Fixed height area for calculation bubble */}
        <div className="flex h-8 items-center justify-center">
          <CalculationBubble calculation={calculation} />
        </div>
        {/* Array visualization with pointers */}
        <div className="mt-2">
          {mainArray && (
            <ArrayView
              array={mainArray}
              pointers={dataState.pointers}
              elementSize="md"
            />
          )}
        </div>
      </div>
    </VisualizationContainer>
  );
}