<script setup lang="ts">
// 회의실 오른쪽 패널 — 참여자/채팅 탭 전환 컨테이너. 활성 탭은 부모가 제어(컨트롤 바와 연동).
import type { Participant } from 'livekit-client'
import MeetingIcon from './MeetingIcon.vue'
import MeetingPeopleList from './MeetingPeopleList.vue'
import MeetingChat from './MeetingChat.vue'
import type { ChatMessage } from '@/types/meeting'

type Tab = 'people' | 'chat'

interface Props {
  tab: Tab
  participants: Participant[]
  featuredId: string | null
  localId: string | null
  isHost: boolean
  messages: ChatMessage[]
}
defineProps<Props>()
const emit = defineEmits<{
  (e: 'tab', tab: Tab): void
  (e: 'close'): void
  (e: 'promote', identity: string): void
  (e: 'send', text: string): void
}>()
</script>

<template>
  <aside class="ppanel">
    <div class="sp-tabs">
      <button
        type="button"
        class="sp-tab"
        :class="{ on: tab === 'people' }"
        @click="emit('tab', 'people')"
      >
        참여자 <span class="sp-cnt">{{ participants.length }}</span>
      </button>
      <button
        type="button"
        class="sp-tab"
        :class="{ on: tab === 'chat' }"
        @click="emit('tab', 'chat')"
      >
        채팅
      </button>
      <span class="sp-grow" />
      <button
        type="button"
        class="pp-x"
        title="패널 닫기"
        @click="emit('close')"
      >
        <MeetingIcon name="close" />
      </button>
    </div>
    <MeetingChat
      v-if="tab === 'chat'"
      :messages="messages"
      @send="(t) => emit('send', t)"
    />
    <MeetingPeopleList
      v-else
      :participants="participants"
      :featured-id="featuredId"
      :local-id="localId"
      :is-host="isHost"
      @promote="(id) => emit('promote', id)"
    />
  </aside>
</template>

<style scoped>
.ppanel {
  width: 19.5rem;
  flex-shrink: 0;
  border-left: 1px solid var(--d-border);
  background: var(--d-panel);
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.sp-tabs {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5625rem 0.5rem 0.5625rem 0.625rem;
  border-bottom: 1px solid var(--d-border);
}
.sp-tab {
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 0.84375rem;
  font-weight: 600;
  color: var(--d-text-3);
  padding: 0.4375rem 0.75rem;
  border-radius: 0.5rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
}
.sp-tab:hover {
  color: var(--d-text-2);
}
.sp-tab.on {
  color: var(--d-text);
  background: var(--d-panel-2);
}
.sp-cnt {
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--d-text-2);
  background: rgba(255, 255, 255, 0.08);
  padding: 1px 0.4375rem;
  border-radius: 1.25rem;
}
.sp-tab.on .sp-cnt {
  color: var(--d-accent-soft);
  background: rgba(124, 92, 240, 0.22);
}
.sp-grow {
  flex: 1;
}
.pp-x {
  width: 1.875rem;
  height: 1.875rem;
  border: none;
  background: transparent;
  color: var(--d-text-3);
  border-radius: 0.4375rem;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.pp-x svg {
  width: 1rem;
  height: 1rem;
}
.pp-x:hover {
  background: var(--d-panel-2);
  color: var(--d-text);
}
</style>
