<template>
  <NcAppNavigation>
    <template #list>
      <template v-if="currentHouseId !== null">
        <li class="pantry-nav__house-label" :title="house?.name">
          {{ house?.name ?? '' }}
        </li>

        <NcAppNavigationItem
          :name="strings.lists"
          :to="{ name: 'lists', params: { houseId: String(currentHouseId) } }"
          :active="isNavActive(['lists', 'list-detail', 'list-'])"
        >
          <template #icon>
            <ClipboardCheckIcon :size="20" />
          </template>
        </NcAppNavigationItem>

        <NcAppNavigationItem
          :name="strings.photos"
          :to="{ name: 'photos', params: { houseId: String(currentHouseId) } }"
          :active="isNavActive(['photos', 'photo-'])"
        >
          <template #icon>
            <ImageIcon :size="20" />
          </template>
        </NcAppNavigationItem>

        <NcAppNavigationItem
          :name="strings.notes"
          :to="{ name: 'notes', params: { houseId: String(currentHouseId) } }"
          :active="isNavActive(['notes', 'note-'])"
        >
          <template #icon>
            <NoteIcon :size="20" />
          </template>
        </NcAppNavigationItem>
      </template>

      <li v-if="currentHouseId === null" class="pantry-nav__welcome">
        {{ strings.welcomeHint }}
      </li>
    </template>

    <template #footer>
      <ul class="pantry-nav__footer-list">
        <NcAppNavigationItem
          v-if="currentHouseId !== null"
          :name="strings.houseSettings"
          @click="showHouseSettings = true"
        >
          <template #icon>
            <CogIcon :size="20" />
          </template>
        </NcAppNavigationItem>
        <NcAppNavigationItem
          v-if="currentHouseId !== null"
          :name="strings.accountSettings"
          @click="showSettings = true"
        >
          <template #icon>
            <CogOutlineIcon :size="20" />
          </template>
        </NcAppNavigationItem>
      </ul>
      <div class="pantry-switcher">
        <button
          ref="triggerRef"
          type="button"
          class="pantry-switcher__trigger"
          :aria-expanded="menuOpen"
          aria-haspopup="menu"
          @click="toggleMenu"
        >
          <HomeIcon :size="20" class="pantry-switcher__icon" />
          <span class="pantry-switcher__label">
            {{ house?.name ?? strings.pickHouse }}
          </span>
          <ChevronUpIcon v-if="menuOpen" :size="18" />
          <ChevronDownIcon v-else :size="18" />
        </button>

        <ul v-if="menuOpen" class="pantry-switcher__menu" role="menu">
          <li
            v-for="h in houses"
            :key="h.id"
            role="menuitem"
            class="pantry-switcher__item"
            :class="{ 'pantry-switcher__item--active': h.id === currentHouseId }"
            @click="pickHouse(h.id)"
          >
            <HomeIcon :size="18" />
            <span class="pantry-switcher__item-name">{{ h.name }}</span>
            <CheckIcon v-if="h.id === currentHouseId" :size="16" />
          </li>

          <li v-if="houses.length > 0" class="pantry-switcher__separator" role="separator"></li>

          <li
            role="menuitem"
            class="pantry-switcher__item pantry-switcher__item--action"
            @click="openCreate"
          >
            <PlusIcon :size="18" />
            <span>{{ strings.createHouse }}</span>
          </li>
        </ul>
      </div>
    </template>
  </NcAppNavigation>

  <HouseSettingsDialog v-if="currentHouseId !== null" v-model:open="showHouseSettings" />
  <AccountSettingsDialog v-model:open="showSettings" :house-id="currentHouseId" />

  <NcDialog
    v-if="showCreate"
    :name="strings.createDialogTitle"
    :open="showCreate"
    close-on-click-outside
    @update:open="showCreate = $event"
  >
    <form
      id="pantry-create-house-form"
      class="pantry-create-form"
      autocomplete="off"
      @submit.prevent="submitCreate"
    >
      <NcTextField
        v-model="newName"
        :label="strings.nameLabel"
        :placeholder="strings.namePlaceholder"
        autocomplete="off"
      />
      <NcTextField
        v-model="newDescription"
        :label="strings.descriptionLabel"
        :placeholder="strings.descriptionPlaceholder"
        autocomplete="off"
      />
      <p v-if="createError" class="pantry-create-form__error">{{ createError }}</p>
    </form>
    <template #actions>
      <NcButton @click="showCreate = false">{{ strings.cancel }}</NcButton>
      <NcButton
        form="pantry-create-house-form"
        type="submit"
        variant="primary"
        :disabled="creating || !newName.trim()"
      >
        {{ creating ? strings.creating : strings.create }}
      </NcButton>
    </template>
  </NcDialog>
</template>

<script setup lang="ts">
import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { t } from '@nextcloud/l10n'
import NcAppNavigation from '@nextcloud/vue/components/NcAppNavigation'
import NcAppNavigationItem from '@nextcloud/vue/components/NcAppNavigationItem'
import NcButton from '@nextcloud/vue/components/NcButton'
import NcDialog from '@nextcloud/vue/components/NcDialog'
import NcTextField from '@nextcloud/vue/components/NcTextField'
import HomeIcon from '@icons/Home.vue'
import ClipboardCheckIcon from '@icons/ClipboardCheck.vue'
import ImageIcon from '@icons/Image.vue'
import NoteIcon from '@icons/Note.vue'
import CogIcon from '@icons/Cog.vue'
import CogOutlineIcon from '@icons/CogOutline.vue'
import ChevronUpIcon from '@icons/ChevronUp.vue'
import ChevronDownIcon from '@icons/ChevronDown.vue'
import CheckIcon from '@icons/Check.vue'
import PlusIcon from '@icons/Plus.vue'
import { useHouses } from '@/composables/useHouses'
import HouseSettingsDialog from '@/components/HouseSettingsDialog'
import AccountSettingsDialog from '@/components/AccountSettingsDialog'

const route = useRoute()
const router = useRouter()
const { houses, load, create, findById } = useHouses()

const currentHouseId = computed<number | null>(() => {
  const raw = route.params.houseId
  if (!raw) return null
  const id = Number(Array.isArray(raw) ? raw[0] : raw)
  return Number.isFinite(id) ? id : null
})

const house = computed(() =>
  currentHouseId.value !== null ? findById(currentHouseId.value) : undefined,
)
/**
 * Prefix-based route matcher for sidebar items. An item is active when the
 * current route name equals any of the given prefixes, or starts with one of
 * them (so sub-pages like `list-detail` highlight their parent `lists` item).
 */
function isNavActive(prefixes: string[]): boolean {
  const name = typeof route.name === 'string' ? route.name : ''
  if (!name) return false
  return prefixes.some((p) => name === p || name.startsWith(p))
}

onMounted(() => {
  void load()
})

// -------- Dropup menu --------
const menuOpen = ref(false)
const triggerRef = ref<HTMLButtonElement | null>(null)

function toggleMenu() {
  menuOpen.value = !menuOpen.value
}

function closeMenu() {
  menuOpen.value = false
}

function onDocumentClick(e: MouseEvent) {
  if (!menuOpen.value) return
  const target = e.target as Node | null
  if (triggerRef.value && target && triggerRef.value.parentElement?.contains(target)) return
  closeMenu()
}

onMounted(() => document.addEventListener('click', onDocumentClick))
onUnmounted(() => document.removeEventListener('click', onDocumentClick))

async function pickHouse(id: number) {
  closeMenu()
  if (id === currentHouseId.value) return
  await router.push({ name: 'lists', params: { houseId: String(id) } })
}

// -------- Settings dialogs --------
const showHouseSettings = ref(false)
const showSettings = ref(false)

// -------- Create house dialog --------
const showCreate = ref(false)
const newName = ref('')
const newDescription = ref('')
const creating = ref(false)
const createError = ref<string | null>(null)

function openCreate() {
  closeMenu()
  showCreate.value = true
}

async function submitCreate() {
  const name = newName.value.trim()
  if (!name) return
  creating.value = true
  createError.value = null
  try {
    const h = await create(name, newDescription.value.trim() || null)
    showCreate.value = false
    newName.value = ''
    newDescription.value = ''
    await router.push({ name: 'lists', params: { houseId: String(h.id) } })
  } catch (e) {
    createError.value = (e as Error).message || t('pantry', 'Could not create house.')
  } finally {
    creating.value = false
  }
}

// Close the menu on route change so it does not linger after navigation.
watch(currentHouseId, closeMenu)

const strings = {
  lists: t('pantry', 'Checklists'),
  photos: t('pantry', 'Photo board'),
  notes: t('pantry', 'Notes wall'),
  houseSettings: t('pantry', 'House settings'),
  accountSettings: t('pantry', 'Account settings'),
  pickHouse: t('pantry', 'Pick a house'),
  createHouse: t('pantry', 'New house …'),
  welcomeHint: t('pantry', 'Pick or create a house to get started.'),
  createDialogTitle: t('pantry', 'Create a house'),
  nameLabel: t('pantry', 'Name'),
  namePlaceholder: t('pantry', 'e.g. Home, Beach house'),
  descriptionLabel: t('pantry', 'Description (optional)'),
  descriptionPlaceholder: t('pantry', 'A short description'),
  create: t('pantry', 'Create'),
  creating: t('pantry', 'Creating …'),
  cancel: t('pantry', 'Cancel'),
}
</script>

<style scoped lang="scss">
.pantry-nav__house-label {
  padding: 8px 16px 4px;
  font-weight: 600;
  color: var(--color-text-maxcontrast);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pantry-nav__welcome {
  padding: 16px;
  color: var(--color-text-maxcontrast);
  font-size: 0.9rem;
  line-height: 1.4;
}

.pantry-nav__footer-list {
  list-style: none;
  padding: 8px 8px 0;
  margin: 0;
  position: relative;
  z-index: 0;
}

.pantry-switcher {
  position: relative;
  z-index: 1;
  padding: 0 8px 8px;
  border-top: 1px solid var(--color-border);

  &__trigger {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    background: transparent;
    color: var(--color-main-text);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-large, 12px);
    cursor: pointer;
    font-size: 0.95rem;
    text-align: left;

    &:hover,
    &:focus-visible {
      background: var(--color-background-hover);
    }
  }

  &__icon {
    color: var(--color-primary-element);
    flex-shrink: 0;
  }

  &__label {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
  }

  &__menu {
    position: absolute;
    bottom: calc(100% + 4px);
    left: 8px;
    right: 8px;
    list-style: none;
    padding: 6px;
    margin: 0;
    background: var(--color-main-background);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-large, 12px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    max-height: 60vh;
    overflow-y: auto;
    z-index: 20;
  }

  &__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--border-radius, 8px);
    cursor: pointer;
    color: var(--color-main-text);
    font-size: 0.9rem;

    &:hover,
    &:focus-visible {
      background: var(--color-background-hover);
    }

    &--active {
      background: var(--color-primary-element-light);
      color: var(--color-primary-element-light-text);
    }

    &--action {
      color: var(--color-primary-element);
      font-weight: 500;
    }
  }

  &__item-name {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  &__separator {
    height: 1px;
    background: var(--color-border);
    margin: 4px 2px;
  }
}

.pantry-create-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 0.5rem 0;

  &__error {
    color: var(--color-error);
    margin: 0;
  }
}
</style>
