<script setup>
import { computed } from "vue";
import Message from "primevue/message";
import { weekdayKeyFromMonday } from "../composables/useHourWeekNavigate.js";
import strings from "../strings.js";

const props = defineProps({
  selectedIsoDate: { type: String, required: true },
  /** Monday ISO covering this day */
  weekMondayIso: { type: String, required: true },
  lines: {
    /** @type {import('vue').PropType<Array<Record<string, unknown>>>} */
    type: Array,
    required: true,
  },
  registry: { type: Object, required: true },
});

const dowKey = computed(() => weekdayKeyFromMonday(props.weekMondayIso, props.selectedIsoDate));

const entries = computed(() => {
  const k = dowKey.value;
  if (!k) {
    return [];
  }

  /** @type {typeof props.lines} */
  const rows = [...props.lines];

  return rows
    .map((line) => {
      const durations = /** @type {Record<string, number>} */ (line?.durations ?? {});
      const h = typeof durations[k] === "number" ? durations[k] : Number(durations[k]) || 0;

      return { line, h };
    })
    .filter(({ h }) => h > 0)
    .sort((a, b) => b.h - a.h);
});

function resolveLabel(line) {
  /** @typedef {typeof line & Record<string, unknown>} L */

  /** @type {L} */
  const ln = line;

  switch (ln.registration_type) {
    case "internal": {
      const c = props.registry.internalCategories?.find((x) => Number(x.id) === Number(ln.internal_category_id));

      return c ? `Internal — ${c.name}` : `Internal (${ln.internal_category_id})`;
    }
    case "customer": {
      const c = props.registry.customers?.find((x) => Number(x.id) === Number(ln.customer_id));

      return c ? `Customer — ${c.name}` : `Customer (#${ln.customer_id})`;
    }
    case "project": {
      const p = props.registry.projects?.find((x) => Number(x.id) === Number(ln.hour_project_id));

      return p ? `Project — ${p.name}` : `Project (#${ln.hour_project_id})`;
    }
    case "task": {
      const t = ln._taskPickList?.find((x) => Number(x.id) === Number(ln.hour_task_id));
      const name = t?.title ?? `#${ln.hour_task_id}`;

      return `Task — ${name}`;
    }

    default:
      return ln.registration_type ?? "Row";
  }
}
</script>

<template>
  <div class="surface-card border-round-xl border border-surface-200 dark:border-surface-700 p-4 min-h-[16rem]">
    <template v-if="!dowKey">
      <Message severity="warn" :closable="false">{{ selectedIsoDate }} is outside the loaded Monday–Sunday week.</Message>
    </template>

    <div v-else-if="entries.length === 0" class="flex flex-col items-center justify-center gap-3 py-10 text-center text-muted-color">
      <div class="text-6xl text-primary opacity-40" aria-hidden="true">
        <i class="pi pi-history" />
      </div>
      <p class="text-lg font-medium text-surface-700 dark:text-surface-200 m-0">
        {{ strings.dayEmptyTitle }}
      </p>
      <p class="text-sm max-w-lg m-0">
        {{ strings.dayEmptyHint }}
      </p>
    </div>

    <ul v-else class="list-none m-0 p-0 flex flex-col gap-2">
      <li
        v-for="({ line, h }, ix) in entries"
        :key="String(line.id ?? 'rn-' + ix)"
        class="flex flex-wrap items-start justify-between gap-3 px-4 py-3 border border-surface-200 dark:border-surface-700 border-round-lg bg-surface-0 dark:bg-surface-950"
      >
        <div class="min-w-0">
          <div class="font-semibold text-surface-900 dark:text-surface-50">
            {{ resolveLabel(line) }}
          </div>
          <div v-if="(line.description ?? '').trim().length > 0" class="text-sm text-surface-600 dark:text-surface-400 mt-1 whitespace-pre-wrap">
            {{ line.description }}
          </div>
          <div class="text-xs text-muted-color mt-2">
            {{ strings.approvalStatus }} · {{ line.line_approval_status }}
          </div>
        </div>
        <div class="font-semibold text-primary text-xl shrink-0">
          {{ h }}
          <span class="text-sm font-normal text-muted-color">h</span>
        </div>
      </li>
    </ul>
  </div>
</template>
