"use client";

import { useVisualization } from "./visualization-context";
import { ArrayVisualizer } from "./visualizers/array-visualizer";
import { HistogramVisualizer } from "./visualizers/histogram-visualizer";
import { LinkedListVisualizer } from "./visualizers/linkedlist-visualizer";
import { StackVisualizer } from "./visualizers/stack-visualizer";
import { TreeVisualizer } from "./visualizers/tree-visualizer";
import type { DataStructureState } from "@/types/visualization";

interface StructureVisualizerProps {
  name: string;
  data: DataStructureState;
}

function StructureVisualizer({ name, data }: StructureVisualizerProps) {
  switch (data.type) {
    case "array":
      return <ArrayVisualizer data={data} name={name} />;
    case "histogram":
      return <HistogramVisualizer data={data} name={name} />;
    case "linkedlist":
      return <LinkedListVisualizer data={data} name={name} />;
    case "stack":
      return <StackVisualizer data={data} name={name} />;
    case "tree":
      return <TreeVisualizer data={data} name={name} />;
    case "graph":
      return (
        <div className="text-muted-foreground">
          Graph visualization coming soon
        </div>
      );
    case "matrix":
      return (
        <div className="text-muted-foreground">
          Matrix visualization coming soon
        </div>
      );
    default:
      return (
        <div className="text-muted-foreground">
          Unknown data structure type
        </div>
      );
  }
}

export function StructureRenderer() {
  const { currentStep } = useVisualization();

  if (!currentStep?.structures) {
    return (
      <div className="text-center text-muted-foreground">
        No data structures to display
      </div>
    );
  }

  const structureEntries = Object.entries(currentStep.structures);

  if (structureEntries.length === 0) {
    return (
      <div className="text-center text-muted-foreground">
        No data structures to display
      </div>
    );
  }

  return (
    <div className="flex flex-col gap-6">
      {structureEntries.map(([name, data]) => (
        <StructureVisualizer key={name} name={name} data={data} />
      ))}
    </div>
  );
}