<template>
  <div>
    <VCard class="">
      <VuetifyTiptap v-model="content" />
    </VCard>
  </div>
</template>

<script setup lang="ts">
const props = defineProps({
  initialContent: String,
});

const content = ref("");

onMounted(() => {
  content.value = props.initialContent;
});

watch(
  () => props.initialContent,
  (newVal) => {
    content.value = newVal;
  },
);

watch(
  () => content.value,
  (newVal) => {
    updateContent();
  },
);

const emit = defineEmits(["content-updated"]);

const updateContent = () => {
  emit("content-updated", content.value);
};
</script>

<style scoped>
/deep/ .vuetify-pro-tiptap-editor__content {
  padding: 15px;
}

/* Table styles with strong visible borders */
:deep(.vuetify-pro-tiptap-editor__content table),
:deep(.ProseMirror table),
/deep/ .vuetify-pro-tiptap-editor__content table,
/deep/ .ProseMirror table {
  border-collapse: collapse;
  border-spacing: 0;
  border: 2px solid #333333 !important;
  width: 100%;
  margin: 16px 0;
  background-color: #ffffff;
  display: table !important;
  font-size: 14px;
}

/* Cell borders - very visible */
:deep(.vuetify-pro-tiptap-editor__content table th),
:deep(.vuetify-pro-tiptap-editor__content table td),
:deep(.ProseMirror table th),
:deep(.ProseMirror table td),
/deep/ .vuetify-pro-tiptap-editor__content table th,
/deep/ .vuetify-pro-tiptap-editor__content table td,
/deep/ .ProseMirror table th,
/deep/ .ProseMirror table td {
  border: 1px solid #333333 !important;
  padding: 8px 12px;
  text-align: left;
  vertical-align: top;
  min-width: 100px;
  box-sizing: border-box;
}

/* Header styling */
:deep(.vuetify-pro-tiptap-editor__content table th),
:deep(.ProseMirror table th),
/deep/ .vuetify-pro-tiptap-editor__content table th,
/deep/ .ProseMirror table th {
  font-weight: 600;
  background-color: #f0f0f0;
  color: #000000;
  border-bottom: 2px solid #333333 !important;
}

/* Regular cells */
:deep(.vuetify-pro-tiptap-editor__content table td),
:deep(.ProseMirror table td),
/deep/ .vuetify-pro-tiptap-editor__content table td,
/deep/ .ProseMirror table td {
  background-color: #ffffff;
}

/* Alternating row colors */
:deep(.vuetify-pro-tiptap-editor__content table tr:nth-child(2n) td),
:deep(.ProseMirror table tr:nth-child(2n) td),
/deep/ .vuetify-pro-tiptap-editor__content table tr:nth-child(2n) td,
/deep/ .ProseMirror table tr:nth-child(2n) td {
  background-color: #f8f8f8;
}

/* Hover effects */
:deep(.vuetify-pro-tiptap-editor__content table tr:hover td),
:deep(.ProseMirror table tr:hover td),
/deep/ .vuetify-pro-tiptap-editor__content table tr:hover td,
/deep/ .ProseMirror table tr:hover td {
  background-color: #e6f3ff !important;
}
</style>
