<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
const store = useStore()
const { $connectWebSocket, $subscribe } = useNuxtApp()
const { dealer } = store
const notes = ref([])
const isLoading = ref(true)

function navigateTo(productId) {
  if (!productId) return
  window.dispatchEvent(new CustomEvent('navigateToProduct', { detail: { productId } }))
}

function handleWsMessageForNotes({ detail: response }) {
  if (response.type !== 'realtime_update') return
  const { name, change_type, record } = response.payload;
  if (name.toLowerCase() !== 'product_note') return;
  
  if (dealer?.id && record.ref__cart__dealer !== dealer.id) {
    return;
  }
  
  let newNotes = [...notes.value]
  const existingNoteIndex = newNotes.findIndex(n => n.id === record.id)
  
  if (change_type === 'created') {
    if (existingNoteIndex === -1) {
      newNotes.push(record)
    }
  } else if (change_type === 'updated') {
    if (existingNoteIndex > -1) {
      newNotes[existingNoteIndex] = { ...newNotes[existingNoteIndex], ...record }
    }
  } else if (change_type === 'deleted') {
    if (existingNoteIndex > -1) {
      newNotes.splice(existingNoteIndex, 1)
    }
  }
  
  notes.value = newNotes.sort((a, b) => new Date(b.create_time) - new Date(a.create_time));
}

onMounted(() => {
  $connectWebSocket();
  const filter = dealer?.id ? { ref__cart__dealer: dealer.id } : undefined;
  
  $subscribe('productnote', filter, (initialData) => {
    if (initialData && initialData.rows) {
      notes.value = initialData.rows.sort((a, b) => new Date(b.create_time) - new Date(a.create_time));
    }
    isLoading.value = false;
  });
  
  window.addEventListener('ws_message', handleWsMessageForNotes);
});

onUnmounted(() => {
  window.removeEventListener('ws_message', handleWsMessageForNotes);
});
</script>
<template>
  <div class="is-flex is-flex-direction-column has-background-white" style="height: 100%; overflow: hidden;">
    <!-- Loading -->
    <div v-if="isLoading" class="is-flex is-flex-grow-1 is-justify-content-center is-align-items-center p-5">
      <div class="has-text-centered">
        <progress class="progress is-info" max="100" style="width: 100px;"></progress>
        <p class="has-text-grey is-size-7 mt-2">Đang tải...</p>
      </div>
    </div>

    <!-- Empty -->
    <div v-else-if="notes.length === 0" class="is-flex is-flex-grow-1 is-justify-content-center is-align-items-center p-5">
      <p class="has-text-grey-light is-size-7">Chưa có ghi chú</p>
    </div>

    <!-- Notes Table -->
    <div v-else class="is-flex-grow-1" style="overflow-y: auto; overflow-x: hidden; min-height: 0;">
      <table class="table is-fullwidth is-hoverable is-narrow is-size-7 mb-0">
        <thead style="position: sticky; top: 0px;">
          <tr>
            <th>Sản phẩm</th>
            <th>Nội dung</th>
            <th style="min-width: max-content; text-wrap: nowrap">Người tạo</th>
            <th class="has-text-right">Thời gian</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="note in notes" :key="note.id" class="is-clickable" @click="navigateTo(note.ref)">
            <td>
              <span class="tag is-link is-light is-small">{{ note.ref__trade_code }}</span>
            </td>
            <td style="white-space: pre-wrap; word-break: break-word;">{{ note.detail }}</td>
            <td>{{ note.username || note.user__username }}</td>
            <td class="has-text-right" style="white-space: nowrap;">
              {{ new Date(note.create_time).toLocaleString('vi-VN') }}
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>
<style>
#noteHistory.docking-panel {
  left: 10px;
  top: 10px;
  width: 450px;
  height: 400px;
  resize: both;
  overflow: hidden;

  .docking-panel-title {
    font-size: 16px;
    font-weight: 600;
    border-bottom: none;
    text-transform: none;
    flex-shrink: 0;
  }

  .docking-panel-scroll {
    overflow-y: auto;
    overflow-x: hidden;
    margin-bottom: 20px;
    flex-grow: 1;
    min-height: 0;
    padding: 0;
    display: flex;
    flex-direction: column;

    .table.is-narrow td, .table.is-narrow th {
      padding: 0.5em;
    }
  }
}
</style>