import { Link } from "wouter";
import { Card } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Star, MessageSquare, Wrench, ChevronRight, Scale } from "lucide-react";
import { ToolWithStats } from "@workspace/api-client-react";
import { MiniBarStack } from "@/components/mini-bars";
import { cn } from "@/lib/utils";

export function ToolCardWide({
  tool,
  density,
  compare,
}: {
  tool: ToolWithStats;
  density: "cozy" | "compact";
  compare?: { selected: boolean; onToggle: () => void };
}) {
  const compact = density === "compact";
  return (
    <Card className="hover-elevate transition-all cursor-pointer hover:border-primary/50">
      <Link href={`/tools/${tool.id}`} className="flex items-center gap-4 p-4">
        <div className="shrink-0 w-10 h-10 rounded-md border bg-muted flex items-center justify-center overflow-hidden">
          {tool.iconUrl ? (
            <img
              src={tool.iconUrl}
              alt=""
              className="w-full h-full object-contain p-0.5"
              onError={(e) => {
                (e.target as HTMLImageElement).style.display = "none";
              }}
            />
          ) : (
            <Wrench className="w-5 h-5 text-muted-foreground" />
          )}
        </div>
        <div className="flex-1 min-w-0">
          <div className="flex items-center gap-2 flex-wrap">
            <span className="font-semibold truncate">{tool.name}</span>
            <Badge variant="outline" className="text-xs shrink-0">
              {tool.category}
            </Badge>
          </div>
          {!compact && <p className="text-sm text-muted-foreground line-clamp-2">{tool.description}</p>}
          {!compact && tool.tags && tool.tags.length > 0 && (
            <div className="flex flex-wrap gap-1 mt-1.5">
              {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 > 3 && (
                <Badge variant="secondary" className="text-xs px-1.5 py-0 text-muted-foreground">
                  +{tool.tags.length - 3}
                </Badge>
              )}
            </div>
          )}
        </div>
        <div className="shrink-0 flex flex-col items-end gap-2 text-sm text-muted-foreground">
          <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>
            <ChevronRight className="w-4 h-4" />
          </div>
          {!compact && <MiniBarStack usefulness={tool.avgUsefulness} usability={tool.avgUsability} />}
          {compare && (
            <button
              type="button"
              onClick={(e) => {
                e.preventDefault();
                e.stopPropagation();
                compare.onToggle();
              }}
              title={compare.selected ? "Remove from compare" : "Add to compare"}
              className={cn(
                "shrink-0 w-7 h-7 rounded-md border flex items-center justify-center transition-colors",
                compare.selected
                  ? "bg-primary text-primary-foreground border-primary"
                  : "text-muted-foreground hover:bg-muted hover:text-foreground",
              )}
            >
              <Scale className="w-4 h-4" />
            </button>
          )}
        </div>
      </Link>
    </Card>
  );
}