import type { Particle } from '@/api/types';
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from '@/components/ui/card';
import {
  FileIcon,
  HelpCircleIcon,
  ScrollTextIcon,
  BookOpenIcon,
} from 'lucide-react';
import { useNetwork } from '@/hooks/use-networks';
import { resolveHumanDisplay } from '@/lib/humans';

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;
  networkId: string;
}

export function FallbackParticleView({
  particle,
  networkId,
}: FallbackParticleViewProps) {
  const network = useNetwork(networkId);
  const creator = resolveHumanDisplay(
    particle.created_by_human_id,
    network?.humans,
  );
  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 {creator.displayName}
          </p>
        </CardContent>
      </Card>
    </div>
  );
}