<template>
  <MalioDrawer v-model="drawerOpen">
    <template #header>
      <h2 class="text-[32px] font-semibold text-primary-500">Commentaire</h2>
    </template>
    <form class="space-y-4" @submit.prevent="onSave">
      <div v-if="employeeLabel" class="text-md font-semibold text-neutral-700">{{ employeeLabel }}</div>
      <div class="text-md font-semibold text-neutral-700">{{ formatWeekRange }}</div>
      <MalioInputTextArea :reserve-message-space="false"
        v-model="content"
        label="Commentaire"
        :size="8"
        :max-length="5000"
        :show-counter="true"
        resize="vertical"
      />
      <div class="sticky bottom-0 -mx-[20px] bg-white px-[20px] py-3 flex gap-3">
        <MalioButton
          v-if="commentId"
          label="Supprimer"
          variant="danger"
          button-class="flex-1"
          :disabled="isSubmitting"
          @click="onDelete"
        />
        <MalioButton
          label="Enregistrer"
          button-class="flex-1"
          :disabled="isSubmitting || !canSubmit"
          @click="onSave"
        />
      </div>
    </form>
  </MalioDrawer>
</template>

<script setup lang="ts">
import { computed, ref, watch } from 'vue'
import { createWeekComment, deleteWeekComment, updateWeekComment } from '~/services/employee-week-comments'
import { getIsoWeekNumber, parseYmd } from '~/utils/date'

const props = defineProps<{
  modelValue: boolean
  employeeId: number | null
  weekStart: string
  weekEnd: string
  initialContent: string
  commentId: number | null
  employeeLabel?: string
}>()
const emit = defineEmits<{ (e: 'update:modelValue', v: boolean): void; (e: 'saved'): void }>()

const drawerOpen = computed({ get: () => props.modelValue, set: (v) => emit('update:modelValue', v) })
const content = ref('')
const isSubmitting = ref(false)

watch(() => [props.modelValue, props.initialContent] as const, ([open, init]) => { if (open) content.value = init ?? '' }, { immediate: true })

const formatWeekRange = computed(() => {
  const fmt = (ymd: string) => { const p = ymd.split('-'); return p.length === 3 ? `${p[2]}/${p[1]}/${p[0]}` : ymd }
  const start = parseYmd(props.weekStart)
  const weekLabel = start ? `S${getIsoWeekNumber(start)}` : ''
  return weekLabel ? `${weekLabel} du ${fmt(props.weekStart)} au ${fmt(props.weekEnd)}` : `${fmt(props.weekStart)} → ${fmt(props.weekEnd)}`
})

const canSubmit = computed(() => content.value.trim().length > 0 || props.commentId !== null)

const onSave = async () => {
  if (!props.employeeId || isSubmitting.value) return
  const trimmed = content.value.trim()
  isSubmitting.value = true
  try {
    if (trimmed === '' && props.commentId) await deleteWeekComment(props.commentId)
    else if (trimmed !== '' && props.commentId) await updateWeekComment(props.commentId, trimmed)
    else if (trimmed !== '') await createWeekComment({ employeeId: props.employeeId, weekStartDate: props.weekStart, content: trimmed })
    emit('saved'); drawerOpen.value = false
  } finally { isSubmitting.value = false }
}

const onDelete = async () => {
  if (!props.commentId || isSubmitting.value) return
  isSubmitting.value = true
  try { await deleteWeekComment(props.commentId); emit('saved'); drawerOpen.value = false } finally { isSubmitting.value = false }
}
</script>
