<script lang="ts">
  import { loadHolidays } from '$lib/stores/capacity';
  import { createHoliday, deleteHoliday } from '$lib/api/capacity';
  import type { Holiday } from '$lib/types/capacity';

  export let month: string;
  export let holidays: Holiday[] = [];

  let form = {
    date: '',
    name: '',
    description: ''
  };
  let loading = false;
  let error: string | null = null;

  async function handleCreate(event: Event) {
    event.preventDefault();
    if (!form.date || !form.name) return;

    loading = true;
    error = null;

    try {
      await createHoliday(form);
      form = { date: '', name: '', description: '' };
      if (month) {
        await loadHolidays(month);
      }
    } catch (err) {
      console.error(err);
      error = 'Failed to add holiday.';
    } finally {
      loading = false;
    }
  }

  async function handleDelete(id: string) {
    loading = true;
    error = null;

    try {
      await deleteHoliday(id);
      if (month) {
        await loadHolidays(month);
      }
    } catch (err) {
      console.error(err);
      error = 'Unable to delete holiday.';
    } finally {
      loading = false;
    }
  }
</script>

<section class="space-y-4" data-testid="holiday-manager">
  <div class="flex items-center justify-between">
    <div>
      <p class="text-xs uppercase tracking-widest text-base-content/50">Holidays</p>
      <h2 class="text-lg font-semibold">{month || 'Select a month'}</h2>
    </div>
  </div>

  {#if error}
    <div class="alert alert-error text-sm">{error}</div>
  {/if}

  <form class="grid gap-3 border border-base-200 rounded-2xl bg-base-100 p-4 shadow-sm" on:submit|preventDefault={handleCreate}>
    <div class="grid gap-2 md:grid-cols-2">
      <div class="form-control">
        <label class="label text-xs">Date</label>
        <input
          type="date"
          class="input input-bordered"
          bind:value={form.date}
          required
        />
      </div>
      <div class="form-control">
        <label class="label text-xs">Name</label>
        <input
          type="text"
          class="input input-bordered"
          placeholder="Holiday name"
          bind:value={form.name}
          required
        />
      </div>
    </div>
    <div class="form-control">
      <label class="label text-xs">Description</label>
      <textarea
        class="textarea textarea-bordered"
        placeholder="Optional description"
        rows="2"
        bind:value={form.description}
      ></textarea>
    </div>
    <div class="text-right">
      <button class="btn btn-primary btn-sm" type="submit" disabled={loading}>
        {#if loading}
          <span class="loading loading-spinner loading-sm"></span>
        {/if}
        Add holiday
      </button>
    </div>
  </form>

  <div class="space-y-2">
    {#if holidays.length === 0}
      <p class="text-sm text-base-content/60">No holidays scheduled for this month.</p>
    {:else}
      <div class="space-y-2">
        {#each holidays as holiday}
          <div class="flex items-center justify-between rounded-xl border border-base-200 bg-base-100 px-4 py-3">
            <div>
              <p class="font-semibold">{new Date(holiday.date).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })} — {holiday.name}</p>
              {#if holiday.description}
                <p class="text-xs text-base-content/60">{holiday.description}</p>
              {/if}
            </div>
            <button
              class="btn btn-ghost btn-sm text-error"
              type="button"
              aria-label={`Delete ${holiday.name}`}
              on:click={() => handleDelete(holiday.id)}
            >
              Delete
            </button>
          </div>
        {/each}
      </div>
    {/if}
  </div>
</section>
