<script setup lang="ts">
import { computed, ref } from 'vue';
import { useRequestStore } from '../stores/requestStore';
import { useSettingsStore } from '../stores/settingsStore';
import { Codemirror } from 'vue-codemirror';
import { json } from '@codemirror/lang-json';
import { oneDark } from '@codemirror/theme-one-dark';
import { EditorView } from '@codemirror/view';
import { Clipboard, Check } from 'lucide-vue-next';

const store = useRequestStore();
const settings = useSettingsStore();
const isCopied = ref(false);

const extensions = computed(() => {
  const theme = EditorView.theme({
    "&": {
      backgroundColor: "transparent !important",
      height: "100%"
    },
    ".cm-content, .cm-gutter": {
      fontFamily: `${settings.editorFontFamily} !important`
    },
    ".cm-gutters": {
      backgroundColor: "transparent !important"
    }
  });

  return [json(), oneDark, theme, EditorView.editable.of(false)];
});

const formattedBody = computed(() => {
    if (!store.activeRequest.response) return '';
    try {
        // Auto pretty print
        return JSON.stringify(JSON.parse(store.activeRequest.response.body), null, 2);
    } catch (e) {
        return store.activeRequest.response.body;
    }
});

const statusColor = computed(() => {
    const s = store.activeRequest.response?.status || 0;
    if (s >= 200 && s < 300) return 'text-emerald-400';
    if (s >= 400) return 'text-rose-400';
    return 'text-amber-400';
});

const copyToClipboard = async () => {
  if (!formattedBody.value) return;
  try {
    await navigator.clipboard.writeText(formattedBody.value);
    isCopied.value = true;
    setTimeout(() => {
      isCopied.value = false;
    }, 2000);
  } catch (err) {
    console.error('Failed to copy:', err);
  }
};
</script>

<template>
  <div class="flex flex-col h-full border-t border-slate-800 bg-slate-900">
    <div v-if="store.activeRequest.response" class="flex flex-col h-full">
        <!-- Meta Bar -->
        <div class="px-4 py-2 border-b border-slate-800 flex justify-between text-xs items-center bg-slate-950/50">
            <div class="flex gap-4 items-center">
                <div class="font-mono">
                    Status: <span :class="['font-bold', statusColor]">{{ store.activeRequest.response.status }}</span>
                </div>
                <div class="text-slate-500">
                    Time: <span class="text-slate-300">{{ store.activeRequest.response.time }}ms</span>
                </div>
                <div class="text-slate-500">
                    Size: <span class="text-slate-300">{{ (store.activeRequest.response.size / 1024).toFixed(2) }} KB</span>
                </div>
            </div>
            
            <button 
              @click="copyToClipboard"
              class="p-1.5 text-slate-400 hover:text-indigo-400 hover:bg-indigo-500/10 rounded transition-colors"
              title="Copy Body"
            >
               <Check v-if="isCopied" class="w-3.5 h-3.5" />
               <Clipboard v-else class="w-3.5 h-3.5" />
            </button>
        </div>
        
        <!-- Output -->
        <div class="flex-1 overflow-hidden">
            <Codemirror
                :model-value="formattedBody"
                :style="{ 
                  height: '100%',
                  fontSize: settings.editorFontSize + 'px', 
                  fontFamily: settings.editorFontFamily 
                }"
                :extensions="extensions"
            />
        </div>
    </div>
    <div v-else class="flex-1 flex items-center justify-center text-slate-600 text-sm">
        No response yet
    </div>
  </div>
</template>
