<script setup lang="ts">
import { ref } from 'vue'
import { RouterLink, RouterView } from 'vue-router'
import RunHistory from '@/components/RunHistory.vue'

const historyOpen = ref(true)
</script>

<template>
  <div class="flex h-screen overflow-hidden">
    <!-- Sidebar Navigation -->
    <aside class="w-16 bg-bg-secondary border-r border-border flex flex-col items-center py-4 gap-4">
      <!-- Logo -->
      <div class="w-10 h-10 rounded-lg bg-accent-blue flex items-center justify-center text-black font-bold text-lg">
        LB
      </div>
      
      <!-- Nav Links -->
      <nav class="flex flex-col gap-2 mt-4">
        <RouterLink 
          to="/" 
          class="w-10 h-10 rounded-lg flex items-center justify-center hover:bg-bg-hover transition-colors"
          :class="{ 'bg-bg-tertiary': $route.path === '/' }"
          title="Dashboard"
        >
          <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="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
          </svg>
        </RouterLink>
        
        <RouterLink 
          to="/compare" 
          class="w-10 h-10 rounded-lg flex items-center justify-center hover:bg-bg-hover transition-colors"
          :class="{ 'bg-bg-tertiary': $route.path === '/compare' }"
          title="Compare Runs"
        >
          <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="M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7m0 10a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2h-2a2 2 0 00-2 2" />
          </svg>
        </RouterLink>
      </nav>
      
      <!-- Spacer -->
      <div class="flex-1"></div>
      
      <!-- Toggle History -->
      <button 
        @click="historyOpen = !historyOpen"
        class="w-10 h-10 rounded-lg flex items-center justify-center hover:bg-bg-hover transition-colors"
        :class="{ 'bg-bg-tertiary': historyOpen }"
        title="Toggle Run History"
      >
        <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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
        </svg>
      </button>
    </aside>
    
    <!-- Main Content -->
    <main class="flex-1 overflow-auto">
      <RouterView />
    </main>
    
    <!-- Run History Sidebar -->
    <aside 
      v-if="historyOpen"
      class="w-72 bg-bg-secondary border-l border-border overflow-hidden flex flex-col"
    >
      <RunHistory />
    </aside>
  </div>
</template>
