// BulkAutoFix - Component for bulk auto-fix functionality
import React from 'react';

function BulkAutoFix({ 
  degradedCount, 
  isBulkFixing, 
  onBulkAutoFix,
  fixResults 
}) {
  if (degradedCount === 0) {
    return null;
  }

  return (
    <div className="space-y-4">
      {/* Bulk Auto-fix Button */}
      <div className="p-3 bg-blue-50 rounded-lg border border-blue-200">
        <div className="flex items-center justify-between">
          <div>
            <div className="text-sm font-medium text-blue-900">Auto-fix Available</div>
            <div className="text-xs text-blue-700">
              Automatically fix {degradedCount} issue{degradedCount > 1 ? 's' : ''} where possible.
              Human-required actions will create tickets.
            </div>
          </div>
          <button
            onClick={onBulkAutoFix}
            disabled={isBulkFixing}
            className="px-4 py-2 bg-blue-600 text-white text-sm rounded hover:bg-blue-700 disabled:opacity-50 font-medium"
          >
            {isBulkFixing ? "Fixing..." : "🔧 Auto-fix All"}
          </button>
        </div>
      </div>

      {/* Fix Results Summary */}
      {fixResults.length > 0 && (
        <div className="p-3 bg-gray-50 rounded-lg border border-gray-200">
          <div className="text-xs font-medium text-gray-700 mb-2">Recent Fix Results</div>
          <div className="space-y-1 max-h-32 overflow-auto">
            {fixResults.slice(-5).map((res, i) => (
              <div key={i} className="text-xs flex items-center gap-2">
                <span className={`w-2 h-2 rounded-full ${
                  res.result?.executed ? 'bg-emerald-500' : 
                  res.result?.ticket_created ? 'bg-purple-500' : 
                  res.error ? 'bg-red-500' : 'bg-amber-500'
                }`} />
                <span className="font-medium">{res.tool}</span>
                <span className="text-gray-500">{res.action}</span>
                {res.result?.executed && <span className="text-emerald-600">✓ fixed</span>}
                {res.result?.ticket_created && <span className="text-purple-600">🎫 ticket created</span>}
                {res.error && <span className="text-red-600">✗ {res.error}</span>}
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  );
}

export default BulkAutoFix;
