<script setup lang="ts">
// 진행 상태(대기/진행 중/완료) 선택 드롭다운 — 상태색 테마. 메뉴는 body Teleport(스크롤 클리핑 방지).
import { computed } from 'vue'
import { useDropdownMenu } from '@/composables/useDropdownMenu'
import {
  WORK_STATUS_META as META,
  WORK_STATUS_ORDER as ORDER,
} from '@/shared/constants/workStatus'
import type { ChecklistWorkStatus } from '@/mock/relay.mock'

const props = defineProps<{ modelValue: ChecklistWorkStatus }>()
const emit = defineEmits<{ (e: 'update:modelValue', v: ChecklistWorkStatus): void }>()

const cur = computed(() => META[props.modelValue])

// 메뉴 위치/토글/바깥클릭 닫기 — 공용 훅(우측 정렬, 너비는 CSS 고정)
const { open, triggerRef, menuRef, menuStyle, toggle, close } = useDropdownMenu({
  align: 'right',
  gap: 5,
})

function pick(v: ChecklistWorkStatus): void {
  emit('update:modelValue', v)
  close()
}
</script>

<template>
  <div class="ss">
    <button
      ref="triggerRef"
      type="button"
      class="ss-btn"
      :class="{ open }"
      :style="{ '--c': cur.color, '--w': cur.weak }"
      @click="toggle"
    >
      <span class="ss-dot" />
      <span class="ss-lbl">{{ cur.label }}</span>
      <svg
        class="ss-chev"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2.2"
        stroke-linecap="round"
        stroke-linejoin="round"
      ><path d="m6 9 6 6 6-6" /></svg>
    </button>
    <Teleport to="body">
      <div
        v-if="open"
        ref="menuRef"
        class="ss-menu"
        :style="menuStyle"
      >
        <button
          v-for="k in ORDER"
          :key="k"
          type="button"
          class="ss-opt"
          :class="{ on: k === modelValue }"
          @click="pick(k)"
        >
          <span
            class="ss-dot"
            :style="{ background: META[k].color }"
          />{{ META[k].label }}
          <svg
            v-if="k === modelValue"
            class="ss-check"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2.4"
            stroke-linecap="round"
            stroke-linejoin="round"
          ><path d="M20 6 9 17l-5-5" /></svg>
        </button>
      </div>
    </Teleport>
  </div>
</template>

<style scoped>
.ss {
  position: relative;
  flex-shrink: 0;
}
.ss-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  min-width: 86px;
  padding: 0 8px 0 9px;
  border: 1px solid var(--border-strong);
  border-radius: 7px;
  background: var(--w);
  color: var(--c);
  font-family: inherit;
  font-size: 0.719rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.ss-btn.open {
  border-color: var(--c);
}
.ss-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c);
  flex-shrink: 0;
}
.ss-btn .ss-lbl {
  flex: 1;
  text-align: left;
}
.ss-chev {
  width: 13px;
  height: 13px;
}
.ss-menu {
  position: fixed;
  z-index: 1000;
  width: 9rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 9px;
  box-shadow: 0 8px 24px rgba(20, 24, 33, 0.16);
  padding: 5px;
}
.ss-opt {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  border: none;
  background: none;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-2);
  padding: 8px;
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
}
.ss-opt:hover {
  background: #f4f5f7;
}
.ss-opt.on {
  color: var(--text);
}
.ss-opt .ss-dot {
  width: 9px;
  height: 9px;
}
.ss-opt .ss-check {
  margin-left: auto;
  color: var(--text);
  width: 15px;
  height: 15px;
}
</style>
