import React from 'react';
import { Alert, Button, Space } from 'antd';
import { ReloadOutlined } from '@ant-design/icons';
import StatusIcon from './common/StatusIcon.jsx';
import { UI_CONSTANTS } from '../constants';

const ServiceStatusBanner = ({ serviceStatus, onRefresh }) => {

  const getStatusMessage = () => {
    switch (serviceStatus.overall) {
      case 'online':
        return 'All services are running normally';
      case 'partial':
        return 'Some services are unavailable - limited functionality';
      case 'offline':
        return 'Backend services are offline - running in offline mode';
      default:
        return 'Checking service status...';
    }
  };

  const getStatusType = () => {
    switch (serviceStatus.overall) {
      case 'online':
        return 'success';
      case 'partial':
        return 'warning';
      case 'offline':
        return 'error';
      default:
        return 'info';
    }
  };

  const getServiceDetails = () => {
    const details = [];
    
    if (!serviceStatus.apiGateway.available) {
      details.push(`API Gateway: ${serviceStatus.apiGateway.error || 'Unavailable'}`);
    }
    if (!serviceStatus.serviceAdapters.available) {
      details.push(`Service Adapters: ${serviceStatus.serviceAdapters.error || 'Unavailable'}`);
    }
    if (!serviceStatus.apiDocs.available) {
      details.push(`API Docs: ${serviceStatus.apiDocs.error || 'Unavailable'}`);
    }

    return details;
  };

  if (serviceStatus.overall === 'online') {
    return null; // Don't show banner when everything is working
  }

  return (
    <Alert
      message={
        <Space>
          <StatusIcon status={serviceStatus.overall} />
          <span>{getStatusMessage()}</span>
          {onRefresh && (
            <Button 
              type="link" 
              size="small" 
              icon={<ReloadOutlined />}
              onClick={onRefresh}
            >
              Refresh
            </Button>
          )}
        </Space>
      }
      description={
        serviceStatus.overall !== 'checking' && (
          <div>
            {getServiceDetails().length > 0 && (
              <div style={{ marginTop: 8 }}>
                <strong>Service Details:</strong>
                <ul style={{ margin: '4px 0 0 0', paddingLeft: '20px' }}>
                  {getServiceDetails().map((detail, index) => (
                    <li key={index}>{detail}</li>
                  ))}
                </ul>
              </div>
            )}
            {serviceStatus.overall === 'offline' && (
              <div style={{ marginTop: 8 }}>
                <strong>Offline Mode:</strong> The frontend is running with fallback data. 
                Start the backend services to enable full functionality.
              </div>
            )}
          </div>
        )
      }
      type={getStatusType()}
      showIcon={false}
      style={{ marginBottom: UI_CONSTANTS.MARGIN_BOTTOM }}
      closable={serviceStatus.overall === 'partial'}
    />
  );
};

export default ServiceStatusBanner;