<template>
  <header>
    <div class="logo"><img src="/images/logos/logo.png" /></div>
    <div class="advertisement">Advertisement</div>
    <div class="connection-status" v-if="isLoggedIn">
      <div class="status-indicator" :class="backendStatusClass">
        <span class="status-dot"></span>
        <span class="status-text">B</span>
      </div>
      <div class="status-indicator" :class="daemonStatusClass">
        <span class="status-dot"></span>
        <span class="status-text">D</span>
      </div>
    </div>
  </header>
</template>

<script>
import { mapGetters } from 'vuex';

export default {
  name: 'AppHeader',
  computed: {
    ...mapGetters(['isLoggedIn', 'connectionStatus', 'daemonConnectionStatus']),
    backendStatusClass() {
      return {
        'status-connected': this.connectionStatus === 'connected',
        'status-connecting': this.connectionStatus === 'connecting',
        'status-disconnected': this.connectionStatus === 'disconnected',
        'status-error': this.connectionStatus === 'error'
      };
    },
    daemonStatusClass() {
      return {
        'status-connected': this.daemonConnectionStatus === 'connected',
        'status-connecting': this.daemonConnectionStatus === 'connecting',
        'status-disconnected': this.daemonConnectionStatus === 'disconnected',
        'status-error': this.daemonConnectionStatus === 'error'
      };
    }
  }
};
</script>

<style scoped>
header {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  background-color: #f8a22b;
}
.logo, .title, .advertisement {
  text-align: center;
}
.advertisement {
  flex: 1;
}
.logo > img {
  max-height: 50px;
}

.connection-status {
  display: flex;
  align-items: center;
  margin-left: 10px;
  gap: 5px;
}

.status-indicator {
  display: flex;
  align-items: center;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 6pt;
  font-weight: 500;
}

.status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-right: 4px;
  animation: pulse 2s infinite;
}

.status-connected .status-dot {
  background-color: #4caf50;
}

.status-connecting .status-dot {
  background-color: #ff9800;
}

.status-disconnected .status-dot {
  background-color: #f44336;
}

.status-error .status-dot {
  background-color: #f44336;
}

.status-connected {
  background-color: rgba(76, 175, 80, 0.1);
  color: #2e7d32;
}

.status-connecting {
  background-color: rgba(255, 152, 0, 0.1);
  color: #f57c00;
}

.status-disconnected {
  background-color: rgba(244, 67, 54, 0.1);
  color: #d32f2f;
}

.status-error {
  background-color: rgba(244, 67, 54, 0.1);
  color: #d32f2f;
}

@keyframes pulse {
  0% { opacity: 1; }
  50% { opacity: 0.5; }
  100% { opacity: 1; }
}
</style>
