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

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

const emit = defineEmits<{
  respond: [requestId: string, decision: 'approve' | 'reject' | 'edit', reason?: string]
}>()

const showEditor = ref(false)
const editReason = ref('')

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`
}

onMounted(ensureStyles)

function handleEdit() {
  if (!showEditor.value) {
    showEditor.value = true
    return
  }
  emit('respond', props.request.requestId, 'edit', editReason.value)
}
</script>

<template>
  <div class="plan-card">
    <div class="card-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="request.lastAssistantText" class="plan-text">
        <MarkdownContent :content="request.lastAssistantText" />
      </div>
      <div v-else class="plan-empty">
        Claude is waiting for plan approval
      </div>

      <Transition name="expand">
        <div v-if="showEditor" class="edit-section">
          <textarea
            v-model="editReason"
            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, 'approve')">
        <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="handleEdit">
        <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>
        {{ showEditor ? 'Send' : 'Edit & Continue' }}
      </button>
      <button class="btn btn-reject" @click="emit('respond', request.requestId, 'reject')">
        <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>
    </div>
  </div>
</template>

<style scoped>
.plan-card {
  border: 1px solid var(--border-color);
  border-left: 3px solid #8b5cf6;
  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;
  background: rgba(139, 92, 246, 0.06);
  border-bottom: 1px solid var(--border-color);
}

.card-icon {
  color: #8b5cf6;
  display: flex;
  align-items: center;
}

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

.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;
}

.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;
}

.edit-section {
  margin-top: 0.5rem;
}

.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: #8b5cf6;
}

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

.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-approve {
  background: #22c55e;
  color: white;
}

.btn-approve:hover {
  background: #16a34a;
}

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

.btn-edit:hover {
  background: #7c3aed;
}

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

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

/* ── Expand transition ── */
.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>
