<script setup lang="ts">
// 우측 슬라이드 상세 패널 — 선택 일정의 시간/장소/참석자/메모 + 수정·삭제
import { computed, ref, watch } from 'vue'
import AvatarStack from '@/components/common/AvatarStack.vue'
import { eventDateText, spanDays } from '@/shared/utils/scheduleDate'
import type { ApiScheduleCategory, ApiScheduleEvent } from '@/types/schedule'

const props = defineProps<{
  event: ApiScheduleEvent | null
  category: ApiScheduleCategory | null
}>()
const emit = defineEmits<{
  (e: 'close'): void
  (e: 'edit', ev: ApiScheduleEvent): void
  (e: 'delete', ev: ApiScheduleEvent): void
}>()

// 닫히는 애니메이션 동안 직전 내용 유지
const shown = ref<ApiScheduleEvent | null>(props.event)
watch(
  () => props.event,
  (v) => {
    if (v) shown.value = v
  },
)
const open = computed(() => !!props.event)
const ev = computed(() => props.event ?? shown.value)
const multi = computed(() => (ev.value ? ev.value.start !== ev.value.end : false))
const dateText = computed(() =>
  ev.value ? eventDateText(ev.value.start, ev.value.end) : '',
)
const dur = computed(() =>
  ev.value && multi.value ? spanDays(ev.value.start, ev.value.end) : 0,
)

const attendees = computed(() => ev.value?.attendees ?? [])
</script>

<template>
  <aside
    class="detail"
    :class="{ open }"
  >
    <template v-if="ev">
      <div class="dt-head">
        <div class="dt-top">
          <span
            v-if="category"
            class="type-chip"
            :style="{
              background: `color-mix(in srgb, ${category.color} 13%, #fff)`,
              color: category.color,
            }"
          >{{ category.label }}</span>
          <span v-else />
          <button
            class="dt-close"
            @click="emit('close')"
          >
            <svg
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2.2"
              stroke-linecap="round"
            ><path d="M18 6 6 18M6 6l12 12" /></svg>
          </button>
        </div>
        <h2>{{ ev.title }}</h2>
        <div class="dt-date">
          <svg
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
          ><rect
            x="3"
            y="4"
            width="18"
            height="18"
            rx="2"
          /><path d="M16 2v4M8 2v4M3 10h18" /></svg>
          {{ dateText }}
          <span
            v-if="multi"
            class="dt-dur"
          >{{ dur }}일간</span>
        </div>
      </div>

      <div class="dt-body">
        <div class="dt-list">
          <div class="dt-item">
            <span class="dt-k">시간</span>
            <span class="dt-v">{{ ev.time || '—' }}</span>
          </div>
          <div
            v-if="ev.place && ev.place !== '—'"
            class="dt-item"
          >
            <span class="dt-k">장소</span>
            <span class="dt-v">{{ ev.place }}</span>
          </div>
          <div class="dt-item">
            <span class="dt-k">참석자</span>
            <span class="dt-v">
              <template v-if="ev.allHands">전 직원 대상</template>
              <AvatarStack
                v-else-if="attendees.length > 0"
                :people="attendees"
              />
              <template v-else>참석자 없음</template>
            </span>
          </div>
          <div
            v-if="ev.description"
            class="dt-item"
          >
            <span class="dt-k">메모</span>
            <span class="dt-v dt-v-memo">{{ ev.description }}</span>
          </div>
        </div>
      </div>

      <div class="dt-foot">
        <div class="dt-actions">
          <button
            class="btn"
            @click="emit('edit', ev)"
          >
            <svg
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
            ><path d="M12 20h9M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z" /></svg>일정 수정
          </button>
          <button
            class="btn danger icon-only"
            title="삭제"
            @click="emit('delete', ev)"
          >
            <svg
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
            ><path d="M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2m2 0v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" /><path d="M10 11v6M14 11v6" /></svg>
          </button>
        </div>
      </div>
    </template>
  </aside>
</template>

<style scoped>
.detail {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 22.5rem;
  z-index: 30;
  border-left: 1px solid var(--border);
  background: var(--panel);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-md);
  transform: translateX(100%);
  transition: transform 0.26s cubic-bezier(0.32, 0.72, 0, 1);
}
.detail.open {
  transform: translateX(0);
}
.type-chip {
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 0.125rem 0.5625rem;
  border-radius: 0.375rem;
  white-space: nowrap;
  line-height: 1.6;
}
.dt-head {
  padding: 1.25rem 1.375rem 1.125rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.dt-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.dt-close {
  width: 1.875rem;
  height: 1.875rem;
  border-radius: var(--radius-sm);
  border: none;
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
  display: grid;
  place-items: center;
  margin-right: -0.375rem;
}
.dt-close:hover {
  background: #f1f2f4;
  color: var(--text);
}
.dt-close svg {
  width: 1.0625rem;
  height: 1.0625rem;
}
.dt-head h2 {
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.0187rem;
  line-height: 1.4;
  margin: 0.8125rem 0 0.5rem;
  word-break: keep-all;
}
.dt-date {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-2);
}
.dt-date svg {
  width: 0.9375rem;
  height: 0.9375rem;
  color: var(--text-3);
}
.dt-dur {
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-weak);
  border-radius: 0.3125rem;
  padding: 0.0625rem 0.4375rem;
  white-space: nowrap;
}
.dt-body {
  padding: 1.125rem 1.375rem 1.5rem;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
.dt-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.dt-item {
  display: flex;
  gap: 0.875rem;
  align-items: flex-start;
}
.dt-k {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-3);
  width: 3.25rem;
  flex-shrink: 0;
  padding-top: 0.125rem;
}
.dt-v {
  flex: 1;
  min-width: 0;
  font-size: 0.8438rem;
  font-weight: 500;
  color: var(--text);
  word-break: keep-all;
}
.dt-v-memo {
  font-weight: 400;
  color: var(--text-2);
  line-height: 1.7;
  white-space: pre-wrap;
}
.dt-foot {
  flex-shrink: 0;
  padding: 0.875rem 1.375rem;
  border-top: 1px solid var(--border);
  background: var(--panel);
}
.dt-actions {
  display: flex;
  gap: 0.5rem;
}
.dt-actions .btn {
  flex: 1;
  justify-content: center;
  height: 2.25rem;
}
.dt-actions .btn.icon-only {
  flex: 0 0 auto;
  padding: 0;
  width: 2.25rem;
}
.btn {
  border-radius: var(--radius);
  font-size: 0.8438rem;
  font-weight: 600;
  border: 1px solid var(--border-strong);
  background: var(--panel);
  color: var(--text-2);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  line-height: 1;
  white-space: nowrap;
}
.btn:hover {
  background: #f7f8fa;
  color: var(--text);
}
.btn svg {
  width: 0.9375rem;
  height: 0.9375rem;
}
.btn.danger {
  background: #fff;
  border-color: #f1c9c9;
  color: #dc2626;
}
.btn.danger:hover {
  background: #fdeaea;
  border-color: #ec9d9d;
  color: #b91c1c;
}
</style>
