"use client";

import { cn } from "@/lib/utils";
import type { FindingDto } from "@/lib/api";
import { VerdictBadge } from "./verdict-badge";
import { FileCode, ChevronRight } from "lucide-react";

interface FindingRowProps {
  finding: FindingDto;
  onClick?: () => void;
  className?: string;
}

export function FindingRow({ finding, onClick, className }: FindingRowProps) {
  // Extract last part of concept path for display
  const conceptParts = finding.concept_path.split("/");
  const conceptShort = conceptParts[conceptParts.length - 1] || finding.concept_path;

  return (
    <div
      className={cn(
        "flex items-center gap-3 p-3 rounded-md border border-border bg-card/50 hover:bg-card/80 transition-colors cursor-pointer",
        className
      )}
      onClick={onClick}
      role="button"
      tabIndex={0}
      onKeyDown={(e) => {
        if (e.key === "Enter" || e.key === " ") {
          onClick?.();
        }
      }}
    >
      {/* Icon */}
      <div className="flex-shrink-0">
        <FileCode className="h-4 w-4 text-muted-foreground" />
      </div>

      {/* Content */}
      <div className="flex-1 min-w-0">
        <div className="flex items-center gap-2 mb-1">
          <span className="font-medium text-sm text-foreground truncate">
            {conceptShort}
            <span className="text-muted-foreground">.{finding.predicate}</span>
          </span>
          <VerdictBadge verdict={finding.verdict} size="xs" />
        </div>
        <div className="flex items-center gap-2 text-xs text-muted-foreground">
          <span className="truncate">{finding.file}:{finding.line}</span>
          <span className="text-muted-foreground/50">|</span>
          <code className="bg-muted px-1 rounded truncate max-w-[200px]">
            {finding.code_value}
          </code>
        </div>
      </div>

      {/* Arrow */}
      <ChevronRight className="h-4 w-4 text-muted-foreground flex-shrink-0" />
    </div>
  );
}
