// ToolHealthDisplay - Component for displaying tool health status and summary
import React from 'react';

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 ToolHealthDisplay({ health, loading, onRefresh }) {
  if (loading) {
    return <div className="text-sm text-gray-400">Running diagnostics...</div>;
  }

  if (!health) {
    return (
      <div className="space-y-2">
        <p className="text-sm text-red-500">
          Healthcheck failed{health?.status ? ` (HTTP ${health.status})` : ""}
        </p>
        {health?.body && (
          <pre className="max-h-40 overflow-auto rounded bg-gray-50 px-3 py-2 text-xs text-gray-700 whitespace-pre-wrap">
            {typeof health.body === "string" ? health.body : JSON.stringify(health.body, null, 2)}
          </pre>
        )}
      </div>
    );
  }

  const summary = health?.summary;
  if (!summary) {
    return <p className="text-sm text-red-500">No health summary available</p>;
  }

  const degradedCount = (summary.degraded || 0) + (summary.unavailable || 0);

  return (
    <div className="space-y-4">
      {/* Health Summary */}
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-4">
          <div className="flex items-center gap-2">
            <div className="w-3 h-3 rounded-full bg-emerald-500"></div>
            <span className="text-sm font-medium">{summary.ok} ok</span>
          </div>
          <div className="flex items-center gap-2">
            <div className="w-3 h-3 rounded-full bg-amber-500"></div>
            <span className="text-sm font-medium">{summary.degraded} degraded</span>
          </div>
          <div className="flex items-center gap-2">
            <div className="w-3 h-3 rounded-full bg-red-500"></div>
            <span className="text-sm font-medium">{summary.unavailable} unavailable</span>
          </div>
        </div>
        
        <button
          onClick={onRefresh}
          className="text-xs px-3 py-1 rounded bg-blue-100 text-blue-700 hover:bg-blue-200 font-medium"
        >
          Re-run Diagnostics
        </button>
      </div>

      {/* Degraded Tools Alert */}
      {degradedCount > 0 && (
        <div className="p-3 bg-amber-50 rounded-lg border border-amber-200">
          <div className="text-sm font-medium text-amber-900">
            ⚠️ {degradedCount} tool{degradedCount > 1 ? 's' : ''} need attention
          </div>
          <div className="text-xs text-amber-700 mt-1">
            Some tools may not be functioning optimally. Check individual tool status below.
          </div>
        </div>
      )}
    </div>
  );
}

export default ToolHealthDisplay;
