<script lang="ts">
  import { onMount } from 'svelte';

  let { 
    message, 
    type = 'error',
    duration = 50000,
    onDismiss 
  } = $props<{
    message: string;
    type?: 'error' | 'success' | 'warning' | 'info';
    duration?: number;
    onDismiss?: () => void;
  }>();

  let visible = $state(true);
  let timeoutId: ReturnType<typeof setTimeout>;

  // Auto-dismiss after specified duration
  onMount(() => {
    if (duration > 0) {
      timeoutId = setTimeout(() => {
        dismiss();
      }, duration);
    }

    // Cleanup timeout on component destroy
    return () => {
      if (timeoutId) {
        clearTimeout(timeoutId);
      }
    };
  });

  function dismiss() {
    visible = false;
    if (onDismiss) {
      onDismiss();
    }
  }

  // Get styles based on toast type
  const getToastStyles = (type: string) => {
    switch (type) {
      case 'success':
        return 'border-green-200 bg-green-50 text-green-800';
      case 'warning':
        return 'border-yellow-200 bg-yellow-50 text-yellow-800';
      case 'info':
        return 'border-blue-200 bg-blue-50 text-blue-800';
      case 'error':
      default:
        return 'border-red-200 bg-red-50 text-red-800';
    }
  };

  // Get icon based on toast type
  const getIcon = (type: string) => {
    switch (type) {
      case 'success':
        return '✓';
      case 'warning':
        return '⚠';
      case 'info':
        return 'ℹ';
      case 'error':
      default:
        return '✕';
    }
  };
</script>

{#if visible && message}
  <div 
    class="fixed top-4 left-4 z-50 max-w-sm rounded-lg border p-4 shadow-lg transition-all duration-300 ease-in-out {getToastStyles(type)}"
    role="alert"
    aria-live="polite"
  >
    <div class="flex items-start gap-3">
      <!-- Icon -->
      <div class="flex-shrink-0">
        <span class="text-lg font-semibold" aria-hidden="true">
          {getIcon(type)}
        </span>
      </div>
      
      <!-- Message -->
      <div class="flex-1">
        <p class="text-sm font-medium">
          {message}
        </p>
      </div>
      
      <!-- Close button -->
      <button
        onclick={dismiss}
        class="flex-shrink-0 ml-2 text-current opacity-70 hover:opacity-100 transition-opacity"
        aria-label="Dismiss notification"
      >
        <svg class="h-4 w-4" 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>
      </button>
    </div>
    
    <!-- Progress bar for auto-dismiss -->
    {#if duration > 0}
      <div class="mt-2 h-1 w-full bg-black bg-opacity-10 rounded-full overflow-hidden">
        <div 
          class="h-full bg-current opacity-30 transition-all ease-linear"
          style="animation: progress {duration}ms linear forwards;"
        ></div>
      </div>
    {/if}
  </div>
{/if}

<style>
  @keyframes progress {
    from {
      width: 100%;
    }
    to {
      width: 0%;
    }
  }
</style>
