<template>
  <!-- 导航栏 - 现代化设计 -->
  <header class="bg-white/80 backdrop-blur-md shadow-lg sticky top-0 z-50 transition-all duration-300 hover:bg-white">
    <div class="container mx-auto px-4 sm:px-6 py-2 flex justify-between items-center">
      <div class="flex items-center space-x-2 group flex-nowrap min-w-max">
        <div class="w-8 h-8 rounded-xl bg-[#165DFF] flex items-center justify-center text-white shadow-md shadow-primary/20 transition-all duration-300 group-hover:scale-110 flex-shrink-0">
          <i class="fa-solid fa-bolt"></i>
        </div>
        <h1 class="text-base sm:text-lg font-bold text-primary whitespace-nowrap flex-shrink-0">
          WebSocket 通信中心
        </h1>
      </div>
      
      <div class="flex items-center space-x-4">
        <!-- 连接状态指示器 -->
        <div class="hidden sm:flex items-center space-x-2 px-2 py-1 rounded-full bg-white shadow-sm border border-gray-100 transition-all duration-300 hover:shadow-md">
          <div class="relative">
            <span :class="connectionIconClass" class="animate-pulse block w-2 h-2"></span>
            <span :class="connectionIconClass" class="absolute top-0 left-0 animate-ping opacity-30 block w-2 h-2 rounded-full"></span>
          </div>
          <span class="text-sm font-medium" :class="connectionTextClass">{{ connectionStatusText }}</span>
        </div>
        
        <!-- 连接控制按钮 -->
        <button 
          @click="toggleConnection" 
          class="px-4 py-2 rounded-lg font-medium transition-all duration-300 flex items-center space-x-2 shadow-sm hover:shadow-md transform hover:-translate-y-0.5"
          :class="connectButtonClass"
        >
          <i :class="connectBtnIconClass"></i>
          <span>{{ connectBtnText }}</span>
        </button>
      </div>
    </div>
  </header>
</template>

<script setup>
import { computed } from 'vue';

// Props
const props = defineProps({
  isConnected: {
    type: Boolean,
    required: true
  },
  wsUrl: {
    type: String,
    required: true
  }
});

// Emits
const emit = defineEmits(['toggle-connection']);

// Computed
const connectionStatusText = computed(() => {
  return props.isConnected ? '已连接' : '未连接';
});

const connectionIconClass = computed(() => {
  return props.isConnected 
    ? 'rounded-full bg-green-500' 
    : 'rounded-full bg-red-500';
});

const connectionTextClass = computed(() => {
  return props.isConnected ? 'text-green-600' : 'text-red-600';
});

const connectButtonClass = computed(() => {
  return props.isConnected 
    ? 'bg-red-50 text-red-600 border border-red-200 hover:bg-red-100' 
    : 'bg-[#165DFF] text-white hover:bg-[#1453e0]';
});

const connectBtnIconClass = computed(() => {
  return props.isConnected 
    ? 'fa-solid fa-plug-circle-xmark' 
    : 'fa-solid fa-plug-circle-plus';
});

const connectBtnText = computed(() => {
  return props.isConnected ? '断开连接' : '连接服务器';
});

// Methods
const toggleConnection = () => {
  emit('toggle-connection');
};
</script>