<script setup lang="ts">
import { isChatVisible } from "src/stores/dialogue-box";
import DialogueContent from "./dialogue-content.vue";
import { computed, onMounted, ref } from "vue";
import { useChatApi } from "../composables/chat-api";
import { useChatStore } from "src/stores/message-store";
import { useRoute } from "vue-router";
import { watch } from "vue";
import { chatbotService } from "../services/messageService";
import { pageContexts } from "src/page-contexts";
import type { contextObject } from "src/page-contexts/pages/types/context-object";

const isSessionReady = ref(false);

// Block to receive user from child
const userEmail = ref('')
const userRole = ref('')

const HandleEmail = (email: string) => {
  userEmail.value = email;
}

const HandleRole = (role: string) => {
  userRole.value = role;
}


// Block to enable editing the width of the drawer
const drawerWidth = ref(370);
let dragging = false
const startDrag = (e: MouseEvent) => {
  dragging = true
  e.preventDefault()
}

const onDrag = (e: MouseEvent) => {
  if (!dragging) return
  // calculate new width
  const newWidth = window.innerWidth - e.clientX
  drawerWidth.value = Math.max(350, Math.min(1000, newWidth)) // min/max width
}

const stopDrag = () => {
  dragging = false
}
window.addEventListener('mousemove', onDrag)
window.addEventListener('mouseup', stopDrag)

// Block to handle the incomming and sending of the messages from the user and the ai
const text = ref('');
const { messages } = useChatStore();
const { sendMessage } = useChatApi();

const chatStore = useChatStore();
onMounted(() => {
  chatStore.showInstructionsOnce();
})

const handleSend = async () => {
  const userMessage = text.value.trim();
  if (!userMessage)

    if (!isSessionReady.value) {
      console.warn("Session not ready yet. Please wait...");
      return;
    }

  text.value = '';
  messages.push({
    text: userMessage,
    sent: true,
    isThinking: false,
  })

  const thinkingMessage = {
    text: "Thinking...",
    sent: false,
    isThinking: true
  }
  messages.push(thinkingMessage)

  try {
    const aiResponse = await sendMessage(userMessage);

    const index = messages.indexOf(thinkingMessage);
    if (index !== -1) {
      messages.splice(index, 1, {
        text: aiResponse.text,
        sent: false,
        isThinking: false,
      })
    }
  }
  catch (error) {
    const index = messages.indexOf(thinkingMessage);
    if (index !== -1) {
      messages.splice(index, 1, {
        text: "Sorry, Message wasn't able to sent.",
        sent: false,
        isThinking: false,
      });
    }
    throw error;
  }
};


// Block to handle sending the url to n8n
const route = useRoute()
const sendPageContext = chatbotService.sendPageContext;
// Capture and send page context to n8n
const currentContext = computed(() =>
  pageContexts.find(ctx => ctx.path === route.fullPath.replace('/', ''))
)



watch([currentContext, userEmail, userRole], async ([ctx, email, role]) => {
  if (!ctx || !email || !role) return;
  if (isSessionReady.value) return;

  const contextPayload: contextObject = {
    name: ctx.name,
    description: ctx.description,
    features: ctx.features,
    path: ctx.path
  }

  try {
    await Promise.all([chatbotService.sendUserCredentials(email, role),
    sendPageContext(contextPayload),
    ]);
    isSessionReady.value = true;
  } catch (err) {
    console.error("Error", err)
  }
},
  { immediate: true }
);



</script>

<template>
  <q-drawer
    side="right"
    v-model="isChatVisible"
    class="chat-drawer"
    style="box-shadow: -4px 0 12px rgba(0,0,0,0.15);"
    :width="drawerWidth"
  >
    <div
      class="chat-header"
      style="text-align:start; padding: 10px 10px 0px;"
    >{{ $t('chatbot.chat_header') }}</div>
    <div class="line-separator"></div>

    <div class="chat-body">
      <DialogueContent
        @sendRole="HandleRole"
        @sendEmail="HandleEmail"
        :messages="messages"
      />
    </div>

    <div class="line-separator"></div>
    <q-form class="chat-footer row">
      <q-input
        v-model="text"
        :label="$t('chatbot.chat_placeholder')"
        :autogrow="false"
        class="col"
        style="margin-left: 8px;"
        @keyup.enter="handleSend"
      />
    </q-form>
    <div
      class="drag-handle"
      @mousedown.prevent="startDrag"
    ></div>
  </q-drawer>
</template>

<style scoped>
.drag-handle {
  position: absolute;
  top: 0;
  left: 0;
  width: 8px;
  height: 100%;
  cursor: ew-resize;
  z-index: 1000;
  background-color: rgba(0, 0, 0, 0);
}

.line-separator {
  height: 1px;
  background-color: #ccc;
  margin: 10px 0;
}

.chat-drawer {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Header at the top */
.chat-header {
  color: #019547;
  padding: 10px;
  font-weight: bold;
  flex-shrink: 0;
}

/* Scrollable middle */
.chat-body {
  flex: 1;
  padding: 10px;
  overflow-y: auto;
  height: 81%;
}
</style>
