<template>
  <div class="flex flex-col h-full">
    <!-- Notes History (Top) -->
    <div class="flex-1 overflow-y-auto p-4 space-y-3">
      <div v-if="notes.length === 0" class="flex flex-col items-center justify-center h-full text-muted-foreground">
        <MessageSquarePlus class="h-10 w-10 mb-2 opacity-50" />
        <p class="text-sm">No notes yet for this asset's tasks.</p>
      </div>

      <div
        v-for="note in notes"
        :key="note.id"
        class="border rounded-lg p-4 space-y-2 hover:bg-muted/50 transition-colors"
      >
        <!-- Note Header -->
        <div class="flex items-start justify-between gap-2">
          <div class="flex-1 min-w-0">
            <div class="flex items-center gap-2 flex-wrap">
              <span class="text-sm font-medium">{{ note.author_name }}</span>
              <Badge variant="outline" class="text-xs">
                {{ formatTaskType(note.task_type) }}
              </Badge>
            </div>
            <p class="text-xs text-muted-foreground mt-1">
              {{ note.task_name }} • {{ formatDate(note.created_at) }}
            </p>
          </div>
        </div>

        <!-- Note Content -->
        <p class="text-sm whitespace-pre-wrap">{{ note.content }}</p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { MessageSquarePlus } from 'lucide-vue-next'
import { Badge } from '@/components/ui/badge'

const props = defineProps<{
  assetId: number
  notes: any[]
}>()

const emit = defineEmits<{
  notesUpdated: []
}>()

function formatTaskType(taskType: string): string {
  return taskType.split('_').map(word => 
    word.charAt(0).toUpperCase() + word.slice(1)
  ).join(' ')
}

function formatDate(dateString: string): string {
  const date = new Date(dateString)
  return date.toLocaleDateString('en-US', { 
    month: 'short', 
    day: 'numeric', 
    year: 'numeric',
    hour: '2-digit',
    minute: '2-digit'
  })
}
</script>
