// ToolHealthCard - Component for displaying individual tool health status
import React from 'react';
import ProviderConfigPanel from './ProviderConfigPanel';
import DiagnosticActions from './DiagnosticActions';

const HEALTH_STATUS_COLORS = {
  ok: "bg-emerald-100 text-emerald-700",
  degraded: "bg-amber-100 text-amber-700", 
  unavailable: "bg-red-100 text-red-600",
  unknown: "bg-gray-100 text-gray-600",
};

function ToolHealthCard({ 
  tool, 
  currentProvider, 
  availableProviders, 
  onProviderChange, 
  isSaving,
  isFixing,
  onAutoFix,
  fixActionClass 
}) {
  const statusClass = HEALTH_STATUS_COLORS[tool.status] || HEALTH_STATUS_COLORS.unavailable;
  const isHuman = tool.name === "human" || tool.category === "human";

  return (
    <div className="border border-gray-200 rounded-lg p-3">
      {/* Tool Header */}
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-2">
          <span className="font-medium text-sm text-gray-900">{tool.name}</span>
          <span className={`text-xs px-2 py-0.5 rounded-full ${statusClass}`}>
            {tool.status}
          </span>
          <span className="text-xs text-gray-400">{tool.category}</span>
          
          {/* Status Indicators */}
          {tool.binary_found && (
            <span className="text-xs text-emerald-600">binary OK</span>
          )}
          {tool.docker_instance && (
            <span className="text-xs text-blue-600">docker OK</span>
          )}
          {tool.kvm_instance && (
            <span className="text-xs text-purple-600">kvm OK</span>
          )}
          {tool.vm_instance && (
            <span className="text-xs text-orange-600">vm OK</span>
          )}
          {isHuman && (
            <span className="text-xs text-gray-500">manual</span>
          )}
        </div>

        {/* Provider Configuration */}
        <ProviderConfigPanel
          tool={tool}
          currentProvider={currentProvider}
          availableProviders={availableProviders}
          onProviderChange={onProviderChange}
          isSaving={isSaving}
          isHuman={isHuman}
        />
      </div>

      {/* Diagnostic Actions */}
      <DiagnosticActions
        tool={tool}
        fixes={tool.fixes || []}
        issues={tool.issues || []}
        isFixing={isFixing}
        onAutoFix={onAutoFix}
        fixActionClass={fixActionClass}
      />

      {/* Human Tool Notice */}
      {isHuman && (
        <div className="mt-2 rounded-lg bg-gray-50 px-3 py-2 text-xs text-gray-600">
          Use the System tab to create human tasks for tokens, installs, approvals, onboarding clicks, or provider account setup.
        </div>
      )}
    </div>
  );
}

export default ToolHealthCard;
