"use client";

import { useState } from "react";
import { cn } from "@/lib/utils";
import type { ScanListItem, FindingDto } from "@/lib/api";
import { formatRelativeTime } from "./constants";
import { VerdictBadge } from "./verdict-badge";
import { ScanDetail } from "./scan-detail";
import { ChevronDown, ChevronRight, FolderCode, FileSearch } from "lucide-react";
import { Badge } from "@/components/ui/badge";

interface ScanRowProps {
  scan: ScanListItem;
  onFindingClick?: (finding: FindingDto) => void;
  className?: string;
}

export function ScanRow({ scan, onFindingClick, className }: ScanRowProps) {
  const [expanded, setExpanded] = useState(false);

  const hasIssues = scan.summary.blocked > 0 || scan.summary.flagged > 0;

  return (
    <div
      className={cn(
        "rounded-lg border border-border bg-card overflow-hidden",
        hasIssues && "border-amber-500/30",
        className
      )}
    >
      {/* Header */}
      <div
        className={cn(
          "flex items-center gap-4 p-4 cursor-pointer hover:bg-muted/30 transition-colors",
          expanded && "border-b border-border"
        )}
        onClick={() => setExpanded(!expanded)}
        role="button"
        tabIndex={0}
        onKeyDown={(e) => {
          if (e.key === "Enter" || e.key === " ") {
            setExpanded(!expanded);
          }
        }}
      >
        {/* Expand icon */}
        <div className="flex-shrink-0 text-muted-foreground">
          {expanded ? (
            <ChevronDown className="h-4 w-4" />
          ) : (
            <ChevronRight className="h-4 w-4" />
          )}
        </div>

        {/* Project info */}
        <div className="flex-1 min-w-0">
          <div className="flex items-center gap-2 mb-1">
            <FolderCode className="h-4 w-4 text-muted-foreground flex-shrink-0" />
            <span className="font-medium text-foreground truncate">{scan.project}</span>
            <span className="text-xs text-muted-foreground">
              {formatRelativeTime(scan.timestamp)}
            </span>
          </div>
          <div className="flex flex-wrap items-center gap-3 text-xs text-muted-foreground">
            <span className="flex items-center gap-1">
              <FileSearch className="h-3 w-3" />
              {scan.files_scanned} files
            </span>
            <span>{scan.claims_extracted} claims</span>
          </div>
        </div>

        {/* Summary badges */}
        <div className="flex items-center gap-2 flex-shrink-0">
          {scan.summary.blocked > 0 && (
            <Badge variant="destructive" className="text-xs">
              {scan.summary.blocked} blocked
            </Badge>
          )}
          {scan.summary.flagged > 0 && (
            <Badge variant="outline" className="text-xs border-amber-500/50 text-amber-600">
              {scan.summary.flagged} flagged
            </Badge>
          )}
          {scan.summary.blocked === 0 && scan.summary.flagged === 0 && (
            <Badge variant="outline" className="text-xs border-emerald-500/50 text-emerald-600">
              Clean
            </Badge>
          )}
        </div>
      </div>

      {/* Expanded detail */}
      {expanded && (
        <div className="p-4 bg-muted/20">
          <ScanDetail findings={scan.findings} onFindingClick={onFindingClick} />
        </div>
      )}
    </div>
  );
}
