smom-dbis-138/frontend-dapp/src/components/admin/OffChainServices.tsx

/**
 * OffChainServices Component - Integration with state anchoring and transaction mirroring services
 */

import { useState, useEffect } from 'react'
import { CONTRACT_ADDRESSES } from '../../config/contracts'
import { chain138 } from '../../config/networks'

interface ServiceStatus {
  name: string
  status: 'running' | 'stopped' | 'unknown'
  lastUpdate: number | null
  endpoint?: string
}

const INITIAL_SERVICES: ServiceStatus[] = [
  {
    name: 'State Anchoring Service',
    status: 'unknown',
    lastUpdate: null,
    endpoint: 'http://192.168.11.221:8545', // Chain 138 RPC (VMID 2201, public/monitoring)
  },
  {
    name: 'Transaction Mirroring Service',
    status: 'unknown',
    lastUpdate: null,
    endpoint: 'http://192.168.11.221:8545',
  },
]

export default function OffChainServices() {
  const [services, setServices] = useState<ServiceStatus[]>(INITIAL_SERVICES)

  const checkServiceStatus = async (service: ServiceStatus): Promise<ServiceStatus> => {
    if (!service.endpoint) {
      return {
        ...service,
        status: 'unknown' as 'running' | 'stopped' | 'unknown',
        lastUpdate: Date.now(),
      }
    }

    try {
      // Try to check if it's an RPC endpoint
      if (service.endpoint.includes('8545') || service.endpoint.includes('rpc')) {
        // For RPC endpoints, try a simple eth_blockNumber call
        const response = await fetch(service.endpoint, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({
            jsonrpc: '2.0',
            method: 'eth_blockNumber',
            params: [],
            id: 1,
          }),
          signal: AbortSignal.timeout(5000), // 5 second timeout
        })

        if (response.ok) {
          const data = await response.json()
          if (data.result) {
            return {
              ...service,
              status: 'running' as 'running' | 'stopped' | 'unknown',
              lastUpdate: Date.now(),
            }
          }
        }
      } else {
        // For HTTP endpoints, try a simple GET request
        const response = await fetch(service.endpoint, {
          method: 'GET',
          signal: AbortSignal.timeout(5000), // 5 second timeout
        })

        if (response.ok) {
          return {
            ...service,
            status: 'running' as 'running' | 'stopped' | 'unknown',
            lastUpdate: Date.now(),
          }
        }
      }

      return {
        ...service,
        status: 'stopped' as 'running' | 'stopped' | 'unknown',
        lastUpdate: Date.now(),
      }
    } catch (error: unknown) {
      // Timeout or network error
      console.error(`Health check failed for ${service.name}:`, error)
      return {
        ...service,
        status: 'stopped' as 'running' | 'stopped' | 'unknown',
        lastUpdate: Date.now(),
      }
    }
  }

  useEffect(() => {
    const checkAllServices = async () => {
      const updated = await Promise.all(INITIAL_SERVICES.map(checkServiceStatus))
      setServices(updated)
    }

    checkAllServices()
    const interval = setInterval(checkAllServices, 30000) // Check every 30 seconds
    return () => clearInterval(interval)
  }, [])

  const getStatusColor = (status: string) => {
    switch (status) {
      case 'running':
        return 'bg-green-500/20 text-green-300 border-green-500/50'
      case 'stopped':
        return 'bg-red-500/20 text-red-300 border-red-500/50'
      default:
        return 'bg-yellow-500/20 text-yellow-300 border-yellow-500/50'
    }
  }

  return (
    <div className="space-y-6">
      <div className="bg-black/20 rounded-xl p-6 border border-white/10">
        <h2 className="text-xl font-bold text-white mb-4">Off-Chain Services</h2>
        <p className="text-white/70 text-sm mb-4">
          Monitor and manage off-chain services that interact with admin contracts.
        </p>

        <div className="space-y-4">
          {services.map((service, index) => (
            <div
              key={index}
              className={`rounded-lg p-4 border ${getStatusColor(service.status)}`}
            >
              <div className="flex justify-between items-start">
                <div className="flex-1">
                  <div className="flex items-center gap-2 mb-2">
                    <h3 className="text-white font-semibold">{service.name}</h3>
                    <span
                      className={`px-2 py-1 rounded text-xs font-semibold ${getStatusColor(service.status)}`}
                    >
                      {service.status.toUpperCase()}
                    </span>
                  </div>
                  {service.endpoint && (
                    <p className="text-white/60 text-xs font-mono">{service.endpoint}</p>
                  )}
                  {service.lastUpdate && (
                    <p className="text-white/50 text-xs mt-2">
                      Last checked: {new Date(service.lastUpdate).toLocaleString()}
                    </p>
                  )}
                </div>
                <div className="flex gap-2">
                  <button
                    onClick={() => checkServiceStatus(service).then((updated) => {
                      setServices((prev) => prev.map((s, i) => i === index ? updated : s))
                    })}
                    className="px-3 py-1 bg-blue-600 hover:bg-blue-700 text-white rounded text-sm font-semibold"
                  >
                    Refresh
                  </button>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>

      <div className="bg-black/20 rounded-xl p-6 border border-white/10">
        <h3 className="text-lg font-bold text-white mb-4">Service Information</h3>
        <div className="space-y-3 text-sm">
          <div>
            <p className="text-white/70 mb-1">State Anchoring Service</p>
            <p className="text-white/60 text-xs">
              Monitors {chain138.name} blocks and submits state proofs to MainnetTether contract.
            </p>
            <p className="text-white/60 text-xs font-mono mt-1">
              Contract: {CONTRACT_ADDRESSES.mainnet.MAINNET_TETHER}
            </p>
          </div>
          <div>
            <p className="text-white/70 mb-1">Transaction Mirroring Service</p>
            <p className="text-white/60 text-xs">
              Monitors {chain138.name} transactions and mirrors them to TransactionMirror contract.
            </p>
            <p className="text-white/60 text-xs font-mono mt-1">
              Contract: {CONTRACT_ADDRESSES.mainnet.TRANSACTION_MIRROR}
            </p>
          </div>
        </div>
      </div>
    </div>
  )
}