<!-- src/lib/components/DienststellenDialog.svelte -->
<script lang="ts">
  import { createEventDispatcher } from 'svelte';
  
  const dispatch = createEventDispatcher<{
    confirm: { dienststelleId: number };
    cancel: void;
  }>();

  interface Wish {
    id: number;
    name: string;
  }

  export let wishes: Wish[];
  export let selectedId: number | null;

  let isLoading = false;

  function handleConfirm() {
    if (selectedId !== null) {
      isLoading = true;
      dispatch('confirm', { dienststelleId: selectedId });
    }
  }

  function handleCancel() {
    dispatch('cancel');
  }

  function handleBackdropClick(event: MouseEvent) {
    if (event.target === event.currentTarget) {
      handleCancel();
    }
  }

  function handleBackdropKeydown(event: KeyboardEvent) {
    if (event.key === 'Escape') {
      handleCancel();
    }
  }
</script>

<div 
  class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50 flex items-center justify-center p-4"
  on:click={handleBackdropClick}
  on:keydown={handleBackdropKeydown}
  role="dialog"
  aria-modal="true"
  aria-labelledby="modal-title"
  tabindex="0"
>
  <!-- Modal Content -->
  <div class="relative bg-white rounded-lg shadow-xl max-w-md w-full">
    <!-- Header -->
    <div class="flex items-start justify-between p-6 border-b border-gray-200 rounded-t">
      <h3 class="text-lg font-semibold text-gray-900" id="modal-title">
        Dienststelle für Praktikum auswählen
      </h3>
      <button
        type="button"
        class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ml-auto inline-flex justify-center items-center"
        on:click={handleCancel}
        disabled={isLoading}
      >
        <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
        </svg>
        <span class="sr-only">Modal schließen</span>
      </button>
    </div>

    <!-- Body -->
    <div class="p-6">
      <p class="text-sm text-gray-600 mb-4">
        Wählen Sie eine der Wunsch-Dienststellen für diese Anmeldung aus:
      </p>

      <div class="space-y-3">
        {#each wishes as wish}
          <label class="flex items-center p-3 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer">
            <input
              type="radio"
              bind:group={selectedId}
              value={wish.id}
              disabled={isLoading}
              class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300"
            />
            <span class="ml-3 text-sm font-medium text-gray-900">
              {wish.name}
            </span>
          </label>
        {/each}
      </div>

      {#if wishes.length === 0}
        <div class="text-center py-4">
          <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z" />
          </svg>
          <p class="mt-2 text-sm text-gray-500">Keine Wünsche verfügbar</p>
        </div>
      {/if}
    </div>

    <!-- Footer -->
    <div class="flex items-center justify-end space-x-3 p-6 border-t border-gray-200 rounded-b">
      <button
        type="button"
        on:click={handleCancel}
        disabled={isLoading}
        class="text-gray-500 bg-white hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-blue-300 rounded-lg border border-gray-200 text-sm font-medium px-5 py-2.5 hover:text-gray-900 focus:z-10 disabled:opacity-50 disabled:cursor-not-allowed"
      >
        Abbrechen
      </button>

      <button
        type="button"
        on:click={handleConfirm}
        disabled={selectedId === null || isLoading || wishes.length === 0}
        class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center disabled:opacity-50 disabled:cursor-not-allowed inline-flex items-center"
      >
        {#if isLoading}
          <svg class="animate-spin -ml-1 mr-2 h-4 w-4 text-white" fill="none" viewBox="0 0 24 24">
            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
          </svg>
          Wird zugewiesen...
        {:else}
          <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
          </svg>
          Praktikum zuweisen
        {/if}
      </button>
    </div>
  </div>
</div>