<script lang="ts">
  import { backendStore } from "$lib/stores/backend";
  import { configStore } from "$lib/stores/config";

  let statusColor = $derived.by(() => {
    switch (backendStore.appState) {
      case "initializing":
        return "#ff9800";
      case "ready":
        return "#4caf50";
      case "transcribing":
        return "#f44336";
      case "error":
        return "#f44336";
      default:
        return "#888";
    }
  });

  let isPulsing = $derived(backendStore.appState === "transcribing");
  let userName = $derived(configStore.config.user.name);
</script>

<div class="status-bar">
  <div class="status-left">
    <span
      class="status-indicator"
      class:pulsing={isPulsing}
      style="background-color: {statusColor}"
    ></span>
    <span class="state-message">{backendStore.stateMessage}</span>
  </div>
  <div class="status-right">
    {#if backendStore.deviceInfo}
      <span class="device-info">{backendStore.deviceInfo}</span>
      <span class="separator">|</span>
    {/if}
    <span class="user-name">{userName}</span>
  </div>
</div>

<style>
  .status-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 20px;
    background-color: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    font-size: 12px;
    flex-shrink: 0;
  }

  .status-left {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .status-right {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary);
  }

  .status-indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
  }

  .status-indicator.pulsing {
    animation: pulse 1.5s ease-in-out infinite;
  }

  @keyframes pulse {
    0%,
    100% {
      opacity: 1;
      box-shadow: 0 0 0 0 rgba(244, 67, 54, 0.4);
    }
    50% {
      opacity: 0.7;
      box-shadow: 0 0 0 6px rgba(244, 67, 54, 0);
    }
  }

  .state-message {
    color: var(--text-primary);
  }

  .device-info {
    color: var(--text-secondary);
  }

  .separator {
    color: var(--text-muted);
  }

  .user-name {
    color: var(--accent-green);
    font-weight: 500;
  }
</style>
