<script setup lang="ts">
import { ref } from 'vue'
import KsDialog from '../ui/components/KsDialog.vue'
import type { WorkspaceTab } from './workspaceStore'

const props = defineProps<{ tabs: WorkspaceTab[]; overflowCount?: number; activeKey?: string | null }>()
const emit = defineEmits<{ select: [tab: WorkspaceTab]; close: [tab: WorkspaceTab]; togglePin: [tab: WorkspaceTab] }>()

const pendingClose = ref<WorkspaceTab | null>(null)

function requestClose(tab: WorkspaceTab) {
  if (tab.dirty) pendingClose.value = tab
  else emit('close', tab)
}
function confirmDiscard() {
  if (pendingClose.value) emit('close', pendingClose.value)
  pendingClose.value = null
}
function cancelClose() {
  pendingClose.value = null
}
function keyOf(tab: WorkspaceTab): string {
  return `${tab.screenId}:${tab.path}`
}
</script>

<template>
  <nav class="ks-workspace-tabs" :class="{ 'ks-workspace-tabs--empty': !props.tabs.length }" aria-label="열린 업무">
    <div
      v-for="tab in props.tabs"
      :key="keyOf(tab)"
      class="ks-workspace-tabs__tab"
      :class="{ active: keyOf(tab) === props.activeKey }"
    >
      <button type="button" class="select" @click="emit('select', tab)">
        <span v-if="tab.dirty" class="dot" aria-hidden="true">●</span>
        <span class="title">{{ tab.title }}</span>
      </button>
      <button type="button" class="pin" :aria-pressed="tab.pinned" :aria-label="tab.pinned ? '고정 해제' : '탭 고정'" @click="emit('togglePin', tab)">{{ tab.pinned ? '📌' : '📍' }}</button>
      <button type="button" class="close" aria-label="탭 닫기" @click="requestClose(tab)">×</button>
    </div>
    <span v-if="(props.overflowCount ?? 0) > 0" class="ks-workspace-tabs__overflow">더보기 {{ props.overflowCount }}</span>

    <KsDialog :visible="Boolean(pendingClose)" title="저장하지 않은 변경사항" modal closable @update:visible="value => { if (!value) cancelClose() }">
      <p>저장하지 않은 변경사항이 있습니다. 계속 진행하면 변경 내용이 사라집니다.</p>
      <template #footer>
        <button type="button" @click="cancelClose">계속 편집</button>
        <button type="button" @click="confirmDiscard">변경 버리기</button>
      </template>
    </KsDialog>
  </nav>
</template>

<style scoped>
.ks-workspace-tabs { height: var(--ks-shell-tabs-height); display: flex; align-items: stretch; gap: 1px; padding: 0 var(--ks-space-2); border-bottom: 1px solid var(--ks-color-border); background: var(--ks-color-surface); overflow-x: auto; }
.ks-workspace-tabs--empty { height: 0; padding: 0; border-bottom: 0; overflow: hidden; }
.ks-workspace-tabs__tab { display: flex; align-items: center; gap: var(--ks-space-1); padding: 0 var(--ks-space-1); border-bottom: 2px solid transparent; color: var(--ks-color-text-muted); font-size: var(--ks-font-caption); white-space: nowrap; }
.ks-workspace-tabs__tab.active { color: var(--ks-color-text); border-bottom-color: var(--ks-color-action); font-weight: 600; }
.ks-workspace-tabs__tab .select { display: flex; align-items: center; gap: var(--ks-space-1); border: 0; background: transparent; color: inherit; font: inherit; padding: 0 var(--ks-space-1); cursor: pointer; }
.ks-workspace-tabs__tab .dot { color: var(--ks-color-warning); }
.ks-workspace-tabs__tab .pin, .ks-workspace-tabs__tab .close { border: 0; background: transparent; color: inherit; padding: 0 var(--ks-space-1); cursor: pointer; }
.ks-workspace-tabs__overflow { align-self: center; padding: 0 var(--ks-space-2); color: var(--ks-color-text-muted); font-size: var(--ks-font-caption); }
</style>
