<template>
  <div v-if="apiCall" class="mt-6 border-t border-gray-600 bg-gray-800 rounded-lg p-4 text-sm shadow-lg">
    <div class="flex items-center justify-between mb-2">
      <h3 class="text-lg font-bold text-blue-400 flex items-center gap-2">
        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
        </svg>
        API 呼叫示範 (Real-time)
      </h3>
      <div class="flex items-center gap-2">
        <button 
          @click="copyToClipboard" 
          class="px-2 py-1 bg-gray-700 hover:bg-gray-600 text-gray-300 text-xs rounded border border-gray-600 transition flex items-center gap-1"
        >
          <svg v-if="!isCopied" class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"></path></svg>
          <svg v-else class="w-3 h-3 text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
          {{ isCopied ? '已複製' : 'Copy Text' }}
        </button>
        <span class="px-2 py-0.5 rounded text-xs font-mono" :class="statusColor">
          {{ apiCall.status }}
        </span>
      </div>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
      <!-- Request -->
      <div class="bg-gray-900 p-3 rounded border border-gray-700">
        <div class="text-gray-400 mb-1 text-xs uppercase tracking-wider">Request ({{ apiCall.type }})</div>
        <div class="text-white font-mono break-all">
          <span v-if="apiCall.type === 'HTTP'" class="text-green-400">{{ apiCall.method }}</span>
          <span v-if="apiCall.type === 'HTTP'" class="text-gray-500 mx-1">→</span>
          <span v-if="apiCall.type === 'HTTP'" class="text-blue-300">{{ apiCall.url }}</span>
          <span v-if="apiCall.type === 'TAURI'" class="text-green-400">Command:</span>
          <span v-if="apiCall.type === 'TAURI'" class="text-blue-300 ml-1">{{ apiCall.command }}</span>
        </div>
        <div v-if="apiCall.body" class="mt-2 text-xs text-gray-300 font-mono bg-gray-800 p-2 rounded overflow-x-auto">
          Body: {{ JSON.stringify(apiCall.body, null, 2) }}
        </div>
        <div v-if="apiCall.args && apiCall.type === 'TAURI'" class="mt-2 text-xs text-gray-300 font-mono bg-gray-800 p-2 rounded overflow-x-auto">
          Args: {{ JSON.stringify(apiCall.args, null, 2) }}
        </div>
      </div>

      <!-- Response -->
      <div class="bg-gray-900 p-3 rounded border border-gray-700 relative">
        <div class="text-gray-400 mb-1 text-xs uppercase tracking-wider">Response</div>
        <pre class="text-xs text-gray-300 font-mono overflow-auto max-h-48 whitespace-pre-wrap break-all">{{ formatResponse(apiCall.data) }}</pre>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { lastApiCall } from '@/api/client'
import { computed, ref } from 'vue'

const apiCall = lastApiCall
const isCopied = ref(false)

const statusColor = computed(() => {
  const s = apiCall.value?.status || ''
  if (s === 'loading') return 'bg-yellow-900 text-yellow-300'
  if (s.includes('OK') || s === 'Success') return 'bg-green-900 text-green-300'
  return 'bg-red-900 text-red-300'
})

const copyToClipboard = async () => {
  if (!apiCall.value) return
  
  const data = apiCall.value
  const text = `
=== Momentry API Call Details ===
Type: ${data.type}
Status: ${data.status}
Time: ${data.timestamp}

${data.type === 'HTTP' ? `[${data.method}] ${data.url}` : `Command: ${data.command}`}
Arguments:
${JSON.stringify(data.args || data.body, null, 2)}

Response:
${JSON.stringify(data.data, null, 2)}
`.trim()

  try {
    await navigator.clipboard.writeText(text)
    isCopied.value = true
    setTimeout(() => isCopied.value = false, 2000)
  } catch (err) {
    console.error('Failed to copy text:', err)
  }
}

function formatResponse(data: any): string {
  if (!data) return 'Empty'
  try {
    return JSON.stringify(data, null, 2)
  } catch {
    return String(data)
  }
}
</script>
