<!--
  会议工具条（Task 11）

  职责：
  - 渲染麦/摄/邀请/成员/聊天/挂断 6 个主要操作按钮
  - 通过事件派发意图，不持有业务状态（状态由父组件 / Pinia 管理）

  交互：
  - 麦克风 / 摄像头按钮显示当前状态（开 = 蓝色，关 = 深灰）
  - 挂断按钮为红色，点击仅派发事件，确认弹窗由父页面承接（降低本组件耦合）
  - 按钮带 loading 态，禁用期间点击不派发事件
-->
<template>
  <view class="toolbar" :class="{ 'toolbar-all-muted': allMuted }">
    <button class="btn" :class="{ active: audioEnabled, loading: audioLoading }" :disabled="audioLoading" @click="emitIf('mic-toggle')">
      <view class="icon">
        <svg v-if="audioEnabled" viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"></path>
          <path d="M19 10v2a7 7 0 0 1-14 0v-2"></path>
          <line x1="12" y1="19" x2="12" y2="23"></line>
          <line x1="8" y1="23" x2="16" y2="23"></line>
        </svg>
        <svg v-else viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <line x1="1" y1="1" x2="23" y2="23"></line>
          <path d="M9 9v3a3 3 0 0 0 5.12 2.12M15 9.34V4a3 3 0 0 0-5.94-.6"></path>
          <path d="M17 16.95A7 7 0 0 1 5 12v-2m14 0v2a7 7 0 0 1-.11 1.23"></path>
          <line x1="12" y1="19" x2="12" y2="23"></line>
          <line x1="8" y1="23" x2="16" y2="23"></line>
        </svg>
      </view>
      <text class="label">{{ audioEnabled ? '静音' : '开麦' }}</text>
    </button>

    <button class="btn" :class="{ active: videoEnabled, loading: videoLoading }" :disabled="videoLoading" @click="emitIf('cam-toggle')">
      <view class="icon">
        <svg v-if="videoEnabled" viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <polygon points="23 7 16 12 23 17 23 7"></polygon>
          <rect x="1" y="5" width="15" height="14" rx="2" ry="2"></rect>
        </svg>
        <svg v-else viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <line x1="1" y1="1" x2="23" y2="23"></line>
          <path d="M16 16v2a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h2m5.66 0H14a2 2 0 0 1 2 2v4m0 0l6-4v10"></path>
        </svg>
      </view>
      <text class="label">
        <text class="label-desktop">{{ videoEnabled ? '停止视频' : '开启视频' }}</text>
        <text class="label-mobile">视频</text>
      </text>
    </button>

    <button
      class="btn btn-screen"
      :class="{ active: screenSharing, loading: screenLoading }"
      :disabled="screenLoading || screenDisabled"
      :title="screenDisabledReason || ''"
      @click="emitIf('screen-toggle')"
    >
      <view class="icon">
        <svg v-if="screenSharing" viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <!-- 共享中：实心显示器 + 停止图示 -->
          <rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect>
          <line x1="8" y1="21" x2="16" y2="21"></line>
          <line x1="12" y1="17" x2="12" y2="21"></line>
          <line x1="6" y1="7" x2="18" y2="13"></line>
          <line x1="18" y1="7" x2="6" y2="13"></line>
        </svg>
        <svg v-else viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <!-- 未共享：空显示器 + 上箭头 -->
          <rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect>
          <line x1="8" y1="21" x2="16" y2="21"></line>
          <line x1="12" y1="17" x2="12" y2="21"></line>
          <polyline points="9 10 12 7 15 10"></polyline>
          <line x1="12" y1="7" x2="12" y2="14"></line>
        </svg>
      </view>
      <text class="label">
        <text class="label-desktop">{{ screenSharing ? '停止共享' : '共享屏幕' }}</text>
        <text class="label-mobile">共享</text>
      </text>
    </button>

    <!-- 录制按钮（Phase B）：仅主持人可见；recording=true 时红色脉动；上传中禁用 -->
    <button
      v-if="showRecording"
      class="btn btn-recording"
      :class="{ active: recording, 'is-recording': recording, loading: recordingLoading }"
      :disabled="recordingLoading"
      @click="emitIf('recording-toggle')"
    >
      <view class="icon">
        <svg v-if="recording" viewBox="0 0 24 24" width="22" height="22" fill="currentColor" stroke="none">
          <circle cx="12" cy="12" r="6"></circle>
        </svg>
        <svg v-else viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <circle cx="12" cy="12" r="7"></circle>
          <circle cx="12" cy="12" r="3"></circle>
        </svg>
      </view>
      <text class="label">
        <text class="label-desktop">{{ recording ? '停止录制' : '开始录制' }}</text>
        <text class="label-mobile">录制</text>
      </text>
    </button>

    <button class="btn" @click="emitIf('invite')">
      <view class="icon">
        <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
          <circle cx="8.5" cy="7" r="4"></circle>
          <line x1="20" y1="8" x2="20" y2="14"></line>
          <line x1="23" y1="11" x2="17" y2="11"></line>
        </svg>
      </view>
      <text class="label">邀请</text>
    </button>

    <button class="btn" @click="emitIf('members')">
      <view class="icon">
        <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
          <circle cx="9" cy="7" r="4"></circle>
          <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
          <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
        </svg>
        <view v-if="memberCount > 0" class="badge">{{ memberCount > 99 ? '99+' : memberCount }}</view>
      </view>
      <text class="label">成员</text>
    </button>

    <button class="btn" :disabled="!allowChat" @click="emitIf('chat')">
      <view class="icon">
        <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
        </svg>
        <view v-if="unreadChatCount > 0" class="badge badge-red">{{ unreadChatCount > 99 ? '99+' : unreadChatCount }}</view>
      </view>
      <text class="label">聊天</text>
    </button>

    <button class="btn btn-leave" @click="emitIf('leave')">
      <view class="icon">
        <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M10.68 13.31a16 16 0 0 0 3.41 2.6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7 2 2 0 0 1 1.72 2v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91"></path>
          <line x1="23" y1="1" x2="1" y2="23"></line>
        </svg>
      </view>
      <text class="label">离开</text>
    </button>
  </view>
</template>

<script setup>
const props = defineProps({
  audioEnabled: { type: Boolean, default: false },
  videoEnabled: { type: Boolean, default: false },
  audioLoading: { type: Boolean, default: false },
  videoLoading: { type: Boolean, default: false },
  memberCount: { type: Number, default: 0 },
  unreadChatCount: { type: Number, default: 0 },
  allowChat: { type: Boolean, default: true },
  /** Task 15 原创特色 4：全员静音氛围色 */
  allMuted: { type: Boolean, default: false },
  /** Phase 3 屏幕共享：当前用户是否在共享屏幕（决定按钮文案/高亮） */
  screenSharing: { type: Boolean, default: false },
  /** 屏幕共享操作中（getDisplayMedia / produce / closeProducer 同步等待） */
  screenLoading: { type: Boolean, default: false },
  /** 是否禁用屏幕共享按钮（有他人在共享 / 平台不支持等场景） */
  screenDisabled: { type: Boolean, default: false },
  /** 屏幕共享按钮禁用原因（hover 提示文案） */
  screenDisabledReason: { type: String, default: '' },
  /** Phase B 录制：是否显示录制按钮（仅 host 显示） */
  showRecording: { type: Boolean, default: false },
  /** Phase B 录制：当前是否在录制中 */
  recording: { type: Boolean, default: false },
  /** Phase B 录制：REST 调用 / 上传中 loading 态，禁用按钮 */
  recordingLoading: { type: Boolean, default: false }
})

const emit = defineEmits(['mic-toggle', 'cam-toggle', 'screen-toggle', 'recording-toggle', 'invite', 'members', 'chat', 'leave'])

/** 统一过滤 loading 态，避免重复点击 */
const emitIf = (name) => {
  if (name === 'mic-toggle' && props.audioLoading) return
  if (name === 'cam-toggle' && props.videoLoading) return
  if (name === 'screen-toggle' && (props.screenLoading || props.screenDisabled)) return
  if (name === 'recording-toggle' && props.recordingLoading) return
  emit(name)
}
</script>

<style scoped>
.toolbar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16rpx;
  padding: 18rpx 24rpx calc(18rpx + env(safe-area-inset-bottom)) 24rpx;
  background: rgba(17, 24, 39, 0.88);
  backdrop-filter: blur(16px);
  border-top: 1rpx solid rgba(255, 255, 255, 0.08);
  /* flex-shrink:0 保证 body 内容高度过大时不会把 toolbar 挤出视口；
     z-index 需要高于 MemberPanel / InviteDialog 的遮罩（z-index: 200），
     这样成员 / 邀请抽屉打开时用户仍可点击 toolbar 按钮（二次点击 toggle 关闭面板）。
     同时保持低于离会确认弹窗 .leave-mask (z-index: 220)。 */
  flex-shrink: 0;
  position: relative;
  z-index: 210;
  transition: background 0.4s ease, border-top-color 0.4s ease;
}
/* Task 15 原创特色 4：全员静音氛围色
   冷蓝渐变暗示"全房间安静"，触发条件由父组件 computed (allMuted) 控制 */
.toolbar.toolbar-all-muted {
  background: linear-gradient(to top, rgba(30, 58, 138, 0.88), rgba(30, 64, 175, 0.78));
  border-top-color: rgba(96, 165, 250, 0.18);
}

.btn {
  all: unset;
  cursor: pointer;
  min-width: 104rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6rpx;
  padding: 8rpx 8rpx;
  border-radius: 16rpx;
  transition: background-color 0.15s ease, transform 0.1s ease;
  color: rgba(255, 255, 255, 0.85);
  position: relative;
}
/* 关键修复：uni-app H5 会为 <button> 编译后的 <uni-button> 自动注入一个
   伪元素 ::after（尺寸约 2400rpx × 160rpx，向右下延伸），
   作为点击态反馈遮罩；若不抹除，会覆盖右侧所有兄弟按钮，
   导致除最后一个按钮外其他按钮都"点不到"。 */
.btn::after {
  content: none !important;
  display: none !important;
}
.btn:hover { background: rgba(255, 255, 255, 0.06); }
.btn:active { transform: translateY(1rpx); }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; }

.icon {
  position: relative;
  width: 72rpx;
  height: 72rpx;
  border-radius: 50%;
  background: rgba(55, 65, 81, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  transition: background-color 0.15s ease;
}
.btn.active .icon { background: #3B82F6; }
.btn.loading .icon { opacity: 0.6; }

.label {
  font-size: 22rpx;
  letter-spacing: 0.5rpx;
  color: inherit;
}
.label-mobile { display: none; }

.btn-leave .icon { background: #EF4444; }
.btn-leave:hover .icon { background: #DC2626; }

/* Phase B 录制按钮：录制中红色脉动 */
.btn-recording.is-recording .icon {
  background: #EF4444;
  animation: recording-pulse 1.6s ease-in-out infinite;
}
@keyframes recording-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.55); }
  50% { box-shadow: 0 0 0 12rpx rgba(239, 68, 68, 0); }
}

.badge {
  position: absolute;
  top: -6rpx;
  right: -6rpx;
  min-width: 32rpx;
  height: 32rpx;
  padding: 0 6rpx;
  border-radius: 999rpx;
  background: #10B981;
  color: #FFFFFF;
  font-size: 18rpx;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.4);
}
.badge.badge-red { background: #EF4444; }

@media (max-width: 750px) {
  .toolbar {
    position: fixed;
    left: 14rpx;
    right: 14rpx;
    bottom: calc(12rpx + env(safe-area-inset-bottom));
    justify-content: space-between;
    gap: 6rpx;
    box-sizing: border-box;
    padding: 14rpx 14rpx;
    background: rgba(7, 15, 30, 0.9);
    backdrop-filter: blur(18px);
    border: 1rpx solid rgba(148, 163, 184, 0.18);
    border-radius: 32rpx;
    box-shadow: 0 12rpx 34rpx rgba(0, 0, 0, 0.42);
    overflow-x: hidden;
    overflow-y: hidden;
  }
  .btn {
    min-width: 0;
    flex: 1 1 0;
    gap: 6rpx;
    padding: 4rpx 0;
    border-radius: 18rpx;
  }
  .btn:hover { background: transparent; }
  .btn:active { background: rgba(255, 255, 255, 0.08); }
  .btn-screen {
    display: none;
  }
  .icon {
    width: 56rpx;
    height: 56rpx;
    background: rgba(51, 65, 85, 0.92);
    box-shadow: inset 0 0 0 1rpx rgba(255, 255, 255, 0.08);
  }
  .icon svg {
    width: 40rpx;
    height: 40rpx;
  }
  .btn.active .icon { background: #2563EB; }
  .btn[disabled] .icon {
    background: rgba(30, 41, 59, 0.72);
    color: rgba(255, 255, 255, 0.38);
    box-shadow: inset 0 0 0 1rpx rgba(255, 255, 255, 0.05);
  }
  .btn[disabled] .label { color: rgba(255, 255, 255, 0.36); }
  .btn-leave .icon { background: #EF4444; }
  .btn-leave .label { color: #FECACA; }
  .label {
    max-width: 100%;
    font-size: 19rpx;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .label-desktop { display: none; }
  .label-mobile { display: inline; }
  .badge {
    top: -8rpx;
    right: -8rpx;
    min-width: 28rpx;
    height: 28rpx;
    font-size: 16rpx;
  }
}

@media (max-width: 380px) {
  .toolbar {
    left: 10rpx;
    right: 10rpx;
    padding-left: 8rpx;
    padding-right: 8rpx;
  }
  .icon {
    width: 50rpx;
    height: 50rpx;
  }
  .icon svg {
    width: 36rpx;
    height: 36rpx;
  }
  .label {
    font-size: 17rpx;
  }
}
</style>
