<template>
  <main class="p-4 max-w-screen-md mx-auto space-y-6">
    <!-- Loading -->
    <Spinner v-if="isLoading" :label="$t('listDetailPage.loading.list')" />

    <!-- Error -->
    <Alert v-else-if="error" type="error" :message="error" />

    <!-- Main Content -->
    <template v-else-if="list">
      <div class="flex items-center justify-between gap-4">
        <Heading :level="1">{{ list.name }}</Heading>
        <Switch v-model="supermarktMode" />
      </div>

      <ProgressBar v-if="supermarktMode" :value="completion" />

      <ItemsList :list="list" :items="itemsWithUI" :is-online="isOnline" :supermarkt-mode="supermarktMode"
        :category-options="categoryOptions" :new-item="newItem" :categories="categories" @add-item="handleAddItem"
        @checkbox-change="handleCheckboxChange" @delete-item="handleDeleteItem"
        @update:newItemName="val => (newItem.name = val)"
        @update:newItemCategoryId="val => (newItem.category_id = val)" />
    </template>
  </main>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted, onUnmounted, watch } from 'vue'
import { useRoute } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { useNetwork } from '@vueuse/core'
import { storeToRefs } from 'pinia'

// Stores
import { useListsStore } from '@/stores/listsStore'
import { useAuthStore } from '@/stores/auth'
import { useCategoryStore } from '@/stores/categoryStore'

// UI Primitives
import { Heading, Spinner, Alert, ProgressBar, Switch } from '@/components/ui'

// Components
import ItemsList from '@/components/list-detail/ItemsList.vue'

const { t } = useI18n()
const { isOnline } = useNetwork()
const route = useRoute()

// Pinia stores
const listsStore = useListsStore()
const authStore = useAuthStore()
const categoryStore = useCategoryStore()

// Store refs
const { currentList: list, isLoading, error } = storeToRefs(listsStore)
const { categories } = storeToRefs(categoryStore)

// Local state
const supermarktMode = ref(false)
const newItem = reactive<{ name: string; category_id: number | null }>({ name: '', category_id: null })

// Derived data
const completion = computed(() => {
  if (!list.value?.items.length) return 0
  const done = list.value.items.filter(i => i.is_complete).length
  return (done / list.value.items.length) * 100
})

const itemsWithUI = computed(() => {
  return (list.value?.items || []).map(i => ({
    ...i,
    updating: false,
    deleting: false,
    priceInput: i.price ?? null,
    swiped: false,
  }))
})

const categoryOptions = computed(() => [
  { label: t('listDetailPage.noCategory'), value: null },
  ...categories.value.map((c: { id: number; name: string }) => ({ label: c.name, value: c.id })),
])

// Lifecycle
onMounted(() => {
  const listId = String(route.params.id)
  listsStore.fetchListDetails(listId)
  categoryStore.fetchCategories()

  let stop: (() => void) | null = null
  stop = watch(
    () => authStore.accessToken,
    token => {
      if (token) {
        listsStore.connectWebSocket(Number(listId), token)
        if (stop) stop()
      }
    },
    { immediate: true },
  )
})

onUnmounted(() => {
  listsStore.disconnectWebSocket()
})

// Stub handlers (to be implemented)
function handleAddItem() {
  if (!list.value) return
  const nameTrimmed = newItem.name.trim()
  if (!nameTrimmed) return

  listsStore
    .addItem(list.value.id, {
      name: nameTrimmed,
      category_id: newItem.category_id ?? undefined,
    })
    .then(() => {
      newItem.name = ''
      newItem.category_id = null
    })
    .catch(err => {
      console.error('Add item failed', err)
    })
}

function handleCheckboxChange(item: any, checked: boolean) {
  if (!list.value) return
  listsStore
    .updateItem(list.value.id, item.id, { is_complete: checked, version: item.version })
    .catch(err => console.error('Update item failed', err))
}

function handleDeleteItem(item: any) {
  if (!list.value) return
  listsStore
    .deleteItem(list.value.id, item.id, item.version)
    .catch(err => console.error('Delete item failed', err))
}
</script>

<style scoped>
/* No extra styles – Tailwind utility classes cover layout */
</style>