import { useAuth } from '../../hooks/useAuth';
import { getTokenClaims } from '../../lib/auth';
import { useMetricsStream } from '../../hooks/useGrpcStream';

export function StatusBar() {
  const { connected } = useMetricsStream();
  const { authenticated, logout } = useAuth();
  const claims = authenticated ? getTokenClaims() : null;

  return (
    <footer className="flex items-center justify-between px-4 py-1 text-xs bg-[var(--color-bg-secondary)] border-t border-[var(--color-border)] text-[var(--color-text-secondary)]">
      <div className="flex items-center gap-4">
        <span className="flex items-center gap-1" aria-live="polite">
          <span
            className={`inline-block w-2 h-2 rounded-full ${
              connected ? 'bg-[var(--color-green)]' : 'bg-[var(--color-red)]'
            }`}
            aria-hidden="true"
          />
          gRPC: {connected ? 'Connected' : 'Disconnected'}
        </span>
        {authenticated && claims && (
          <span>User: {claims.sub}</span>
        )}
      </div>
      <div className="flex items-center gap-4">
        <span>Foxhunt Trading System</span>
        {authenticated && (
          <button
            onClick={logout}
            aria-label="Sign out of the trading system"
            className="text-[var(--color-text-secondary)] hover:text-[var(--color-red)] transition-colors"
          >
            Sign Out
          </button>
        )}
      </div>
    </footer>
  );
}
