<script setup lang="ts">
import { useRequestStore } from './stores/requestStore';
import RequestPanel from './components/RequestPanel.vue';
import ResponsePanel from './components/ResponsePanel.vue';
import MethodBadge from './components/MethodBadge.vue';
import SettingsModal from './components/SettingsModal.vue';
import { History, Layers, Zap, Settings } from 'lucide-vue-next';
import { ref } from 'vue';

const store = useRequestStore();
const showSettings = ref(false);
</script>

<template>
  <div class="flex h-screen w-full bg-slate-950 text-slate-200 font-sans overflow-hidden">
    <!-- Sidebar -->
    <aside class="w-64 flex-shrink-0 border-r border-slate-800 flex flex-col bg-slate-950">
      <!-- Header -->
      <div class="h-14 flex items-center px-4 border-b border-slate-800 gap-2">
        <div class="bg-indigo-500/20 p-1.5 rounded-lg">
          <Zap class="w-5 h-5 text-indigo-400" />
        </div>
        <span class="font-bold text-slate-100 tracking-tight">LiteRequest</span>
      </div>

      <!-- Nav Tabs -->
      <div class="flex p-2 gap-1">
        <button class="flex-1 flex items-center justify-center gap-2 py-1.5 text-xs font-medium bg-slate-900 text-slate-200 rounded border border-slate-800 shadow-sm">
          <History class="w-3.5 h-3.5" /> History
        </button>
        <button class="flex-1 flex items-center justify-center gap-2 py-1.5 text-xs font-medium text-slate-500 hover:bg-slate-900 hover:text-slate-300 rounded transition-colors">
          <Layers class="w-3.5 h-3.5" /> Collections
        </button>
      </div>

      <!-- History List -->
      <div class="flex-1 overflow-y-auto">
        <div v-if="store.history.length === 0" class="p-8 text-center text-slate-600 text-xs">
          No history yet. Make a request!
        </div>
        <div v-else class="flex flex-col">
          <button 
            v-for="item in store.history" 
            :key="item.timestamp"
            @click="store.loadRequest(item)"
            class="text-left px-3 py-3 border-b border-slate-800/50 hover:bg-slate-900 transition-colors group flex flex-col gap-1.5"
          >
            <div class="flex items-center gap-2 overflow-hidden w-full">
              <MethodBadge :method="item.method" />
              <span class="text-xs text-slate-400 truncate font-mono opacity-75">{{ new Date(item.timestamp).toLocaleTimeString() }}</span>
            </div>
            <div class="text-sm text-slate-300 truncate px-1 font-medium" :title="item.url">
              {{ item.url || 'No URL' }}
            </div>
          </button>
        </div>
      </div>

      <!-- Settings -->
      <div class="p-2 border-t border-slate-800">
        <button 
          @click="showSettings = true"
          class="w-full flex items-center gap-2 px-3 py-2 text-xs font-medium text-slate-400 hover:text-slate-200 hover:bg-slate-900 rounded transition-colors"
        >
          <Settings class="w-4 h-4" /> Settings
        </button>
      </div>
    </aside>

    <!-- Main Workspace -->
    <main class="flex-1 flex flex-col min-w-0 bg-slate-900">
      <div class="flex-1 min-h-0">
        <RequestPanel />
      </div>
      <div class="h-1/2 border-t border-slate-800 min-h-0">
        <ResponsePanel />
      </div>
    </main>

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