'use client';

import { cn } from '@/lib/utils';
import type { ReactNode } from 'react';
import type {
  AlgorithmCode,
  AlgorithmPattern,
  DecisionCallout,
  PlaybackSpeed,
  VariableState,
  VisualizationControls,
  VisualizationPhase,
} from '@/lib/visualizations/types';
import { CodePanel } from './code-panel';
import { ExplanationPanel } from './explanation-panel';
import { StepControls } from './step-controls';
import { VariableInspector } from './variable-inspector';

interface VisualizationContainerProps {
  title: string;
  pattern: AlgorithmPattern;
  code: AlgorithmCode;
  currentLine?: number;
  highlightLines?: number[];
  explanation: string;
  decision?: DecisionCallout;
  phase: VisualizationPhase;
  variables: VariableState[];
  currentStepIndex: number;
  totalSteps: number;
  isPlaying: boolean;
  speed: PlaybackSpeed;
  controls: VisualizationControls;
  progress: number;
  children: ReactNode;
  className?: string;
}

export function VisualizationContainer({
  title,
  pattern,
  code,
  currentLine,
  highlightLines,
  explanation,
  decision,
  phase,
  variables,
  currentStepIndex,
  totalSteps,
  isPlaying,
  speed,
  controls,
  progress,
  children,
  className,
}: VisualizationContainerProps) {
  return (
    <div
      className={cn(
        'flex flex-col rounded-xl border border-border bg-background-subtle p-4',
        className
      )}
    >
      <header className="mb-3 flex flex-wrap items-center justify-between gap-2">
        <h2 className="text-xl font-semibold text-foreground">{title}</h2>
        <span className="rounded-full bg-primary/20 px-3 py-1 text-sm font-medium text-primary">
          {pattern.name}
        </span>
      </header>

      <div className="grid gap-3 lg:grid-cols-[1fr_2fr]">
        <div className="flex flex-col gap-3">
          <CodePanel
            code={code}
            currentLine={currentLine}
            highlightLines={highlightLines}
            className="h-64"
          />
          <VariableInspector variables={variables} />
        </div>

        <div
          className="flex min-h-80 min-w-0 items-center justify-center overflow-x-auto rounded-lg border border-border bg-surface px-8 py-4 lg:h-auto"
          role="img"
          aria-label="Algorithm visualization"
        >
          {children}
        </div>
      </div>

      <ExplanationPanel
        explanation={explanation}
        decision={decision}
        phase={phase}
        className="mt-3"
      />

      <StepControls
        currentStepIndex={currentStepIndex}
        totalSteps={totalSteps}
        isPlaying={isPlaying}
        speed={speed}
        controls={controls}
        progress={progress}
        className="mt-3"
      />
    </div>
  );
}
