<script setup>
import { computed } from "vue";
import BaseDataTable from "../../../components/base/BaseDataTable.vue";
import BaseColumn from "../../../components/base/BaseColumn.vue";
import BaseStatusBadge from "../../../components/base/BaseStatusBadge.vue";
import strings from "../strings.js";
import { WEEKDAYS as WEEKDAY_KEYS } from "../composables/useHoursApi.js";
import { addCalendarDaysIso } from "../composables/useHourWeekNavigate.js";

const APPROVAL_BADGES = {
  approved: { label: "Approved", class: "bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300" },
  rejected: { label: "Rejected", class: "bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300" },
  submitted: { label: "Submitted", class: "bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300" },
  pending: { label: "Pending", class: "bg-surface-100 text-surface-600 dark:bg-surface-700 dark:text-surface-300" },
};

const props = defineProps({
  weekMondayIso: { type: String, required: true },
  lines: {
    type: Array,
    required: true,
  },
  registry: { type: Object, required: true },
});

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 ? `${strings.quickInternal}: ${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 ? `${strings.quickCustomer}: ${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 ? `${strings.quickProject}: ${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 `${strings.quickTask}: ${name}`;
    }
    default:
      return `${line.registration_type}`;
  }
}

const rows = computed(() => {
  const out = [];

  props.lines.forEach((line, lnIx) => {
    WEEKDAY_KEYS.forEach((d, ix) => {
      const iso = addCalendarDaysIso(props.weekMondayIso, ix);
      const durations = line?.durations ?? {};
      const hrs = typeof durations[d] === "number" ? durations[d] : Number(durations[d]) || 0;

      if (hrs <= 0) return;

      out.push({
        id: `${String(line?.id ?? "n-" + lnIx)}-${d}`,
        date: iso,
        target: resolveLabel(line),
        hours: hrs,
        description: String(line.description ?? ""),
        status: String(line.line_approval_status ?? "pending"),
      });
    });
  });

  out.sort((a, b) => (a.date < b.date ? -1 : a.date > b.date ? 1 : 0));

  return out;
});
</script>

<template>
  <div class="rounded-xl border border-surface-200 dark:border-surface-700 bg-surface-0 dark:bg-surface-900 overflow-hidden">
    <BaseDataTable :value="rows" size="small" class="text-sm">
      <BaseColumn field="date" header="Date" sortable />
      <BaseColumn field="target" :header="strings.targetLabel" />
      <BaseColumn field="hours" header="Hours" sortable>
        <template #body="{ data }">
          <span class="font-semibold text-primary-600 dark:text-primary-400 tabular-nums">
            {{ data.hours }}<span class="text-xs font-normal text-surface-400 ml-0.5">h</span>
          </span>
        </template>
      </BaseColumn>
      <BaseColumn field="description" :header="strings.quickDescription" />
      <BaseColumn field="status" :header="strings.approvalStatus">
        <template #body="{ data }">
          <BaseStatusBadge :value="data.status" :value-map="APPROVAL_BADGES" />
        </template>
      </BaseColumn>
      <template #empty>No entries logged this week.</template>
    </BaseDataTable>
  </div>
</template>
