import { useParticle } from "@/hooks/use-particle";
import { StreamView } from "./stream-view";
import { FolderView } from "./folder-view";
import { ParticleListView } from "./particle-list-view";
import { isContainerType } from "@/api/types";

interface ParticleViewResolverProps {
  networkId: string;
  particleSegments: string[];
}

/**
 * Resolves a particle by its path segments and renders the appropriate view
 * based on particle type. This is the extensibility point for future particle types.
 */
export function ParticleViewResolver({ networkId, particleSegments }: ParticleViewResolverProps) {
  const { particle, isLoading, error } = useParticle(networkId, particleSegments);

  if (isLoading) {
    return (
      <div className="flex h-full items-center justify-center">
        <p className="text-muted-foreground text-sm">Loading...</p>
      </div>
    );
  }

  if (error) {
    return (
      <div className="flex h-full items-center justify-center">
        <p className="text-destructive text-sm">Failed to load particle</p>
      </div>
    );
  }

  // While the hook is stubbed, particle will be null — show a placeholder
  if (!particle) {
    return (
      <div className="flex h-full items-center justify-center">
        <p className="text-muted-foreground text-sm">
          Particle: {particleSegments.join(" / ")}
        </p>
      </div>
    );
  }

  switch (particle.type) {
    case "stream":
      return <StreamView streamParticle={particle} networkId={networkId} particleSegments={particleSegments} />;
    case "folder":
      return <FolderView folderParticle={particle} networkId={networkId} particleSegments={particleSegments} />;
    default:
      // For container types we haven't built a view for, fall back to list
      if (isContainerType(particle.type)) {
        return <ParticleListView networkId={networkId} particleSegments={particleSegments} />;
      }
      // Leaf particle — placeholder
      return (
        <div className="flex h-full items-center justify-center">
          <p className="text-muted-foreground text-sm">
            {particle.type} particle: {particle.id}
          </p>
        </div>
      );
  }
}