import type { Particle } from "@/api/types";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { FileIcon, HelpCircleIcon, ScrollTextIcon, BookOpenIcon } from "lucide-react";

const TYPE_META: Record<string, { icon: typeof FileIcon; label: string }> = {
  quest: { icon: ScrollTextIcon, label: "Quest" },
  paper: { icon: BookOpenIcon, label: "Paper" },
  file: { icon: FileIcon, label: "File" },
};

interface FallbackParticleViewProps {
  particle: Particle;
}

export function FallbackParticleView({ particle }: FallbackParticleViewProps) {
  const meta = TYPE_META[particle.type] ?? {
    icon: HelpCircleIcon,
    label: particle.type,
  };
  const Icon = meta.icon;
  const title = (() => {
    switch (particle.type) {
      case "quest":
        return particle.properties.title;
      case "paper":
        return particle.properties.title;
      case "file":
        return particle.properties.filename;
      case "folder":
        return particle.properties.name;
      default:
        return null;
    }
  })();

  return (
    <div className="flex h-full w-full items-center justify-center p-8">
      <Card className="w-full max-w-sm">
        <CardHeader className="flex flex-row items-center gap-3">
          <Icon className="text-muted-foreground h-6 w-6 shrink-0" />
          <div>
            <CardTitle className="text-base">{meta.label}</CardTitle>
            {title && <CardDescription>{title}</CardDescription>}
          </div>
        </CardHeader>
        <CardContent>
          <p className="text-muted-foreground text-xs">
            From {particle.created_by_human_id}
          </p>
        </CardContent>
      </Card>
    </div>
  );
}