<script lang="ts">
    /**
     * Toast Container
     * Displays toast notifications with responsive positioning.
     * Mobile: bottom-center, Desktop: top-right
     */
    import { toasts, removeToast, type Toast } from "../lib/toast"
    import { portal } from "../lib/actions/portal"

    function getToastClasses(type: Toast["type"]): string {
        const base = "flex items-center gap-3 px-4 py-3 rounded-lg shadow-lg"

        switch (type) {
            case "success":
                return `${base} bg-green-600 text-white`
            case "error":
                return `${base} bg-red-600 text-white`
            case "warning":
                return `${base} bg-amber-500 text-white`
            case "info":
            default:
                return `${base} bg-gray-800 text-white`
        }
    }

    function getIcon(type: Toast["type"]): string {
        switch (type) {
            case "success":
                return "M9 12.75 11.25 15 15 9.75"
            case "error":
                return "M6 6L18 18M6 18L18 6"
            case "warning":
                return "M12 9v3.75m0 3v.008"
            case "info":
            default:
                return "M12 9v3.75m0 3v.008"
        }
    }
</script>

{#if $toasts.length > 0}
    <!-- Desktop: top-right -->
    <div
        use:portal
        class="fixed top-4 right-4 z-50 flex-col gap-2 max-w-sm w-full hidden md:flex"
        role="region"
        aria-label="Notifications"
        aria-live="polite"
    >
        {#each $toasts as t (t.id)}
            <div class={getToastClasses(t.type)} role="alert">
                <svg class="w-5 h-5 shrink-0" viewBox="0 0 24 24" fill="none" aria-hidden="true">
                    <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="1.5"></circle>
                    <path
                        d={getIcon(t.type)}
                        stroke="currentColor"
                        stroke-width="2"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                    ></path>
                </svg>
                <p class="text-sm flex-1">{t.message}</p>
                <button
                    onclick={() => removeToast(t.id)}
                    class="shrink-0 p-1 hover:bg-white/20 rounded transition-colors"
                    aria-label="Close"
                >
                    <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" aria-hidden="true">
                        <path d="M6 6L18 18M6 18L18 6" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                        ></path>
                    </svg>
                </button>
            </div>
        {/each}
    </div>

    <!-- Mobile: bottom-center -->
    <div
        use:portal
        class="fixed bottom-20 left-4 right-4 z-50 flex flex-col gap-2 md:hidden"
        role="region"
        aria-label="Notifications"
        aria-live="polite"
    >
        {#each $toasts as t (t.id)}
            <div class={getToastClasses(t.type)} role="alert">
                <svg class="w-5 h-5 shrink-0" viewBox="0 0 24 24" fill="none" aria-hidden="true">
                    <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="1.5"></circle>
                    <path
                        d={getIcon(t.type)}
                        stroke="currentColor"
                        stroke-width="2"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                    ></path>
                </svg>
                <p class="text-sm flex-1">{t.message}</p>
                <button
                    onclick={() => removeToast(t.id)}
                    class="shrink-0 p-1 hover:bg-white/20 rounded transition-colors"
                    aria-label="Close"
                >
                    <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" aria-hidden="true">
                        <path d="M6 6L18 18M6 18L18 6" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                        ></path>
                    </svg>
                </button>
            </div>
        {/each}
    </div>
{/if}

<style>
    /* Toast entrance animation */
    div[role="alert"] {
        animation: slideIn 0.3s ease-out;
    }

    @keyframes slideIn {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* Mobile: slide up from bottom */
    :global(.md\:hidden) div[role="alert"] {
        animation: slideUp 0.3s ease-out;
    }

    @keyframes slideUp {
        from {
            opacity: 0;
            transform: translateY(10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
</style>
