<script setup lang="ts">
import { watch } from 'vue'
import { useGlobalApproval } from '@/composables/useGlobalApproval'
import PermissionApproval from './transcript-debug/PermissionApproval.vue'
import PlanApproval from './transcript-debug/PlanApproval.vue'

const {
  totalPending,
  groupedBySession,
  modalVisible,
  respondPermission,
  respondPlan,
  ignoreApproval
} = useGlobalApproval()

function truncateId(id: string): string {
  if (id.length <= 12) return id
  return id.slice(0, 6) + '...' + id.slice(-4)
}

// Auto-hide after 1s when empty
let autoHideTimer: ReturnType<typeof setTimeout> | null = null

watch(totalPending, (val) => {
  if (autoHideTimer) {
    clearTimeout(autoHideTimer)
    autoHideTimer = null
  }
  if (val === 0 && modalVisible.value) {
    autoHideTimer = setTimeout(() => {
      modalVisible.value = false
    }, 1000)
  }
})
</script>

<template>
  <Teleport to="body">
    <Transition name="approval-modal">
      <div v-if="modalVisible" class="approval-backdrop" @click.self="modalVisible = false">
        <div class="approval-panel">
          <div class="panel-header">
            <span class="panel-title">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
              </svg>
              Hooks Approval
            </span>
            <span v-if="totalPending > 0" class="panel-count">{{ totalPending }}</span>
            <button class="panel-close" @click="modalVisible = false" title="Minimize">
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <line x1="5" y1="12" x2="19" y2="12"/>
              </svg>
            </button>
          </div>

          <div class="panel-body">
            <template v-if="groupedBySession.length > 0">
              <div v-for="group in groupedBySession" :key="group.sessionId" class="session-group">
                <div class="session-header">
                  <span class="session-agent">{{ group.agent }}</span>
                  <span class="session-sep">/</span>
                  <span class="session-id" :title="group.sessionId">{{ truncateId(group.sessionId) }}</span>
                  <span class="session-count">{{ group.permissions.length + group.plans.length }}</span>
                </div>

                <PermissionApproval
                  v-for="perm in group.permissions"
                  :key="perm.requestId"
                  :request="perm"
                  @respond="(id, decision, reason) => respondPermission(id, decision, reason)"
                  @ignore="(id) => ignoreApproval(id)"
                />
                <PlanApproval
                  v-for="plan in group.plans"
                  :key="plan.requestId"
                  :request="plan"
                  @respond="(id, decision, reason) => respondPlan(id, decision, reason)"
                />
              </div>
            </template>

            <div v-else class="empty-state">
              <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" opacity="0.4">
                <polyline points="20 6 9 17 4 12"/>
              </svg>
              <span>No pending approvals</span>
            </div>
          </div>
        </div>
      </div>
    </Transition>
  </Teleport>
</template>

<style scoped>
.approval-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(4px);
  z-index: 10012;
  display: flex;
  align-items: center;
  justify-content: center;
}

.approval-panel {
  width: 90%;
  max-width: 600px;
  max-height: 80vh;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.panel-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
}

.panel-title {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.panel-title svg {
  color: #f59e0b;
}

.panel-count {
  background: #ef4444;
  color: white;
  font-size: 11px;
  font-weight: 700;
  padding: 0.1rem 0.45rem;
  border-radius: 10px;
  min-width: 18px;
  text-align: center;
  line-height: 1.3;
}

.panel-close {
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  border-radius: 4px;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s;
}

.panel-close:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.session-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.session-header {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0;
}

.session-agent {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent, #6366f1);
}

.session-sep {
  font-size: 11px;
  color: var(--text-muted);
  opacity: 0.4;
}

.session-id {
  font-size: 11px;
  color: var(--text-muted);
  font-family: 'SF Mono', 'Fira Code', monospace;
}

.session-count {
  margin-left: auto;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--bg-hover);
  padding: 0.1rem 0.4rem;
  border-radius: 8px;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 2rem;
  color: var(--text-muted);
  font-size: 13px;
}

/* Modal transition */
.approval-modal-enter-active,
.approval-modal-leave-active {
  transition: opacity 0.2s ease;
}

.approval-modal-enter-active .approval-panel,
.approval-modal-leave-active .approval-panel {
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease;
}

.approval-modal-enter-from,
.approval-modal-leave-to {
  opacity: 0;
}

.approval-modal-enter-from .approval-panel {
  transform: scale(0.95);
  opacity: 0;
}

.approval-modal-leave-to .approval-panel {
  transform: scale(0.95);
  opacity: 0;
}
</style>
