<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import type { HooksApprovalPermissionRequest } from '@/types/hooks-approval'
import MarkdownContent from './MarkdownContent.vue'
import { ensureStyles } from '@/utils/markdown'

const props = defineProps<{
  request: HooksApprovalPermissionRequest
}>()

const emit = defineEmits<{
  respond: [requestId: string, decision: string, reason?: string]
  ignore: [requestId: string]
}>()

// ── Mode detection ──
type CardMode = 'permission' | 'plan' | 'question'

const mode = computed<CardMode>(() => {
  if (props.request.tool_name === 'ExitPlanMode') return 'plan'
  if (props.request.tool_name === 'AskUserQuestion') return 'question'
  return 'permission'
})

const input = computed(() => {
  if (!props.request.tool_input) return null
  return props.request.tool_input as Record<string, unknown>
})

// ── Plan mode ──
const planText = computed(() => {
  if (mode.value !== 'plan' || !input.value) return ''
  return (input.value.plan as string) || ''
})

const showPlanEditor = ref(false)
const planEditText = ref('')

function handlePlanEdit() {
  if (!showPlanEditor.value) {
    showPlanEditor.value = true
    return
  }
  emit('respond', props.request.requestId, 'deny', planEditText.value || 'Continue with modifications.')
}

// ── Question mode ──
interface QuestionOption {
  label: string
  description?: string
}

interface QuestionItem {
  question: string
  header?: string
  options?: QuestionOption[]
  multiSelect?: boolean
}

const questions = computed<QuestionItem[]>(() => {
  if (mode.value !== 'question' || !input.value) return []
  const qs = input.value.questions
  if (Array.isArray(qs)) return qs as QuestionItem[]
  return []
})

// Track selected options per question (keyed by question text)
const selectedAnswers = ref<Record<string, Set<string>>>({})
const customAnswers = ref<Record<string, string>>({})
const showCustom = ref<Record<string, boolean>>({})

function toggleOption(questionText: string, label: string, multiSelect?: boolean) {
  if (!selectedAnswers.value[questionText]) {
    selectedAnswers.value[questionText] = new Set()
  }
  const set = selectedAnswers.value[questionText]
  if (multiSelect) {
    if (set.has(label)) set.delete(label)
    else set.add(label)
  } else {
    if (set.has(label)) set.clear()
    else { set.clear(); set.add(label) }
  }
  // Trigger reactivity
  selectedAnswers.value = { ...selectedAnswers.value }
}

function toggleCustom(questionText: string) {
  showCustom.value = { ...showCustom.value, [questionText]: !showCustom.value[questionText] }
}

function submitAnswers() {
  // Build answers object: { "question text": "selected label" }
  const answers: Record<string, string> = {}
  for (const q of questions.value) {
    const selected = selectedAnswers.value[q.question]
    const custom = customAnswers.value[q.question]
    if (custom?.trim()) {
      answers[q.question] = custom.trim()
    } else if (selected?.size) {
      answers[q.question] = Array.from(selected).join(', ')
    }
  }
  // Deny the tool (so Claude gets the answer as the deny message)
  // The answer goes as a structured JSON string
  const answerText = JSON.stringify({ answers })
  emit('respond', props.request.requestId, 'deny', answerText)
}

function allowQuestion() {
  // Let AskUserQuestion run normally (shows in terminal)
  emit('respond', props.request.requestId, 'allow')
}

// ── Permission mode ──
const showFreeResponse = ref(false)
const freeText = ref('')

function handleFreeResponse() {
  if (!showFreeResponse.value) {
    showFreeResponse.value = true
    return
  }
  if (freeText.value.trim()) {
    emit('respond', props.request.requestId, 'deny', freeText.value.trim())
  }
}

onMounted(ensureStyles)

// ── Common ──
function formatInput(inp: unknown): string {
  if (!inp) return ''
  if (typeof inp === 'string') return inp
  try {
    return JSON.stringify(inp, null, 2)
  } catch {
    return String(inp)
  }
}

function elapsed(): string {
  const ms = Date.now() - props.request.timestamp
  const s = Math.floor(ms / 1000)
  if (s < 60) return `${s}s ago`
  return `${Math.floor(s / 60)}m ${s % 60}s ago`
}
</script>

<template>
  <!-- ═══════ PLAN MODE (ExitPlanMode) ═══════ -->
  <div v-if="mode === 'plan'" class="card plan-card">
    <div class="card-header plan-header">
      <span class="card-icon">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
          <polyline points="14 2 14 8 20 8"/>
          <line x1="16" y1="13" x2="8" y2="13"/>
          <line x1="16" y1="17" x2="8" y2="17"/>
        </svg>
      </span>
      <span class="card-label">Plan Approval</span>
      <span class="card-elapsed">{{ elapsed() }}</span>
    </div>
    <div class="card-body">
      <div v-if="planText" class="plan-text">
        <MarkdownContent :content="planText" />
      </div>
      <div v-else class="plan-empty">Claude is waiting for plan approval</div>
      <Transition name="expand">
        <div v-if="showPlanEditor" class="edit-section">
          <textarea v-model="planEditText" class="edit-textarea" placeholder="Add instructions or feedback..." rows="3"></textarea>
        </div>
      </Transition>
    </div>
    <div class="card-actions">
      <button class="btn btn-approve" @click="emit('respond', request.requestId, 'allow')">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>
        Approve
      </button>
      <button class="btn btn-edit" @click="handlePlanEdit">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/>
          <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>
        </svg>
        {{ showPlanEditor ? 'Send' : 'Edit & Continue' }}
      </button>
      <button class="btn btn-reject" @click="emit('respond', request.requestId, 'deny')">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
          <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
        </svg>
        Reject
      </button>
      <button class="btn btn-ignore" @click="emit('ignore', request.requestId)" title="Remove from UI without responding">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94"/>
          <path d="M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19"/>
          <line x1="1" y1="1" x2="23" y2="23"/>
        </svg>
        Ignore
      </button>
    </div>
  </div>

  <!-- ═══════ QUESTION MODE (AskUserQuestion) ═══════ -->
  <div v-else-if="mode === 'question'" class="card question-card">
    <div class="card-header question-header">
      <span class="card-icon">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <circle cx="12" cy="12" r="10"/>
          <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/>
          <line x1="12" y1="17" x2="12.01" y2="17"/>
        </svg>
      </span>
      <span class="card-label">Question</span>
      <span class="card-elapsed">{{ elapsed() }}</span>
    </div>
    <div class="card-body">
      <div v-for="(q, qi) in questions" :key="qi" class="question-block">
        <div class="question-text">
          <span v-if="q.header" class="question-tag">{{ q.header }}</span>
          {{ q.question }}
          <span v-if="q.multiSelect" class="multi-hint">(multiple)</span>
        </div>
        <div v-if="q.options?.length" class="options-grid">
          <button
            v-for="opt in q.options"
            :key="opt.label"
            :class="['option-btn', { selected: selectedAnswers[q.question]?.has(opt.label) }]"
            @click="toggleOption(q.question, opt.label, q.multiSelect)"
          >
            <span class="option-label">{{ opt.label }}</span>
            <span v-if="opt.description" class="option-desc">{{ opt.description }}</span>
          </button>
          <button :class="['option-btn other', { selected: showCustom[q.question] }]" @click="toggleCustom(q.question)">
            <span class="option-label">Other</span>
          </button>
        </div>
        <Transition name="expand">
          <div v-if="showCustom[q.question] || !q.options?.length" class="custom-input">
            <textarea
              v-model="customAnswers[q.question]"
              class="edit-textarea"
              :placeholder="q.options?.length ? 'Custom answer...' : 'Type your answer...'"
              rows="2"
            ></textarea>
          </div>
        </Transition>
      </div>
    </div>
    <div class="card-actions">
      <button class="btn btn-approve" @click="submitAnswers">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/>
        </svg>
        Answer
      </button>
      <button class="btn btn-allow-terminal" @click="allowQuestion">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <polyline points="4 17 10 11 4 5"/><line x1="12" y1="19" x2="20" y2="19"/>
        </svg>
        Ask in Terminal
      </button>
      <button class="btn btn-reject" @click="emit('respond', request.requestId, 'deny')">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
          <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
        </svg>
        Dismiss
      </button>
      <button class="btn btn-ignore" @click="emit('ignore', request.requestId)" title="Remove from UI without responding">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94"/>
          <path d="M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19"/>
          <line x1="1" y1="1" x2="23" y2="23"/>
        </svg>
        Ignore
      </button>
    </div>
  </div>

  <!-- ═══════ PERMISSION MODE (generic) ═══════ -->
  <div v-else class="card permission-card">
    <div class="card-header perm-header">
      <span class="card-icon">
        <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>
      </span>
      <span class="card-label">Permission Request</span>
      <span class="card-elapsed">{{ elapsed() }}</span>
    </div>
    <div class="card-body">
      <div class="info-row" v-if="request.tool_name">
        <span class="info-label">Tool</span>
        <code class="info-value tool-name">{{ request.tool_name }}</code>
      </div>
      <div class="info-row" v-if="request.agent_name">
        <span class="info-label">Agent</span>
        <span class="info-value">{{ request.agent_name }}</span>
      </div>
      <div v-if="request.tool_input" class="input-block">
        <span class="info-label">Input</span>
        <pre class="input-pre">{{ formatInput(request.tool_input) }}</pre>
      </div>
      <Transition name="expand">
        <div v-if="showFreeResponse" class="edit-section">
          <textarea v-model="freeText" class="edit-textarea" placeholder="Deny with a custom message..." rows="2"></textarea>
        </div>
      </Transition>
    </div>
    <div class="card-actions">
      <button class="btn btn-allow" @click="emit('respond', request.requestId, 'allow')">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>
        Allow
      </button>
      <button class="btn btn-allow-always" @click="emit('respond', request.requestId, 'allowAlways')">
        <svg width="14" height="14" 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"/>
          <polyline points="9 12 11 14 15 10"/>
        </svg>
        Always
      </button>
      <button class="btn btn-free" @click="handleFreeResponse">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/>
          <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>
        </svg>
        {{ showFreeResponse ? 'Send' : 'Message' }}
      </button>
      <button class="btn btn-deny" @click="emit('respond', request.requestId, 'deny')">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
          <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
        </svg>
        Deny
      </button>
      <button class="btn btn-ignore" @click="emit('ignore', request.requestId)" title="Remove from UI without responding">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94"/>
          <path d="M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19"/>
          <line x1="1" y1="1" x2="23" y2="23"/>
        </svg>
        Ignore
      </button>
    </div>
  </div>
</template>

<style scoped>
/* ── Shared card base ── */
.card {
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--bg-secondary);
  overflow: hidden;
  animation: slideIn 0.2s ease-out;
}

.card-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--border-color);
}

.card-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.card-icon { display: flex; align-items: center; }
.card-elapsed {
  margin-left: auto;
  font-size: 11px;
  color: var(--text-muted);
  font-family: 'SF Mono', 'Fira Code', monospace;
}

.card-body {
  padding: 0.6rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.card-actions {
  display: flex;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-top: 1px solid var(--border-color);
  flex-wrap: wrap;
}

/* ── Permission (yellow) ── */
.permission-card { border-left: 3px solid #f59e0b; }
.perm-header { background: rgba(245, 158, 11, 0.06); }
.perm-header .card-icon, .perm-header .card-label { color: #f59e0b; }

/* ── Plan (purple) ── */
.plan-card { border-left: 3px solid #8b5cf6; }
.plan-header { background: rgba(139, 92, 246, 0.06); }
.plan-header .card-icon, .plan-header .card-label { color: #8b5cf6; }

/* ── Question (blue) ── */
.question-card { border-left: 3px solid #0ea5e9; }
.question-header { background: rgba(14, 165, 233, 0.06); }
.question-header .card-icon, .question-header .card-label { color: #0ea5e9; }

/* ── Info rows (permission) ── */
.info-row { display: flex; align-items: center; gap: 0.5rem; }
.info-label { font-size: 11px; color: var(--text-muted); font-weight: 500; min-width: 40px; flex-shrink: 0; }
.info-value { font-size: 13px; color: var(--text-primary); }
.tool-name {
  background: rgba(99, 102, 241, 0.1);
  color: var(--accent, #6366f1);
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  font-size: 12px;
  font-family: 'SF Mono', 'Fira Code', monospace;
}

.input-block { display: flex; flex-direction: column; gap: 0.25rem; }
.input-pre {
  margin: 0;
  padding: 0.5rem;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  font-size: 11px;
  font-family: 'SF Mono', 'Fira Code', monospace;
  color: var(--text-secondary);
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 150px;
  overflow-y: auto;
}

/* ── Plan body ── */
.plan-text {
  max-height: 300px;
  overflow-y: auto;
  padding: 0.5rem;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
}
.plan-empty { font-size: 13px; color: var(--text-muted); font-style: italic; padding: 0.5rem 0; }

/* ── Question body ── */
.question-block { display: flex; flex-direction: column; gap: 0.5rem; }
.question-block + .question-block { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--border-color); }
.question-text { font-size: 13px; color: var(--text-primary); font-weight: 500; line-height: 1.4; }
.question-tag {
  display: inline-block;
  background: rgba(14, 165, 233, 0.12);
  color: #0ea5e9;
  font-size: 10px;
  font-weight: 600;
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  margin-right: 0.3rem;
  vertical-align: middle;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.multi-hint { font-size: 11px; color: var(--text-muted); font-weight: 400; }

.options-grid { display: flex; flex-direction: column; gap: 0.35rem; }
.option-btn {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.5rem 0.65rem;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
  transition: all 0.15s;
}
.option-btn:hover { border-color: #0ea5e9; background: rgba(14, 165, 233, 0.04); }
.option-btn.selected { border-color: #0ea5e9; background: rgba(14, 165, 233, 0.1); }
.option-btn.other { border-style: dashed; }
.option-label { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.option-desc { font-size: 11px; color: var(--text-muted); line-height: 1.3; }

.custom-input { margin-top: 0.25rem; }

/* ── Shared edit/textarea ── */
.edit-section { margin-top: 0.25rem; }
.edit-textarea {
  width: 100%;
  padding: 0.5rem;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  color: var(--text-primary);
  font-size: 12px;
  font-family: 'SF Mono', 'Fira Code', monospace;
  resize: vertical;
  outline: none;
  box-sizing: border-box;
}
.edit-textarea:focus { border-color: var(--accent, #6366f1); }

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.75rem;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  transition: all 0.15s;
}

.btn-allow { background: #22c55e; color: white; }
.btn-allow:hover { background: #16a34a; }

.btn-allow-always { background: #0ea5e9; color: white; }
.btn-allow-always:hover { background: #0284c7; }

.btn-allow-terminal { background: #64748b; color: white; }
.btn-allow-terminal:hover { background: #475569; }

.btn-approve { background: #22c55e; color: white; }
.btn-approve:hover { background: #16a34a; }

.btn-edit { background: #8b5cf6; color: white; }
.btn-edit:hover { background: #7c3aed; }

.btn-free { background: #8b5cf6; color: white; }
.btn-free:hover { background: #7c3aed; }

.btn-deny { background: #ef4444; color: white; }
.btn-deny:hover { background: #dc2626; }

.btn-reject { background: #ef4444; color: white; }
.btn-reject:hover { background: #dc2626; }

.btn-ignore { background: transparent; color: var(--text-muted); border: 1px solid var(--border-color); }
.btn-ignore:hover { background: var(--bg-hover); color: var(--text-secondary); }

/* ── Transitions ── */
.expand-enter-active, .expand-leave-active { transition: all 0.2s ease; overflow: hidden; }
.expand-enter-from, .expand-leave-to { opacity: 0; max-height: 0; }
.expand-enter-to, .expand-leave-from { max-height: 200px; }

@keyframes slideIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
</style>
