<script setup lang="ts">
import { onMounted, computed } from 'vue'
import Panel from '@framework/components/Panel.vue'
import SplitPane from '@framework/components/SplitPane.vue'
import FileTree from '@/components/FileTree.vue'
import DocDetail from '@/components/DocDetail.vue'
import ExportBar from '@/components/ExportBar.vue'
import { store, loadTree } from '@/store'

onMounted(loadTree)

const detailTitle = computed(() =>
  store.detail?.node.mode === 'meeting' ? 'Meeting' : 'File')
const barLabel = computed(() => store.detail?.node.name ?? 'viewer')
</script>

<template>
  <div class="app">
    <header class="topbar">
      <span class="brand">doocus</span>
      <span v-if="store.counts.total" class="counts">
        {{ store.counts.total }} files · {{ store.counts.extracted }} extracted ·
        {{ store.counts.link }} linked · {{ store.counts.meeting }} meetings
      </span>
      <span class="spacer" />
      <ExportBar />
    </header>

    <main class="body">
      <div v-if="store.error" class="err">{{ store.error }}</div>

      <!-- expanded: resizable tree / viewer split -->
      <SplitPane v-else-if="!store.detailCollapsed" direction="vertical" :initial-size="0.9" :min="0.2" :max="4">
        <template #first>
          <Panel title="Tree"><FileTree :items="store.tree" /></Panel>
        </template>
        <template #second>
          <Panel :title="detailTitle">
            <template #actions>
              <button class="chev" title="Collapse viewer" @click="store.detailCollapsed = true">▾</button>
            </template>
            <DocDetail />
          </Panel>
        </template>
      </SplitPane>

      <!-- collapsed: tree fills, viewer is a bar docked at the bottom -->
      <div v-else class="stack">
        <Panel title="Tree" class="grow"><FileTree :items="store.tree" /></Panel>
        <button class="expand-bar" title="Expand viewer" @click="store.detailCollapsed = false">
          ▴ <span>{{ barLabel }}</span>
        </button>
      </div>
    </main>
  </div>
</template>

<style scoped>
.app { display: flex; flex-direction: column; height: 100%; }
.topbar {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--surface-1); border-bottom: var(--panel-border); flex-shrink: 0;
}
.brand { font-weight: 700; letter-spacing: 0.02em; }
.counts { color: var(--text-secondary); font-size: var(--font-size-sm); }
.spacer { flex: 1; }
.body { flex: 1; min-height: 0; padding: var(--space-2); }
.err { color: var(--status-error, #e0a030); padding: var(--space-4); }
.stack { display: flex; flex-direction: column; height: 100%; gap: var(--space-2); }
.grow { flex: 1; min-height: 0; }
.expand-bar {
  flex-shrink: 0; display: flex; align-items: center; gap: var(--space-2);
  justify-content: flex-start; text-align: left; width: 100%;
  background: var(--surface-2); border: var(--panel-border); border-radius: var(--panel-radius);
  padding: var(--space-1) var(--space-3); color: var(--text-secondary);
}
.expand-bar span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chev { padding: 0 var(--space-2); background: transparent; border: 0; color: var(--text-secondary); }
</style>
