<script setup>
import { computed } from "vue";
import BaseAlert from "../../../components/base/BaseAlert.vue";
import { weekdayKeyFromMonday } from "../composables/useHourWeekNavigate.js";
import strings from "../strings.js";

const props = defineProps({
  selectedIsoDate: { type: String, required: true },
  weekMondayIso: { type: String, required: true },
  lines: {
    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 [];
  }

  const rows = [...props.lines];

  return rows
    .map((line) => {
      const durations = 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) {
  switch (line.registration_type) {
    case "internal": {
      const c = props.registry.internalCategories?.find((x) => Number(x.id) === Number(line.internal_category_id));
      return c ? `Internal — ${c.name}` : `Internal (${line.internal_category_id})`;
    }
    case "customer": {
      const c = props.registry.customers?.find((x) => Number(x.id) === Number(line.customer_id));
      return c ? `Customer — ${c.name}` : `Customer (#${line.customer_id})`;
    }
    case "project": {
      const p = props.registry.projects?.find((x) => Number(x.id) === Number(line.hour_project_id));
      return p ? `Project — ${p.name}` : `Project (#${line.hour_project_id})`;
    }
    case "task": {
      const t = line._taskPickList?.find((x) => Number(x.id) === Number(line.hour_task_id));
      const name = t?.title ?? `#${line.hour_task_id}`;
      return `Task — ${name}`;
    }
    default:
      return line.registration_type ?? "Row";
  }
}

function approvalBadgeClass(status) {
  if (status === "approved") return "bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300";
  if (status === "rejected") return "bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-300";
  if (status === "submitted") return "bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300";
  return "bg-surface-100 text-surface-600 dark:bg-surface-700 dark:text-surface-400";
}
</script>

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

    <div
      v-else-if="entries.length === 0"
      class="flex flex-col items-center justify-center gap-3 py-12 text-center"
    >
      <div class="w-12 h-12 rounded-full bg-surface-100 dark:bg-surface-800 flex items-center justify-center" aria-hidden="true">
        <i class="pi pi-history text-surface-400 text-lg" />
      </div>
      <p class="text-base font-medium text-surface-700 dark:text-surface-200 m-0">
        {{ strings.dayEmptyTitle }}
      </p>
      <p class="text-sm text-surface-500 dark:text-surface-400 max-w-sm 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 rounded-xl border border-surface-100 dark:border-surface-800 bg-surface-50/50 dark:bg-surface-800/30 hover:border-surface-200 dark:hover:border-surface-700 transition-colors"
      >
        <div class="min-w-0 flex-1">
          <div class="font-semibold text-surface-900 dark:text-surface-50 text-sm">
            {{ 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="mt-2">
            <span
              class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium"
              :class="approvalBadgeClass(line.line_approval_status)"
            >
              {{ line.line_approval_status ?? "—" }}
            </span>
          </div>
        </div>
        <div class="font-bold text-primary-600 dark:text-primary-400 text-xl shrink-0 tabular-nums">
          {{ h }}<span class="text-sm font-normal text-surface-400 ml-0.5">h</span>
        </div>
      </li>
    </ul>
  </div>
</template>
