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

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

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

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

<template>
  <div :class="['enter-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">
          <circle cx="12" cy="12" r="10"/>
          <line x1="12" y1="8" x2="12" y2="12"/>
          <line x1="12" y1="16" x2="12.01" y2="16"/>
        </svg>
      </span>
      <span class="card-label">EnterPlanMode</span>
      <span v-if="isApproved && !isError" class="status-badge approved">entered</span>
      <span v-else-if="isError" class="status-badge error">error</span>
      <span v-else-if="call.result" class="status-badge denied">denied</span>
    </div>

    <div v-if="call.result" :class="['card-footer', { approved: isApproved && !isError, error: isError }]">
      <span class="result-icon">{{ isError ? '✗' : isApproved ? '→' : '⊘' }}</span>
      <span class="result-text">{{ isApproved ? 'Entered plan mode' : isError ? 'Error' : 'Denied' }}</span>
    </div>
  </div>
</template>

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

.enter-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(251, 191, 36, 0.06);
}

.enter-plan-card.error .card-header {
  background: rgba(239, 68, 68, 0.06);
}

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

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

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

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

.status-badge {
  font-size: 10px;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  font-weight: 500;
  margin-left: auto;
}

.status-badge.approved {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
}

.status-badge.denied {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

.status-badge.error {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

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

.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-text {
  font-weight: 500;
  color: var(--text-muted);
}
</style>
