<template>
  <div class="layout">
    <header class="app-header">
      <div class="header-inner">
        <div class="header-brand">
          <span class="brand-mark" />
          <h1 class="brand-title">TMC <em>Items Manager</em></h1>
        </div>
        <span class="header-label">Manage &amp; organize</span>
      </div>
    </header>
    <main class="panels">
      <LeftPanel
        :items="leftItems"
        :loading="leftLoading"
        :has-more="leftHasMore"
        :search="leftSearch"
        @update:search="leftSearch = $event"
        @load-more="fetchLeft()"
        @select="handleSelect"
        @add="handleAdd"
      />
      <RightPanel
        :items="rightItems"
        :loading="rightLoading"
        :has-more="rightHasMore"
        :search="rightSearch"
        @update:search="rightSearch = $event"
        @load-more="fetchRight()"
        @deselect="handleDeselect"
        @reorder="handleReorder"
      />
    </main>
  </div>
</template>

<script setup lang="ts">
import { onMounted, watch } from 'vue'

const {
  leftItems,
  rightItems,
  leftSearch,
  rightSearch,
  leftLoading,
  rightLoading,
  leftHasMore,
  rightHasMore,
  fetchLeft,
  fetchRight,
  selectItem,
  deselectItem,
  reorderSelected,
  addItem,
} = useItems()

onMounted(() => {
  fetchLeft()
  fetchRight()
})

watch(leftSearch, () => fetchLeft(true))
watch(rightSearch, () => fetchRight(true))

async function handleSelect(id: number) {
  await selectItem(id)
}

async function handleDeselect(id: number) {
  await deselectItem(id)
}

async function handleReorder(ids: number[]) {
  await reorderSelected(ids)
}

async function handleAdd(id: number) {
  await addItem(id)
}
</script>

<style lang="scss">
.layout {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: var(--canvas);
}

.app-header {
  flex-shrink: 0;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  height: 52px;
}

.header-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand-mark {
  width: 6px;
  height: 6px;
  background: var(--text-primary);
  border-radius: 50%;
  flex-shrink: 0;
}

.brand-title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 400;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  line-height: 1;

  em {
    font-style: italic;
    font-weight: 300;
  }
}

.header-label {
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.panels {
  display: flex;
  flex: 1;
  overflow: hidden;

  > * {
    flex: 1;
    min-width: 0;
    overflow: hidden;
  }
}
</style>
