<template>
  <div>
    <app-board-header :h2data="compData.title"></app-board-header>
    <section class="bg-white dark:bg-gray-900 py-10 w-full min-h-[85vh]">
      <div v-if="!toggleEdit" class="mx-auto max-w-5xl w-full py-4 md:px-6">
        <app-board-body :board="board" />
        <!-- buttons -->
        <app-board-action
          :listRouteName="compData.listRouteName"
          :uploadRouteName="compData.uploadRouteName"
          @edit="toggleEditBoard"
          @delete="handleDelete"
        />
      </div>
      <app-upload-project-form
        v-if="toggleEdit"
        :isEdit="true"
        :board="board"
        @update-success="handleUpdateSuccess"
      />
    </section>
    <app-loading-overlay
      :isLoading="in_submission"
      :loadingMessage="deletingMessage"
    ></app-loading-overlay>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue';
const { $firebase } = useNuxtApp();
import useUserStore from '@/stores/user';
import AppBoardHeader from '@/components/boards/BoardHeader.vue';
import AppBoardAction from '@/components/boards/BoardAction.vue';
import AppBoardBody from '@/components/boards/BoardBody.vue';
import AppLoadingOverlay from '@/components/LoadingOverlay.vue';
import { loadBoardDetails, deleteSingle } from '@/utils/boardUtils';
import type { ProjectBoard, OrderByDirection } from '@/types';
const storage = $firebase.storage;

//***Variables, Things you need to change****)
const projectsCollection = $firebase.projectsCollection;
import AppUploadProjectForm from '@/components/boards/project/UploadProjectForm.vue';
const currentCollection = projectsCollection;
const currentBoardRouteName = '/cms';
const compData = {
  title: 'Projects | CMS',
  routeName: '/cms/[docId]',
  itemsPerPage: 20,
  defaultSort: 'desc' as OrderByDirection,
  listRouteName: '/cms',
  uploadRouteName: '/cms/upload',
};

//
const in_submission = ref(false);
const deletingMessage = '삭제 중! 잠시만 기다려주세요...';

//Reactive variables
const router = useRouter();
const route = useRoute(); // Access the route object
const docId = computed(() => route.params.docId as string);

const board = ref<ProjectBoard>({
  docId: '',
  userId: '',
  title: '',
  description: '',
  subtitle: '',
  announcement: false,
  ishidden: false,
  boards_number: 0,
  created: '',
  boardState: {
    state: 'pending',
    error: undefined,
  },
});

const userStore = useUserStore();
const userRole = computed(() => userStore.userRole);

const toggleEdit = ref(false);

const handleDelete = async () => {
  const result = await deleteSingle(board.value, currentCollection, storage);
  if (result) {
    router.push(currentBoardRouteName); // path string works directly in Nuxt3
  }
};

const handleUpdateSuccess = async () => {
  await loadBoardDetails(
    board.value.docId,
    board, // ref<BoardItem>
    currentCollection,
    router,
    currentBoardRouteName,
    userRole // Ref<number>
  );

  toggleEdit.value = false;
};

const toggleEditBoard = () => {
  toggleEdit.value = !toggleEdit.value;
};
onMounted(() => {
  if (docId.value) {
    loadBoardDetails(
      docId.value,
      board,
      currentCollection,
      router,
      currentBoardRouteName,
      userRole
    );
  }
});
watch(docId, (newId) => {
  if (!newId) return;
  loadBoardDetails(
    newId,
    board,
    currentCollection,
    router,
    currentBoardRouteName,
    userRole
  );
});
</script>

<style scoped>
.board {
  word-wrap: break-word;
}
</style>
