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

export const TABLE_GRID =
  "grid-cols-[minmax(0,2fr)_minmax(0,1fr)_80px_80px]";

export function ToolRow({
  tool,
  density,
  className,
  compare,
}: {
  tool: ToolWithStats;
  density: "cozy" | "compact";
  className?: string;
  compare?: { selected: boolean; onToggle: () => void };
}) {
  const compact = density === "compact";
  return (
    <div
      className={cn(
        "grid items-center gap-3 border-b border-border/60 hover:bg-muted/40 cursor-pointer",
        TABLE_GRID,
        compact ? "py-1.5" : "py-3",
        className,
      )}
    >
      <div className="flex items-center gap-3 min-w-0">
        {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-6 h-6 rounded 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-3.5 h-3.5" />
          </button>
        )}
        <div className="shrink-0 w-8 h-8 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-4 h-4 text-muted-foreground" />
          )}
        </div>
        <div className="min-w-0">
          <Link href={`/tools/${tool.id}`} className="font-medium hover:text-primary hover:underline truncate block">
            {tool.name}
          </Link>
          {!compact && (
            <div className="text-xs text-muted-foreground truncate max-w-[32rem]">{tool.description}</div>
          )}
        </div>
      </div>
      <div>
        <Badge variant="outline" className="text-xs">
          {tool.category}
        </Badge>
      </div>
      <div className="flex items-center justify-end gap-1">
        <div className="flex flex-col items-end gap-0.5">
          <div className="flex items-center gap-1">
            <Star className="w-4 h-4 fill-primary text-primary" />
            <span className="font-medium">{tool.avgCombined ? tool.avgCombined.toFixed(1) : "N/A"}</span>
          </div>
          {!compact && <MiniBarStack usefulness={tool.avgUsefulness} usability={tool.avgUsability} />}
        </div>
      </div>
      <div className="flex items-center justify-end gap-1 text-muted-foreground">
        <MessageSquare className="w-4 h-4" />
        <span>{tool.ratingCount}</span>
      </div>
    </div>
  );
}