<script setup lang="ts">
// 회의실 컨트롤 바 — 마이크/카메라/화면공유(준비중)/채팅/참여자/나가기.
// 위치(pos)는 하단 중앙(bottom) 또는 상단 우측(top).
import MeetingIcon from './MeetingIcon.vue'

interface Props {
  pos: 'bottom' | 'top'
  micEnabled: boolean
  camEnabled: boolean
  chatOpen: boolean
  peopleOpen: boolean
  unread: number
}
defineProps<Props>()
const emit = defineEmits<{
  (e: 'toggle-mic'): void
  (e: 'toggle-cam'): void
  (e: 'toggle-chat'): void
  (e: 'toggle-people'): void
  (e: 'leave'): void
}>()
</script>

<template>
  <div
    class="controlbar"
    :class="`pos-${pos}`"
  >
    <button
      type="button"
      class="cb-btn"
      :class="{ 'danger-state': !micEnabled }"
      :title="micEnabled ? '마이크 끄기' : '마이크 켜기'"
      @click="emit('toggle-mic')"
    >
      <MeetingIcon :name="micEnabled ? 'mic' : 'micOff'" />
      <span class="cb-lbl">{{ micEnabled ? '마이크' : '음소거' }}</span>
    </button>
    <button
      type="button"
      class="cb-btn"
      :class="{ 'danger-state': !camEnabled }"
      :title="camEnabled ? '카메라 끄기' : '카메라 켜기'"
      @click="emit('toggle-cam')"
    >
      <MeetingIcon :name="camEnabled ? 'cam' : 'camOff'" />
      <span class="cb-lbl">{{ camEnabled ? '카메라' : '카메라 꺼짐' }}</span>
    </button>

    <span class="cb-div" />

    <button
      type="button"
      class="cb-btn soon"
      disabled
      title="화면 공유 (준비 중)"
    >
      <MeetingIcon name="screen" />
      <span class="cb-lbl">화면 공유</span>
      <span class="cb-soon">곧</span>
    </button>
    <button
      type="button"
      class="cb-btn"
      :class="{ on: chatOpen }"
      title="채팅"
      @click="emit('toggle-chat')"
    >
      <MeetingIcon name="chat" />
      <span class="cb-lbl">채팅</span>
      <span
        v-if="unread > 0"
        class="cb-badge"
      >{{ unread > 9 ? '9+' : unread }}</span>
    </button>
    <button
      type="button"
      class="cb-btn"
      :class="{ on: peopleOpen }"
      title="참여자"
      @click="emit('toggle-people')"
    >
      <MeetingIcon name="users" />
      <span class="cb-lbl">참여자</span>
    </button>

    <span class="cb-div" />

    <button
      type="button"
      class="cb-leave"
      title="나가기"
      @click="emit('leave')"
    >
      <MeetingIcon name="hangup" />
      <span class="cb-lbl">나가기</span>
    </button>
  </div>
</template>

<style scoped>
.controlbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  z-index: 30;
}
.controlbar.pos-bottom {
  position: absolute;
  left: 50%;
  bottom: 1.375rem;
  transform: translateX(-50%);
  padding: 0.5625rem;
  background: rgba(22, 25, 31, 0.86);
  border: 1px solid var(--d-border);
  border-radius: 1rem;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.controlbar.pos-top {
  position: absolute;
  right: 1.125rem;
  top: 4.25rem;
  padding: 0.3125rem;
  background: rgba(22, 25, 31, 0.92);
  border: 1px solid var(--d-border);
  border-radius: 0.75rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.cb-btn {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1875rem;
  min-width: 3.75rem;
  height: 3.25rem;
  padding: 0 0.75rem;
  border: none;
  border-radius: 0.6875rem;
  background: transparent;
  color: var(--d-text);
  font-family: inherit;
  cursor: pointer;
}
.cb-btn svg {
  width: 1.3125rem;
  height: 1.3125rem;
}
.cb-lbl {
  font-size: 0.65625rem;
  font-weight: 600;
  color: var(--d-text-2);
}
.cb-btn:hover {
  background: rgba(255, 255, 255, 0.08);
}
.cb-btn.danger-state,
.cb-btn.danger-state .cb-lbl {
  color: var(--d-red);
}
.cb-btn.on {
  background: rgba(79, 70, 229, 0.22);
}
.cb-btn.on .cb-lbl,
.cb-btn.on svg {
  color: var(--d-accent-soft);
}
.cb-btn.soon {
  opacity: 0.5;
  cursor: not-allowed;
}
.cb-soon {
  position: absolute;
  top: 0.25rem;
  right: 0.5rem;
  font-size: 0.5rem;
  font-weight: 700;
  color: var(--d-bg);
  background: var(--d-text-3);
  padding: 1px 0.25rem;
  border-radius: 0.5rem;
}
.cb-badge {
  position: absolute;
  top: 0.1875rem;
  right: 0.4375rem;
  min-width: 1rem;
  height: 1rem;
  padding: 0 0.25rem;
  border-radius: 0.5rem;
  background: #e0364c;
  color: #fff;
  font-size: 0.59375rem;
  font-weight: 700;
  display: grid;
  place-items: center;
  box-shadow: 0 0 0 2px rgba(22, 25, 31, 0.86);
}
.controlbar.pos-top .cb-badge {
  top: -0.1875rem;
  right: -0.125rem;
  box-shadow: 0 0 0 2px var(--d-panel-2);
}
.cb-div {
  width: 1px;
  height: 1.875rem;
  background: var(--d-border);
  margin: 0 0.25rem;
}
.cb-leave {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1875rem;
  min-width: 3.75rem;
  height: 3.25rem;
  padding: 0 0.875rem;
  border: none;
  border-radius: 0.6875rem;
  background: #e0364c;
  color: #fff;
  font-family: inherit;
  cursor: pointer;
}
.cb-leave svg {
  width: 1.375rem;
  height: 1.375rem;
}
.cb-leave .cb-lbl {
  color: #fff;
}
.cb-leave:hover {
  background: #c52a3e;
}
/* 상단 우측 모드: 라벨 숨기고 아이콘만 */
.controlbar.pos-top .cb-lbl {
  display: none;
}
.controlbar.pos-top .cb-btn,
.controlbar.pos-top .cb-leave {
  min-width: 0;
  height: 2.5rem;
  padding: 0 0.75rem;
}
.controlbar.pos-top .cb-soon {
  display: none;
}
.controlbar.pos-top .cb-div {
  height: 1.375rem;
}
</style>
