<template>
  <!-- 快捷操作卡片 -->
  <div class="bg-white/90 backdrop-blur-sm rounded-2xl shadow-xl p-5 transform transition-all duration-300 hover:shadow-2xl border border-gray-100 h-full flex flex-col">
    <div class="flex items-center mb-4">
      <div class="w-8 h-8 rounded-full bg-purple-100 flex items-center justify-center mr-3">
        <i class="fa-solid fa-magic text-purple-500"></i>
      </div>
      <h3 class="font-semibold">快捷操作</h3>
    </div>
    
    <div class="grid grid-cols-2 gap-4 flex-grow">
      <button 
        @click="clearMessages"
        class="p-4 rounded-lg font-medium text-base flex flex-col items-center justify-center space-y-2 transition-all duration-300 bg-gray-100 hover:bg-gray-200 text-gray-700"
      >
        <i class="fa-solid fa-trash-can text-gray-500 text-lg"></i>
        <span>清空消息</span>
      </button>
      
      <button 
        @click="showConnectionHelp"
        class="p-4 rounded-lg font-medium text-base flex flex-col items-center justify-center space-y-2 transition-all duration-300 bg-gray-100 hover:bg-gray-200 text-gray-700"
      >
        <i class="fa-solid fa-question-circle text-gray-500 text-lg"></i>
        <span>帮助</span>
      </button>
      
      <button 
        @click="copyDebugInfo"
        class="p-4 rounded-lg font-medium text-base flex flex-col items-center justify-center space-y-2 transition-all duration-300 bg-gray-100 hover:bg-gray-200 text-gray-700"
      >
        <i class="fa-solid fa-copy text-gray-500 text-lg"></i>
        <span>复制调试信息</span>
      </button>
      
      <button 
        @click="toggleDarkMode"
        class="p-4 rounded-lg font-medium text-base flex flex-col items-center justify-center space-y-2 transition-all duration-300 bg-gray-100 hover:bg-gray-200 text-gray-700"
      >
        <i class="fa-solid fa-moon text-gray-500 text-lg"></i>
        <span>切换主题</span>
      </button>
      
      <button 
        @click="takePhoneScreenshot"
        :disabled="!isConnected"
        class="p-4 rounded-lg font-medium text-base flex flex-col items-center justify-center space-y-2 transition-all duration-300 bg-gray-100 hover:bg-gray-200 text-gray-700"
        :class="{ 'opacity-50 cursor-not-allowed': !isConnected }"
      >
        <i class="fa-solid fa-mobile-screen text-gray-500 text-lg"></i>
        <span>手机截屏</span>
      </button>
    </div>
  </div>
</template>

<script setup>
// Props
const props = defineProps({
  isConnected: {
    type: Boolean,
    required: true
  }
});

// Emits
const emit = defineEmits(['clear-messages', 'show-help', 'take-phone-screenshot']);

// Methods
const clearMessages = () => {
  emit('clear-messages');
};

const showConnectionHelp = () => {
  emit('show-help');
};

const copyDebugInfo = () => {
  const debugInfo = `浏览器: ${navigator.userAgent}\n时间: ${new Date().toLocaleString()}`;
  navigator.clipboard.writeText(debugInfo).then(() => {
    alert('调试信息已复制到剪贴板');
  }).catch(err => {
    
  });
};

const toggleDarkMode = () => {
  document.documentElement.classList.toggle('dark');
};

const takePhoneScreenshot = () => {
  if (props.isConnected) {
    emit('take-phone-screenshot');
  }
};
</script>