<template>
  <div class="flex max-w-7xl md:flex-row flex-col md:gap-8 gap-4 md:pt-8 pt-8 md:items-start items-stretch">
    <!-- Sidebar Navigation -->
    <nav class="bg-white rounded-lg p-6 shadow-sm flex-shrink-0 md:w-64 w-full">
      <h2 class="text-lg font-semibold mb-4 text-gray-800">Settings</h2>
      <ul class="space-y-2">
          <li>
              <router-link
                  to="/settings/general"
                  class="settings-nav-item"
                  active-class="active"
              >
                  <AppIcon name="robot-line" size="sm" class="mr-3" />
                  General Settings
              </router-link>
          </li>


        <li>
          <router-link
            to="/settings/llm"
            class="settings-nav-item"
            active-class="active"
          >
            <AppIcon name="robot-line" size="sm" class="mr-3" />
            LLM Settings
          </router-link>
        </li>
        <li>
          <router-link
            to="/settings/chat"
            class="settings-nav-item"
            active-class="active"
          >
            <AppIcon name="chat-3-line" size="sm" class="mr-3" />
            Chat Settings
          </router-link>
        </li>
        <li>
          <router-link
            to="/settings/email"
            class="settings-nav-item"
            active-class="active"
          >
            <AppIcon name="mail-settings-line" size="sm" class="mr-3" />
            Email Settings
          </router-link>
        </li>
        <li>
          <router-link
            to="/settings/saved-replies"
            class="settings-nav-item"
            active-class="active"
          >
            <AppIcon name="chat-quote-line" size="sm" class="mr-3" />
            Saved Replies
          </router-link>
        </li>
        <li>
          <router-link
            to="/settings/data-source"
            class="settings-nav-item"
            active-class="active"
          >
            <AppIcon name="database-2-line" size="sm" class="mr-3" />
            Data Source
          </router-link>
        </li>
      </ul>
    </nav>

    <!-- Main Content Area -->
    <main class="flex-1 min-w-0 bg-white rounded-lg p-8 shadow-sm overflow-hidden">
      <!-- Settings content will be rendered here with smooth transitions -->
      <router-view v-slot="{ Component, route }">
        <transition name="page" mode="out-in">
          <component :is="Component" :key="route.path" />
        </transition>
      </router-view>
    </main>
  </div>
</template>

<script setup>
import AppIcon from './Icon.vue';
</script>

<style lang="scss" scoped>
/* Settings navigation item styles */
.settings-nav-item {
  @apply flex items-center px-4 py-3 text-sm text-gray-600 hover:bg-gray-50 hover:text-gray-800 rounded-md transition-colors duration-200 no-underline;

  &.active {
    @apply text-white bg-blue-600;
  }
}

/* Smooth page transition styles */
.page-enter-active,
.page-leave-active {
  transition: opacity 0.2s ease-in-out;
}

.page-enter-from,
.page-leave-to {
  opacity: 0;
}

.page-enter-to,
.page-leave-from {
  opacity: 1;
}
</style>
