<template>
  <section class="flex h-full min-h-0 flex-col overflow-hidden pt-8">
    <div class="flex gap-10 justify-center items-center bg-primary-500 rounded-md text-white py-5 text-[20px]">
      <p><span class="font-semibold uppercase">RTT à la date du jour :</span> {{ formatDays(summary?.availableMinutes ?? 0) }}</p>
        <button class="bg-white rounded-md text-primary-500 font-bold px-6 py-1">
            <Icon name="mdi:plus-thick" size="16"/>
            Payer les RTT
        </button>
    </div>
    <div class="mt-8 min-h-0 flex-1 overflow-y-auto pr-2">
      <div class="grid grid-cols-4 gap-10 pb-4">
        <div
          v-for="month in months"
          :key="month.month"
          class="rounded-md bg-tertiary-500 text-primary-500"
        >
          <div class="flex justify-center rounded-t-md bg-primary-500 py-3 font-bold text-white text-[18px]">
            {{ month.label }}
          </div>
          <div class="grid grid-cols-[60%_40%] text-[18px] border border-primary-500">
            <template v-for="week in month.weeks" :key="week.key">
              <div class="py-[6px] pl-3 border-r border-b border-primary-500">
                <span v-if="week.isEmpty">&nbsp;</span>
                <span v-else>Semaine {{ week.weekNumber }}</span>
              </div>
              <div class="py-[6px] pl-3 border-b border-primary-500">
                <span v-if="week.isEmpty">&nbsp;</span>
                <span v-else>{{ formatMinutes(week.recoveryMinutes) }}</span>
              </div>
            </template>
            <div class="py-[6px] pl-3 border-r border-b border-primary-500 font-semibold">Total</div>
            <div class="py-[6px] pl-3 border-b border-primary-500 font-semibold">{{ formatMinutes(month.totalMinutes) }}</div>
            <div class="py-[6px] pl-3 border-r border-primary-500">Heure payée</div>
            <div class="py-[6px] pl-3">0h</div>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup lang="ts">
import type { EmployeeRttSummary } from '~/services/dto/employee-rtt-summary'

const props = defineProps<{
  summary: EmployeeRttSummary | null
}>()

const monthLabels = [
  'Janvier',
  'Fevrier',
  'Mars',
  'Avril',
  'Mai',
  'Juin',
  'Juillet',
  'Aout',
  'Septembre',
  'Octobre',
  'Novembre',
  'Decembre'
] as const

const months = computed(() => {
  type DisplayWeek = {
    key: string
    weekNumber: number
    recoveryMinutes: number
    isEmpty?: boolean
  }

  const byMonth = new Map<number, { month: number; label: string; weeks: DisplayWeek[]; totalMinutes: number }>()
  const orderedMonths = [6, 7, 8, 9, 10, 11, 12, 1, 2, 3, 4, 5]
  for (const month of orderedMonths) {
    byMonth.set(month, {
      month,
      label: monthLabels[month - 1],
      weeks: [],
      totalMinutes: 0
    })
  }

  for (const week of props.summary?.weeks ?? []) {
    const month = byMonth.get(week.month)
    if (!month) continue

    month.weeks.push({
      key: week.weekStart,
      weekNumber: week.weekNumber,
      recoveryMinutes: week.recoveryMinutes
    })
    month.totalMinutes += week.recoveryMinutes
  }

  return orderedMonths
    .map((monthNumber) => byMonth.get(monthNumber)!)
    .filter(Boolean)
    .map((month) => {
      const minRows = 5
      const missing = Math.max(0, minRows - month.weeks.length)
      for (let i = 0; i < missing; i += 1) {
        month.weeks.push({
          key: `empty-${month.month}-${i}`,
          weekNumber: 0,
          recoveryMinutes: 0,
          isEmpty: true
        })
      }
      return month
    })
})

const formatMinutes = (minutes: number) => {
  const abs = Math.abs(minutes)
  const hours = Math.floor(abs / 60)
  const rest = abs % 60
  const sign = minutes < 0 ? '-' : ''
  return `${sign}${hours}h${rest.toString().padStart(2, '0')}`
}

const formatDays = (minutes: number) => {
  const days = minutes / 420
  const sign = days < 0 ? '-' : ''
  return `${sign}${Math.abs(days).toFixed(2)} j`
}
</script>
