// DiagnosticActions - Component for displaying and executing diagnostic fixes
import React from 'react';

function DiagnosticActions({ 
  tool, 
  fixes, 
  issues, 
  isFixing, 
  onAutoFix,
  fixActionClass 
}) {
  const isAutoFixable = (action) => 
    action === "install" || action === "start_container" || action === "start_vm";
  
  const requiresHuman = (action) => 
    action === "info" || action === "config";

  if (issues.length === 0 && fixes.length === 0) {
    return null;
  }

  return (
    <div className="mt-2 space-y-2">
      {/* Issues Display */}
      {issues.length > 0 && (
        <div className="space-y-1">
          {issues.map((issue, i) => (
            <div key={i} className="text-xs text-amber-700 bg-amber-50 rounded px-2 py-1">
              ⚠️ {issue}
            </div>
          ))}
        </div>
      )}

      {/* Fixes Display */}
      {fixes.length > 0 && (
        <div className="space-y-1">
          {fixes.map((fix) => (
            <div key={fix.label} className="flex items-start gap-2 text-xs bg-gray-50 rounded px-2 py-1.5">
              <span className={`px-1.5 py-0.5 rounded font-medium ${
                fixActionClass[fix.action] || "bg-gray-100 text-gray-600"
              }`}>
                {fix.action}
              </span>
              
              <div className="flex-1">
                <span className="font-medium text-gray-800">{fix.label}</span>
                <span className="text-gray-500 ml-1">— {fix.description}</span>
                {fix.command && (
                  <pre className="mt-1 bg-gray-900 text-green-300 rounded px-2 py-1 font-mono text-[11px] overflow-x-auto">
                    {fix.command}
                  </pre>
                )}
              </div>

              {/* Auto-fix Button */}
              {isAutoFixable(fix.action) && (
                <button
                  onClick={() => onAutoFix(tool.name, fix)}
                  disabled={isFixing}
                  className="px-2 py-1 bg-emerald-600 text-white rounded text-xs hover:bg-emerald-700 disabled:opacity-50 font-medium"
                >
                  {isFixing?.action === fix.action ? "Running..." : "Auto-fix"}
                </button>
              )}

              {/* Human Action Button */}
              {requiresHuman(fix.action) && (
                <button
                  onClick={() => onAutoFix(tool.name, fix)}
                  disabled={isFixing}
                  className="px-2 py-1 bg-purple-600 text-white rounded text-xs hover:bg-purple-700 disabled:opacity-50 font-medium"
                  title="Create ticket for human action"
                >
                  {isFixing?.action === fix.action ? "Creating..." : "Create Ticket"}
                </button>
              )}
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

export default DiagnosticActions;
