gridpilot.gg/apps/website/components/dev/sections/APIStatusSection.tsx

'use client';

import { Activity, Wifi, RefreshCw, Terminal } from 'lucide-react';
import { useState } from 'react';
import { ApiConnectionMonitor } from '@/lib/api/base/ApiConnectionMonitor';
import { CircuitBreakerRegistry } from '@/lib/api/base/RetryHandler';
import { useNotifications } from '@/components/notifications/NotificationProvider';

interface APIStatusSectionProps {
  apiStatus: string;
  apiHealth: any;
  circuitBreakers: Record<string, any>;
  checkingHealth: boolean;
  onHealthCheck: () => void;
  onResetStats: () => void;
  onTestError: () => void;
}

export function APIStatusSection({ 
  apiStatus, 
  apiHealth, 
  circuitBreakers, 
  checkingHealth,
  onHealthCheck,
  onResetStats,
  onTestError
}: APIStatusSectionProps) {
  return (
    <div>
      <div className="flex items-center gap-2 mb-3">
        <Activity className="w-4 h-4 text-gray-400" />
        <span className="text-xs font-semibold text-gray-400 uppercase tracking-wide">
          API Status
        </span>
      </div>

      {/* Status Indicator */}
      <div className={`flex items-center justify-between p-2 rounded-lg mb-2 ${
        apiStatus === 'connected' ? 'bg-green-500/10 border border-green-500/30' :
        apiStatus === 'degraded' ? 'bg-yellow-500/10 border border-yellow-500/30' :
        'bg-red-500/10 border border-red-500/30'
      }`}>
        <div className="flex items-center gap-2">
          <Wifi className={`w-4 h-4 ${
            apiStatus === 'connected' ? 'text-green-400' :
            apiStatus === 'degraded' ? 'text-yellow-400' :
            'text-red-400'
          }`} />
          <span className="text-sm font-semibold text-white">{apiStatus.toUpperCase()}</span>
        </div>
        <span className="text-xs text-gray-400">
          {apiHealth.successfulRequests}/{apiHealth.totalRequests} req
        </span>
      </div>

      {/* Reliability */}
      <div className="flex items-center justify-between text-xs mb-2">
        <span className="text-gray-500">Reliability</span>
        <span className={`font-bold ${
          apiHealth.totalRequests === 0 ? 'text-gray-500' :
          (apiHealth.successfulRequests / apiHealth.totalRequests) >= 0.95 ? 'text-green-400' :
          (apiHealth.successfulRequests / apiHealth.totalRequests) >= 0.8 ? 'text-yellow-400' :
          'text-red-400'
        }`}>
          {apiHealth.totalRequests === 0 ? 'N/A' :
           ((apiHealth.successfulRequests / apiHealth.totalRequests) * 100).toFixed(1) + '%'}
        </span>
      </div>

      {/* Response Time */}
      <div className="flex items-center justify-between text-xs mb-2">
        <span className="text-gray-500">Avg Response</span>
        <span className="text-blue-400 font-mono">
          {apiHealth.averageResponseTime.toFixed(0)}ms
        </span>
      </div>

      {/* Consecutive Failures */}
      {apiHealth.consecutiveFailures > 0 && (
        <div className="flex items-center justify-between text-xs mb-2 bg-red-500/10 rounded px-2 py-1">
          <span className="text-red-400">Consecutive Failures</span>
          <span className="text-red-400 font-bold">{apiHealth.consecutiveFailures}</span>
        </div>
      )}

      {/* Circuit Breakers */}
      <div className="mt-2">
        <div className="text-[10px] text-gray-500 mb-1">Circuit Breakers:</div>
        {Object.keys(circuitBreakers).length === 0 ? (
          <div className="text-[10px] text-gray-500 italic">None active</div>
        ) : (
          <div className="space-y-1 max-h-16 overflow-auto">
            {Object.entries(circuitBreakers).map(([endpoint, status]: [string, any]) => (
              <div key={endpoint} className="flex items-center justify-between text-[10px]">
                <span className="text-gray-400 truncate flex-1">{endpoint.split('/').pop() || endpoint}</span>
                <span className={`px-1 rounded ${
                  status.state === 'CLOSED' ? 'bg-green-500/20 text-green-400' :
                  status.state === 'OPEN' ? 'bg-red-500/20 text-red-400' :
                  'bg-yellow-500/20 text-yellow-400'
                }`}>
                  {status.state}
                </span>
                {status.failures > 0 && (
                  <span className="text-red-400 ml-1">({status.failures})</span>
                )}
              </div>
            ))}
          </div>
        )}
      </div>

      {/* API Actions */}
      <div className="grid grid-cols-2 gap-2 mt-3">
        <button
          onClick={onHealthCheck}
          disabled={checkingHealth}
          className="px-2 py-1.5 bg-primary-blue hover:bg-primary-blue/80 text-white text-xs rounded transition-colors disabled:opacity-50 flex items-center justify-center gap-1"
        >
          <RefreshCw className={`w-3 h-3 ${checkingHealth ? 'animate-spin' : ''}`} />
          Health Check
        </button>
        <button
          onClick={onResetStats}
          className="px-2 py-1.5 bg-iron-gray hover:bg-charcoal-outline text-gray-300 text-xs rounded transition-colors border border-charcoal-outline"
        >
          Reset Stats
        </button>
      </div>

      <div className="grid grid-cols-1 gap-2 mt-2">
        <button
          onClick={onTestError}
          className="px-2 py-1.5 bg-red-600 hover:bg-red-700 text-white text-xs rounded transition-colors flex items-center justify-center gap-1"
        >
          <Terminal className="w-3 h-3" />
          Test Error Handler
        </button>
      </div>

      <div className="text-[10px] text-gray-600 mt-2">
        Last Check: {apiHealth.lastCheck ? new Date(apiHealth.lastCheck).toLocaleTimeString() : 'Never'}
      </div>
    </div>
  );
}