<script setup lang="ts">
import { useRouter } from 'vue-router'
import { useProjectsStore } from '@/stores/projects'
import TreeView from './TreeView.vue'
import Button from '@/components/common/Button.vue'

const router = useRouter()
const projectsStore = useProjectsStore()

const emit = defineEmits<{
  'create-folder': []
  'create-document': []
}>()

function handleNodeClick(node: { id: string; type: string }) {
  if (node.type === 'document') {
    router.push(`/documents/${node.id}`)
  }
}

function goToDashboard() {
  router.push('/dashboard')
}
</script>

<template>
  <aside class="sidebar">
    <div class="sidebar__header">
      <button class="sidebar__back" @click="goToDashboard">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <path d="m15 18-6-6 6-6"/>
        </svg>
        All Projects
      </button>
    </div>

    <div v-if="projectsStore.currentProject" class="sidebar__content">
      <div class="sidebar__project">
        <h2 class="sidebar__project-name">{{ projectsStore.currentProject.name }}</h2>
        <p v-if="projectsStore.currentProject.description" class="sidebar__project-desc">
          {{ projectsStore.currentProject.description }}
        </p>
      </div>

      <div class="sidebar__actions">
        <Button size="sm" variant="ghost" @click="emit('create-folder')">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/>
            <line x1="12" y1="11" x2="12" y2="17"/>
            <line x1="9" y1="14" x2="15" y2="14"/>
          </svg>
          New Folder
        </Button>
        <Button size="sm" variant="ghost" @click="emit('create-document')">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
            <polyline points="14 2 14 8 20 8"/>
            <line x1="12" y1="11" x2="12" y2="17"/>
            <line x1="9" y1="14" x2="15" y2="14"/>
          </svg>
          New Doc
        </Button>
      </div>

      <div class="sidebar__tree">
        <TreeView
          :nodes="projectsStore.treeNodes"
          @node-click="handleNodeClick"
        />
      </div>
    </div>

    <div v-else class="sidebar__empty">
      <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
        <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/>
      </svg>
      <p>Select a project to view its contents</p>
    </div>
  </aside>
</template>

<style scoped>
.sidebar {
  width: 280px;
  min-width: 280px;
  height: 100%;
  background: var(--bg-secondary);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.sidebar__header {
  padding: 1rem;
  border-bottom: 1px solid var(--border);
}

.sidebar__back {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.5rem;
  background: none;
  border: none;
  border-radius: 6px;
  font-size: 0.875rem;
  color: var(--text-secondary);
  cursor: pointer;
  text-align: left;
  transition: all 0.15s;
}

.sidebar__back:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

.sidebar__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.sidebar__project {
  padding: 1rem;
  border-bottom: 1px solid var(--border);
}

.sidebar__project-name {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
}

.sidebar__project-desc {
  margin: 0.25rem 0 0;
  font-size: 0.8125rem;
  color: var(--text-secondary);
  line-height: 1.4;
}

.sidebar__actions {
  display: flex;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
}

.sidebar__tree {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem;
}

.sidebar__empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 2rem;
  color: var(--text-secondary);
  text-align: center;
}

.sidebar__empty p {
  margin: 0;
  font-size: 0.875rem;
}
</style>
