<template>
  <div class="layout">
    <header class="app-header">
      <h1>TMC Items Manager</h1>
    </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;
}

.app-header {
  padding: 12px 24px;
  border-bottom: 1px solid #e5e7eb;
  background: #fff;
  flex-shrink: 0;

  h1 {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 700;
    color: #1f2937;
  }
}

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

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