<script setup lang="ts">
import Panel from '@framework/components/Panel.vue'
import SplitPane from '@framework/components/SplitPane.vue'
import DocPicker from '@/components/DocPicker.vue'
import DocViewer from '@/components/DocViewer.vue'
import MetadataPanel from '@/components/MetadataPanel.vue'
import ExportBar from '@/components/ExportBar.vue'
</script>

<template>
  <div class="app">
    <header class="topbar">
      <span class="brand">doocus</span>
      <span class="spacer" />
      <ExportBar />
    </header>

    <main class="body">
      <SplitPane :initial-size="0.9" :min="0.5" :max="2">
        <template #first>
          <Panel title="Documents">
            <DocPicker />
          </Panel>
        </template>
        <template #second>
          <SplitPane :initial-size="2.2" :min="1" :max="5">
            <template #first>
              <Panel title="Content">
                <DocViewer />
              </Panel>
            </template>
            <template #second>
              <Panel title="Metadata">
                <MetadataPanel />
              </Panel>
            </template>
          </SplitPane>
        </template>
      </SplitPane>
    </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;
}
.spacer {
  flex: 1;
}
.body {
  flex: 1;
  min-height: 0;
  padding: var(--space-2);
}
</style>
