import React, { useState, useEffect } from 'react'
import mcpService, { MCPServerStatus } from '../services/mcpService'
interface MCPStatusBannerProps {
serverName: string
displayName: string
}
export default function MCPStatusBanner({ serverName, displayName }: MCPStatusBannerProps) {
const [status, setStatus] = useState<MCPServerStatus | null>(null)
const [checking, setChecking] = useState(true)
useEffect(() => {
const checkStatus = async () => {
setChecking(true)
const servers = await mcpService.getServers()
const serverStatus = servers[serverName]
setStatus(serverStatus || null)
setChecking(false)
}
checkStatus()
const interval = setInterval(checkStatus, 10000) // Check every 10 seconds
return () => clearInterval(interval)
}, [serverName])
if (checking) {
return (
<div style={{
padding: '12px 16px',
backgroundColor: '#f59e0b',
color: 'white',
borderRadius: '8px',
marginBottom: '16px',
display: 'flex',
alignItems: 'center',
gap: '8px',
fontSize: '14px',
fontWeight: '500'
}}>
<span>🔄</span>
<span>Checking {displayName} MCP server connection...</span>
</div>
)
}
if (!status || !status.healthy) {
return (
<div style={{
padding: '12px 16px',
backgroundColor: '#dc2626',
color: 'white',
borderRadius: '8px',
marginBottom: '16px',
border: '2px solid #fca5a5'
}}>
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '8px' }}>
<div style={{ display: 'flex', alignItems: 'center', gap: '8px', fontSize: '16px', fontWeight: '600' }}>
<span>⚠️</span>
<span>MOCK DATA MODE - {displayName} MCP Server Not Connected</span>
</div>
</div>
<div style={{ fontSize: '13px', opacity: 0.9, marginTop: '8px' }}>
<div style={{ marginBottom: '4px' }}>
<strong>Current Status:</strong> Using simulated/mock data. Real {displayName} integration unavailable.
</div>
<div style={{ marginBottom: '4px' }}>
<strong>Expected URL:</strong> {status?.base_url || 'Not configured'}
</div>
<div style={{ marginTop: '8px', padding: '8px', backgroundColor: 'rgba(0,0,0,0.2)', borderRadius: '4px' }}>
<strong>To enable real {displayName} integration:</strong>
<ol style={{ margin: '8px 0 0 20px', padding: 0 }}>
<li>Start the {displayName} MCP server on port {status?.base_url?.split(':').pop() || 'N/A'}</li>
<li>Ensure the server is accessible at: {status?.base_url || 'N/A'}</li>
<li>Check the setup guide: <code style={{ backgroundColor: 'rgba(0,0,0,0.3)', padding: '2px 6px', borderRadius: '3px' }}>docs/MCP_SETUP.md</code></li>
</ol>
</div>
</div>
</div>
)
}
return (
<div style={{
padding: '12px 16px',
backgroundColor: '#10b981',
color: 'white',
borderRadius: '8px',
marginBottom: '16px',
display: 'flex',
alignItems: 'center',
gap: '8px',
fontSize: '14px',
fontWeight: '500'
}}>
<span>✅</span>
<span><strong>{displayName} MCP Server Connected</strong> - Using real data from {status.base_url}</span>
</div>
)
}
