import React from 'react';
import { useApp } from '../context/AppContext';

export const VisitorStatsBar: React.FC = () => {
  const { state, visitorSettings, t, tNum } = useApp();

  if (!visitorSettings || visitorSettings.is_enabled === false) {
    return null;
  }

  const showActive = visitorSettings.show_active_visitors !== false;
  const showTotal = visitorSettings.show_total_visitors !== false;

  if (!showActive && !showTotal) {
    return null;
  }

  return (
    <div
      id="visitor-stats-bar"
      className="w-full border-b py-2 px-4 transition-colors"
      style={{
        backgroundColor: 'var(--header-bg, #0A0D0FEE)',
        borderColor: 'var(--border-color, #222A33)'
      }}
    >
      <div className="max-w-7xl mx-auto flex items-center justify-center text-center">
        <div className="inline-flex items-center gap-2 flex-wrap justify-center text-xs sm:text-sm font-medium">
          {/* Live Online Visitors */}
          {showActive && (
            <span className="inline-flex items-center gap-1.5 font-semibold text-emerald-500">
              <span className="relative flex h-2 w-2">
                <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
                <span className="relative inline-flex rounded-full h-2 w-2 bg-emerald-500"></span>
              </span>
              <span className="font-mono">{tNum(state.activeVisitors)}</span>
              <span>{t('visitors_online', undefined, 'online')}</span>
            </span>
          )}

          {/* Separator Dot */}
          {showActive && showTotal && (
            <span className="text-slate-400 dark:text-slate-600 font-bold select-none">·</span>
          )}

          {/* Total Visitors Since Launch */}
          {showTotal && (
            <span style={{ color: 'var(--muted-text-color, #8A99A8)' }}>
              <span
                className="font-mono font-semibold"
                style={{ color: 'var(--heading-color, #FFFFFF)' }}
              >
                {tNum(state.totalVisitors)}
              </span>{' '}
              {t('visitors_since_launch', undefined, 'visitors since launch')}
            </span>
          )}
        </div>
      </div>
    </div>
  );
};
