import { ToolWithStats } from "@workspace/api-client-react";
import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Star, MessageSquare, Wrench } from "lucide-react";
import { Link } from "wouter";

export function ToolCard({ tool }: { tool: ToolWithStats }) {
  return (
    <Card className="hover-elevate transition-all flex flex-col h-full cursor-pointer hover:border-primary/50">
      <Link href={`/tools/${tool.id}`} className="flex flex-col h-full p-0 m-0">
        <CardHeader className="pb-3">
          <div className="flex items-start gap-3 mb-2">
            <div className="shrink-0 w-9 h-9 rounded-md border bg-muted flex items-center justify-center overflow-hidden">
              {tool.iconUrl ? (
                <img
                  src={tool.iconUrl}
                  alt={tool.name}
                  className="w-full h-full object-contain p-0.5"
                  onError={(e) => { (e.target as HTMLImageElement).style.display = "none"; }}
                />
              ) : (
                <Wrench className="w-4 h-4 text-muted-foreground" />
              )}
            </div>
            <div className="flex-1 min-w-0">
              <div className="flex flex-wrap justify-between items-start gap-x-2 gap-y-1">
                <CardTitle className="text-base truncate min-w-[30%]">{tool.name}</CardTitle>
                <Badge variant="outline" className="shrink-0 text-xs">{tool.category}</Badge>
              </div>
            </div>
          </div>
          <CardDescription className="line-clamp-2 min-h-[2.5rem]">
            {tool.description}
          </CardDescription>
        </CardHeader>
        <CardContent className="flex-1 pb-4">
          <div className="flex flex-wrap gap-1">
            {tool.tags?.slice(0, 3).map((tag) => (
              <Badge key={tag} variant="secondary" className="text-xs px-1.5 py-0">
                {tag}
              </Badge>
            ))}
            {(tool.tags?.length || 0) > 3 && (
              <Badge variant="secondary" className="text-xs px-1.5 py-0 text-muted-foreground">
                +{(tool.tags?.length || 0) - 3}
              </Badge>
            )}
          </div>
        </CardContent>
        <CardFooter className="pt-0 flex justify-between items-center text-sm text-muted-foreground border-t p-4 mt-auto">
          <div className="flex items-center gap-4">
            <div className="flex items-center gap-1">
              <Star className="w-4 h-4 fill-primary text-primary" />
              <span className="font-medium text-foreground">
                {tool.avgCombined ? tool.avgCombined.toFixed(1) : "N/A"}
              </span>
            </div>
            <div className="flex items-center gap-1">
              <MessageSquare className="w-4 h-4" />
              <span>{tool.ratingCount}</span>
            </div>
          </div>
        </CardFooter>
      </Link>
    </Card>
  );
}