"use client";

import { Checkbox } from "@/components/ui/checkbox";
import type { WorkflowDocument, ComparisonResult } from "@/types/ocr";
import { ComparisonResultsDisplay } from "./ComparisonResultsDisplay";
import { Loader2, GitCompare } from "lucide-react";

interface WorkflowCompareSectionProps {
  documents: WorkflowDocument[];
  selectedDocIndices: Set<number>;
  onToggleDocSelection: (index: number) => void;
  onCompare: () => void;
  isComparing: boolean;
  comparisonResults: ComparisonResult[];
}

export function WorkflowCompareSection({
  documents,
  selectedDocIndices,
  onToggleDocSelection,
  onCompare,
  isComparing,
  comparisonResults,
}: WorkflowCompareSectionProps) {
  const processedDocs = documents.filter(
    (doc) => doc.status === "processed" && doc.bank_id && doc.extracted_data
  );

  return (
    <div className="space-y-6">
      {/* Document selection */}
      <div className="space-y-3">
        <div className="bg-blue-50 border border-blue-200 rounded-lg px-4 py-3 text-xs text-blue-700">
          Select documents to compare with existing database records. The
          comparison will show additions, removals, and changes.
        </div>

        {processedDocs.length === 0 ? (
          <div className="text-sm text-gray-400 text-center py-6">
            No processed documents available for comparison.
          </div>
        ) : (
          <div className="space-y-2">
            {documents.map((doc, index) => {
              if (doc.status !== "processed" || !doc.bank_id || !doc.extracted_data) {
                return null;
              }

              return (
                <label
                  key={doc.document_id}
                  className="flex items-center gap-3 px-4 py-2.5 border rounded-lg hover:bg-gray-50 cursor-pointer transition-colors"
                >
                  <Checkbox
                    checked={selectedDocIndices.has(index)}
                    onCheckedChange={() => onToggleDocSelection(index)}
                    className="h-4 w-4 cursor-pointer active:scale-90"
                  />
                  <div className="flex items-center gap-2">
                    <span className="text-sm text-gray-800">
                      {doc.filename}
                    </span>
                    {doc.bank_type && (
                      <span className="inline-block px-1.5 py-0.5 rounded text-[10px] font-medium bg-blue-100 text-blue-800 uppercase">
                        {doc.bank_type}
                      </span>
                    )}
                  </div>
                </label>
              );
            })}
          </div>
        )}

        <button
          onClick={onCompare}
          disabled={isComparing || selectedDocIndices.size === 0}
          className="inline-flex items-center gap-1.5 px-4 py-2 text-xs font-medium bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
        >
          {isComparing ? (
            <>
              <Loader2 className="h-3.5 w-3.5 animate-spin" />
              Comparing...
            </>
          ) : (
            <>
              <GitCompare className="h-3.5 w-3.5" />
              Compare Selected
            </>
          )}
        </button>
      </div>

      {/* Comparison Results */}
      {comparisonResults.length > 0 && (
        <div className="space-y-4">
          <h3 className="text-sm font-semibold text-gray-700">
            Comparison Results
          </h3>
          {comparisonResults.map((result, idx) => (
            <ComparisonResultsDisplay key={idx} result={result} />
          ))}
        </div>
      )}
    </div>
  );
}