<script setup lang="ts">
import { ref, computed } from 'vue'
import type { ParsedToolCall } from '@/types/transcript-debug'
import MarkdownContent from '../MarkdownContent.vue'

const props = defineProps<{
  call: ParsedToolCall
}>()

const expanded = ref(false)

const planText = computed(() => {
  if (!props.call.input) return ''
  // ExitPlanMode may have plan in input or allowedPrompts
  return (props.call.input.plan as string) || ''
})

const allowedPrompts = computed(() => {
  const prompts = props.call.input?.allowedPrompts
  if (!Array.isArray(prompts)) return []
  return prompts as Array<{ tool: string; prompt: string }>
})

const isApproved = computed(() => {
  if (!props.call.result?.content) return false
  return props.call.result.content.toLowerCase().includes('approved') ||
         props.call.result.content.toLowerCase().includes('allow')
})

const isError = computed(() => props.call.result?.isError ?? false)
</script>

<template>
  <div :class="['plan-card', { error: isError }]">
    <div class="card-header">
      <span class="card-icon">
        <svg width="14" height="14" 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">ExitPlanMode</span>
      <span v-if="isApproved && !isError" class="approved-badge">approved</span>
      <span v-if="isError" class="error-badge">error</span>
    </div>

    <div v-if="planText" class="card-body">
      <button class="plan-toggle" @click.stop="expanded = !expanded">
        <svg
          :class="['chevron', { rotated: expanded }]"
          width="10" height="10" viewBox="0 0 24 24"
          fill="none" stroke="currentColor" stroke-width="2"
        >
          <polyline points="9 18 15 12 9 6" />
        </svg>
        <span>Plan</span>
        <span class="plan-size">{{ planText.length }} chars</span>
      </button>
      <div v-if="expanded" class="plan-content">
        <MarkdownContent :content="planText" />
      </div>
    </div>

    <!-- Allowed prompts -->
    <div v-if="allowedPrompts.length" class="prompts-section">
      <div class="prompts-title">Allowed Prompts</div>
      <div v-for="(p, i) in allowedPrompts" :key="i" class="prompt-item">
        <code class="prompt-tool">{{ p.tool }}</code>
        <span class="prompt-text">{{ p.prompt }}</span>
      </div>
    </div>

    <!-- Result status -->
    <div v-if="call.result" :class="['card-footer', { error: isError, approved: isApproved && !isError }]">
      <span class="result-icon">{{ isError ? '✗' : isApproved ? '✓' : '⊘' }}</span>
      <span class="result-label">{{ isError ? 'Error' : isApproved ? 'Plan Approved' : 'Rejected' }}</span>
    </div>
  </div>
</template>

<style scoped>
.plan-card {
  border: 1px solid rgba(139, 92, 246, 0.25);
  border-left: 3px solid #8b5cf6;
  border-radius: 8px;
  overflow: hidden;
  margin: 0.5rem 0;
  background: var(--bg-primary);
}

.plan-card.error {
  border-color: rgba(239, 68, 68, 0.25);
  border-left-color: #ef4444;
}

.card-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.75rem;
  background: rgba(139, 92, 246, 0.06);
  border-bottom: 1px solid rgba(139, 92, 246, 0.12);
}

.plan-card.error .card-header {
  background: rgba(239, 68, 68, 0.06);
  border-bottom-color: rgba(239, 68, 68, 0.12);
}

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

.plan-card.error .card-icon {
  color: #ef4444;
}

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

.plan-card.error .card-label {
  color: #ef4444;
}

.approved-badge {
  font-size: 10px;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
  font-weight: 500;
}

.error-badge {
  font-size: 10px;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
  font-weight: 500;
}

.card-body {
  border-bottom: 1px solid var(--border-color);
}

.plan-toggle {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  padding: 0.35rem 0.75rem;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 11px;
  text-align: left;
}

.plan-toggle:hover {
  background: var(--bg-hover);
}

.plan-size {
  margin-left: auto;
  color: var(--text-muted);
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 10px;
}

.chevron {
  transition: transform 0.2s;
  flex-shrink: 0;
}

.chevron.rotated {
  transform: rotate(90deg);
}

.plan-content {
  padding: 0.6rem 0.75rem;
  max-height: 300px;
  overflow-y: auto;
  border-top: 1px solid var(--border-color);
  background: var(--bg-primary);
}

.prompts-section {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--border-color);
}

.prompts-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 0.3rem;
}

.prompt-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.2rem 0;
  font-size: 11px;
}

.prompt-tool {
  font-size: 10px;
  padding: 0.1rem 0.3rem;
  border-radius: 3px;
  background: rgba(139, 92, 246, 0.1);
  color: #8b5cf6;
  font-family: 'SF Mono', 'Fira Code', monospace;
  white-space: nowrap;
}

.prompt-text {
  color: var(--text-secondary);
}

.card-footer {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.75rem;
  font-size: 11px;
  background: rgba(239, 68, 68, 0.04);
  border-top: 1px solid var(--border-color);
}

.card-footer.approved {
  background: rgba(34, 197, 94, 0.04);
}

.card-footer.error {
  background: rgba(239, 68, 68, 0.04);
}

.result-icon {
  font-weight: 600;
  color: var(--text-muted);
}

.card-footer.approved .result-icon {
  color: #22c55e;
}

.card-footer.error .result-icon {
  color: #ef4444;
}

.result-label {
  font-weight: 500;
  color: var(--text-muted);
}
</style>
