<!-- src/pages/customer/profile/profile/CustomerComments.vue -->
<template>
  <div class="card-glass">
    <div class="card-body p-4 sm:p-6">
      <h2 class="card-title flex items-center gap-2">
        <div class="w-8 h-8 rounded-lg bg-accent/10 flex items-center justify-center">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-4 h-4 text-accent">
            <path stroke-linecap="round" stroke-linejoin="round" d="M7.5 8.25h9m-9 3H12m-9.75 1.51c0 1.6 1.123 2.994 2.707 3.227 1.129.166 2.27.293 3.423.379.35.026.67.21.865.501L12 21l2.755-4.133a1.14 1.14 0 01.865-.501 48.172 48.172 0 003.423-.379c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0012 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018z" />
          </svg>
        </div>
        Comments & Notes
      </h2>

      <!-- Styled Form for Adding a New Comment -->
      <form class="mt-4" @submit.prevent="handleSubmit">
        <div class="form-control">
          <textarea v-model="commentText" class="textarea textarea-bordered" rows="3" placeholder="Add a new note..."></textarea>
          <button type="submit" class="btn btn-primary btn-sm mt-2 self-end">Post Comment</button>
        </div>
      </form>

      <div class="divider"></div>

      <!-- Styled List of Existing Comments -->
      <div class="mt-2 space-y-4">
        <div v-if="comments.length === 0" class="text-center text-sm opacity-60 py-4">
          No comments yet.
        </div>
        <div v-else v-for="comment in comments" :key="comment.id" class="bg-base-200 rounded-lg p-3">
          <div class="flex justify-between items-center text-xs opacity-70">
            <!-- You can display the user/employee who posted it here if you have the data -->
            <span class="font-semibold">{{ comment.created }}</span>
            <button @click="$emit('delete-comment', comment.id)" class="btn btn-ghost btn-xs text-error">Delete</button>
          </div>
          <p class="mt-2 text-sm whitespace-pre-wrap">{{ comment.comment }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

interface Comment {
  id: number;
  created: string;
  comment: string;
}

interface Props {
  comments: Comment[];
}

defineProps<Props>();

const emit = defineEmits(['add-comment', 'delete-comment']);

const commentText = ref('');

const handleSubmit = () => {
  if (commentText.value.trim()) {
    emit('add-comment', commentText.value);
    commentText.value = ''; // Clear the textarea after submission
  }
};
</script>