<script lang="ts">
  import { Button } from "$lib/components/ui/button/index.js";
  import { rota, steps } from "../../state.svelte.js";

  function getResidentName(day: number, slot: number) {
    const assignedResidents = rota.residents.filter((resident) =>
      resident.manualShifts.some(
        (shift) =>
          shift.day === day &&
          shift.month === rota.selectedMonth &&
          shift.year === rota.selectedYear
      )
    );

    const resident = assignedResidents[slot - 1];
    return resident ? resident.name : "-";
  }

  // 2 slots in odd days, 1 slot in even days
  function getRequiredSlots(day: number) {
    return day % 2 === 0 ? 1 : 2;
  }
</script>

<div class="mb-6 flex items-center justify-between">
  <h2 class="text-2xl font-bold text-zinc-800">{steps[rota.currentStep - 1].title}</h2>
  <div class="justify-end">
    <Button
      onclick={() => (rota.currentStep -= 1)}
      variant="outline"
      class="border-zinc-200 bg-white text-zinc-600 shadow-sm transition-all hover:bg-zinc-50 hover:text-zinc-900 active:scale-95"
    >
      Προηγούμενο
    </Button>

    <Button
      onclick={() => (rota.currentStep += 1)}
      variant="outline"
      class="border-zinc-200 bg-white text-zinc-600 shadow-sm transition-all hover:bg-zinc-50 hover:text-zinc-900 active:scale-95"
    >
      Επόμενο
    </Button>
  </div>
</div>

<header class="mb-2">
  <p class="text-sm text-zinc-500">{steps[rota.currentStep - 1].description}</p>
</header>

<div class="overflow-hidden rounded-xl border border-zinc-200 bg-white">
  <div class="grid grid-cols-7 border-b border-zinc-200 bg-zinc-50/50">
    {#each ["ΔΕΥΤΕΡΑ", "ΤΡΙΤΗ", "ΤΕΤΑΡΤΗ", "ΠΕΜΠΤΗ", "ΠΑΡΑΣΚΕΥΗ", "ΣΑΒΒΑΤΟ", "ΚΥΡΙΑΚΗ"] as dayName}
      <div class="py-2 text-center text-[10px] font-bold tracking-widest text-zinc-500 uppercase">
        {dayName}
      </div>
    {/each}
  </div>
  <div class="grid auto-rows-fr grid-cols-7 gap-px bg-zinc-200">
    {#each rota.emptySlots as _}<div class="bg-zinc-50/30"></div>{/each}
    {#each rota.daysArray as day (day)}
      {@const slotCount = getRequiredSlots(day)}
      <div class="group min-h-25 bg-white p-2 transition-all hover:bg-blue-50/30">
        <div class="mb-2 flex items-center justify-between">
          <span class="text-xs font-black text-zinc-500">{day}</span>
        </div>

        <div class="space-y-1">
          {#if slotCount > 0}
            <button
              onclick={() => "handleCellClick(day, 1)"}
              class="w-full overflow-hidden rounded border border-pink-200 bg-pink-50 px-1.5 py-1 text-left text-[10px] font-bold text-pink-600 transition-colors hover:bg-pink-100"
            >
              {getResidentName(day, 1)}
            </button>
          {/if}
          {#if slotCount == 2}
            <button
              onclick={() => "handleCellClick(day, 2)"}
              class="w-full overflow-hidden rounded border border-emerald-200 bg-emerald-50 px-1.5 py-1 text-left text-[10px] font-bold text-emerald-600 transition-colors hover:bg-emerald-100"
            >
              {getResidentName(day, 2)}
            </button>
          {/if}
        </div>
      </div>
    {/each}
  </div>
</div>
