<script setup lang="ts">
import RequestPanel from './components/RequestPanel.vue';
import ResponsePanel from './components/ResponsePanel.vue';
import Sidebar from './components/Sidebar.vue';
import SettingsModal from './components/SettingsModal.vue';
import { ref, onUnmounted } from 'vue';

const showSettings = ref(false);
const topPanelHeight = ref(50); // Percentage
const isDragging = ref(false);

const startDrag = () => {
  isDragging.value = true;
  window.addEventListener('mousemove', onDrag);
  window.addEventListener('mouseup', stopDrag);
};

const onDrag = (e: MouseEvent) => {
  if (!isDragging.value) return;
  
  const containerHeight = window.innerHeight;
  let newPercentage = (e.clientY / containerHeight) * 100;
  
  // Clamp between 20% and 80%
  if (newPercentage < 20) newPercentage = 20;
  if (newPercentage > 80) newPercentage = 80;
  
  topPanelHeight.value = newPercentage;
};

const stopDrag = () => {
  isDragging.value = false;
  window.removeEventListener('mousemove', onDrag);
  window.removeEventListener('mouseup', stopDrag);
};

onUnmounted(() => {
  window.removeEventListener('mousemove', onDrag);
  window.removeEventListener('mouseup', stopDrag);
});
</script>

<template>
  <div class="flex h-screen w-full bg-slate-950 text-slate-200 font-sans overflow-hidden">
    <!-- Sidebar -->
    <Sidebar @open-settings="showSettings = true" />

    <!-- Main Workspace -->
    <main class="flex-1 flex flex-col min-w-0 bg-slate-900 h-full relative">
      <!-- Request Panel (Top) -->
      <div class="min-h-0" :style="{ height: topPanelHeight + '%' }">
        <RequestPanel />
      </div>

      <!-- Resizer Handle -->
      <div 
        class="h-1 bg-slate-800 hover:bg-indigo-500 cursor-row-resize transition-colors z-10 flex-shrink-0"
        @mousedown="startDrag"
      ></div>

      <!-- Response Panel (Bottom) -->
      <div class="flex-1 min-h-0 overflow-hidden">
        <ResponsePanel />
      </div>
    </main>

    <SettingsModal v-if="showSettings" @close="showSettings = false" />
  </div>
</template>
