{#
  Modal Macros
  ============
  Reusable modal dialog components with Alpine.js integration.

  Usage:
    {% from 'shared/macros/modals.html' import modal, confirm_modal, form_modal %}

    {# Basic modal #}
    {% call modal('editModal', 'Edit User', 'isEditModalOpen') %}
      <p>Modal content here</p>
    {% endcall %}

    {# Confirmation modal #}
    {{ confirm_modal('deleteModal', 'Delete User', 'Are you sure?', 'deleteUser()', 'isDeleteModalOpen') }}

  Required Alpine.js:
    x-data="{ isModalOpen: false }"
#}


{#
  Modal
  =====
  A flexible modal dialog component.

  Parameters:
    - id: Unique modal ID
    - title: Modal title
    - show_var: Alpine.js variable controlling visibility (default: 'isModalOpen')
    - size: 'sm' | 'md' | 'lg' | 'xl' | 'full' (default: 'md')
    - show_close: Whether to show close button (default: true)
    - show_footer: Whether to show footer slot (default: true)
    - close_on_backdrop: Close when clicking backdrop (default: true)
    - close_on_escape: Close on Escape key (default: true)
#}
{% macro modal(id, title, show_var='isModalOpen', size='md', show_close=true, show_footer=true, close_on_backdrop=true, close_on_escape=true) %}
{% set sizes = {
    'sm': 'max-w-sm',
    'md': 'max-w-lg',
    'lg': 'max-w-2xl',
    'xl': 'max-w-4xl',
    'full': 'max-w-full mx-4'
} %}
<div
    x-show="{{ show_var }}"
    x-cloak
    {% if close_on_escape %}@keydown.escape.window="{{ show_var }} = false"{% endif %}
    class="fixed inset-0 z-50 overflow-y-auto"
    aria-labelledby="{{ id }}-title"
    role="dialog"
    aria-modal="true"
>
    {# Backdrop #}
    <div
        x-show="{{ show_var }}"
        x-transition:enter="ease-out duration-300"
        x-transition:enter-start="opacity-0"
        x-transition:enter-end="opacity-100"
        x-transition:leave="ease-in duration-200"
        x-transition:leave-start="opacity-100"
        x-transition:leave-end="opacity-0"
        class="fixed inset-0 bg-gray-500/50 dark:bg-gray-900/80 backdrop-blur-sm"
        {% if close_on_backdrop %}@click="{{ show_var }} = false"{% endif %}
    ></div>

    {# Modal Container #}
    <div class="flex min-h-full items-center justify-center p-4">
        <div
            x-show="{{ show_var }}"
            x-transition:enter="ease-out duration-300"
            x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
            x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
            x-transition:leave="ease-in duration-200"
            x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
            x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
            @click.stop
            class="relative w-full {{ sizes[size] }} bg-white dark:bg-gray-800 rounded-xl shadow-xl"
        >
            {# Header #}
            <div class="flex items-center justify-between px-6 py-4 border-b border-gray-200 dark:border-gray-700">
                <h3 id="{{ id }}-title" class="text-lg font-semibold text-gray-900 dark:text-white">
                    {{ title }}
                </h3>
                {% if show_close %}
                <button
                    @click="{{ show_var }} = false"
                    class="p-2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors"
                    aria-label="Close modal"
                >
                    <svg class="w-5 h-5" 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"></path>
                    </svg>
                </button>
                {% endif %}
            </div>

            {# Body #}
            <div class="px-6 py-4 max-h-[calc(100vh-200px)] overflow-y-auto">
                {{ caller() }}
            </div>

            {# Footer (optional) #}
            {% if show_footer %}
            <div class="flex items-center justify-end gap-3 px-6 py-4 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/50 rounded-b-xl">
                <button
                    @click="{{ show_var }} = false"
                    type="button"
                    class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors"
                >
                    Cancel
                </button>
                {{ caller_footer() if caller_footer is defined else '' }}
            </div>
            {% endif %}
        </div>
    </div>
</div>
{% endmacro %}


{#
  Modal Simple
  ============
  A simpler modal without the caller pattern - just pass content.

  Parameters:
    - id: Unique modal ID
    - title: Modal title
    - show_var: Alpine.js variable controlling visibility
    - size: Modal size
    - content: HTML content for the modal body
#}
{% macro modal_simple(id, title, show_var='isModalOpen', size='md') %}
{% set sizes = {
    'sm': 'max-w-sm',
    'md': 'max-w-lg',
    'lg': 'max-w-2xl',
    'xl': 'max-w-4xl'
} %}
<div
    x-show="{{ show_var }}"
    x-cloak
    @keydown.escape.window="{{ show_var }} = false"
    class="fixed inset-0 z-50 overflow-y-auto"
    role="dialog"
    aria-modal="true"
>
    <div
        x-show="{{ show_var }}"
        x-transition:enter="ease-out duration-300"
        x-transition:enter-start="opacity-0"
        x-transition:enter-end="opacity-100"
        x-transition:leave="ease-in duration-200"
        x-transition:leave-start="opacity-100"
        x-transition:leave-end="opacity-0"
        class="fixed inset-0 bg-gray-500/50 dark:bg-gray-900/80 backdrop-blur-sm"
        @click="{{ show_var }} = false"
    ></div>

    <div class="flex min-h-full items-center justify-center p-4">
        <div
            x-show="{{ show_var }}"
            x-transition:enter="ease-out duration-300"
            x-transition:enter-start="opacity-0 scale-95"
            x-transition:enter-end="opacity-100 scale-100"
            x-transition:leave="ease-in duration-200"
            x-transition:leave-start="opacity-100 scale-100"
            x-transition:leave-end="opacity-0 scale-95"
            @click.stop
            class="relative w-full {{ sizes[size] }} bg-white dark:bg-gray-800 rounded-xl shadow-xl"
        >
            <div class="flex items-center justify-between px-6 py-4 border-b border-gray-200 dark:border-gray-700">
                <h3 class="text-lg font-semibold text-gray-900 dark:text-white">{{ title }}</h3>
                <button
                    @click="{{ show_var }} = false"
                    class="p-2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors"
                >
                    <svg class="w-5 h-5" 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"></path>
                    </svg>
                </button>
            </div>
            <div class="px-6 py-4">
                {{ caller() }}
            </div>
        </div>
    </div>
</div>
{% endmacro %}


{#
  Confirm Modal
  =============
  A confirmation dialog for destructive actions.

  Parameters:
    - id: Unique modal ID
    - title: Modal title
    - message: Confirmation message
    - confirm_action: Alpine.js action to execute on confirm
    - show_var: Alpine.js variable controlling visibility
    - confirm_text: Confirm button text (default: 'Confirm')
    - cancel_text: Cancel button text (default: 'Cancel')
    - variant: 'danger' | 'warning' | 'info' (default: 'danger')
    - icon: Icon name (optional, auto-selected based on variant)
#}
{% macro confirm_modal(id, title, message, confirm_action, show_var='isConfirmModalOpen', confirm_text='Confirm', cancel_text='Cancel', variant='danger', icon=none) %}
{% set variants = {
    'danger': {
        'icon_bg': 'bg-red-100 dark:bg-red-900/30',
        'icon_color': 'text-red-600 dark:text-red-400',
        'btn_class': 'bg-red-600 hover:bg-red-700 focus:ring-red-500'
    },
    'warning': {
        'icon_bg': 'bg-yellow-100 dark:bg-yellow-900/30',
        'icon_color': 'text-yellow-600 dark:text-yellow-400',
        'btn_class': 'bg-yellow-600 hover:bg-yellow-700 focus:ring-yellow-500'
    },
    'info': {
        'icon_bg': 'bg-blue-100 dark:bg-blue-900/30',
        'icon_color': 'text-blue-600 dark:text-blue-400',
        'btn_class': 'bg-blue-600 hover:bg-blue-700 focus:ring-blue-500'
    }
} %}
{% set icons = {
    'danger': 'exclamation-triangle',
    'warning': 'exclamation',
    'info': 'information-circle'
} %}
{% set modal_icon = icon if icon else icons[variant] %}
{% set style = variants[variant] %}

<div
    x-show="{{ show_var }}"
    x-cloak
    @keydown.escape.window="{{ show_var }} = false"
    class="fixed inset-0 z-50 overflow-y-auto"
    role="dialog"
    aria-modal="true"
>
    <div
        x-show="{{ show_var }}"
        x-transition:enter="ease-out duration-300"
        x-transition:enter-start="opacity-0"
        x-transition:enter-end="opacity-100"
        x-transition:leave="ease-in duration-200"
        x-transition:leave-start="opacity-100"
        x-transition:leave-end="opacity-0"
        class="fixed inset-0 bg-gray-500/50 dark:bg-gray-900/80 backdrop-blur-sm"
        @click="{{ show_var }} = false"
    ></div>

    <div class="flex min-h-full items-center justify-center p-4">
        <div
            x-show="{{ show_var }}"
            x-transition:enter="ease-out duration-300"
            x-transition:enter-start="opacity-0 scale-95"
            x-transition:enter-end="opacity-100 scale-100"
            x-transition:leave="ease-in duration-200"
            x-transition:leave-start="opacity-100 scale-100"
            x-transition:leave-end="opacity-0 scale-95"
            @click.stop
            class="relative w-full max-w-md bg-white dark:bg-gray-800 rounded-xl shadow-xl p-6"
        >
            <div class="flex items-start">
                <div class="flex-shrink-0 flex items-center justify-center w-12 h-12 rounded-full {{ style.icon_bg }}">
                    <span x-html="$icon('{{ modal_icon }}', 'w-6 h-6 {{ style.icon_color }}')" class="{{ style.icon_color }}"></span>
                </div>
                <div class="ml-4 flex-1">
                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
                        {{ title }}
                    </h3>
                    <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
                        {{ message }}
                    </p>
                </div>
            </div>

            <div class="mt-6 flex justify-end gap-3">
                <button
                    @click="{{ show_var }} = false"
                    type="button"
                    class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors"
                >
                    {{ cancel_text }}
                </button>
                <button
                    @click="{{ confirm_action }}; {{ show_var }} = false"
                    type="button"
                    class="px-4 py-2 text-sm font-medium text-white rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 {{ style.btn_class }}"
                >
                    {{ confirm_text }}
                </button>
            </div>
        </div>
    </div>
</div>
{% endmacro %}


{#
  Form Modal
  ==========
  A modal optimized for forms with loading state support.

  Parameters:
    - id: Unique modal ID
    - title: Modal title
    - show_var: Alpine.js variable controlling visibility
    - submit_action: Alpine.js action for form submission
    - submit_text: Submit button text (default: 'Save')
    - loading_var: Alpine.js variable for loading state (default: 'saving')
    - loading_text: Text shown while loading (default: 'Saving...')
    - size: Modal size (default: 'md')
#}
{% macro form_modal(id, title, show_var='isFormModalOpen', submit_action='submitForm()', submit_text='Save', loading_var='saving', loading_text='Saving...', size='md') %}
{% set sizes = {
    'sm': 'max-w-sm',
    'md': 'max-w-lg',
    'lg': 'max-w-2xl',
    'xl': 'max-w-4xl'
} %}
<div
    x-show="{{ show_var }}"
    x-cloak
    @keydown.escape.window="!{{ loading_var }} && ({{ show_var }} = false)"
    class="fixed inset-0 z-50 overflow-y-auto"
    role="dialog"
    aria-modal="true"
>
    <div
        x-show="{{ show_var }}"
        x-transition:enter="ease-out duration-300"
        x-transition:enter-start="opacity-0"
        x-transition:enter-end="opacity-100"
        x-transition:leave="ease-in duration-200"
        x-transition:leave-start="opacity-100"
        x-transition:leave-end="opacity-0"
        class="fixed inset-0 bg-gray-500/50 dark:bg-gray-900/80 backdrop-blur-sm"
        @click="!{{ loading_var }} && ({{ show_var }} = false)"
    ></div>

    <div class="flex min-h-full items-center justify-center p-4">
        <div
            x-show="{{ show_var }}"
            x-transition:enter="ease-out duration-300"
            x-transition:enter-start="opacity-0 scale-95"
            x-transition:enter-end="opacity-100 scale-100"
            x-transition:leave="ease-in duration-200"
            x-transition:leave-start="opacity-100 scale-100"
            x-transition:leave-end="opacity-0 scale-95"
            @click.stop
            class="relative w-full {{ sizes[size] }} bg-white dark:bg-gray-800 rounded-xl shadow-xl"
        >
            <form @submit.prevent="{{ submit_action }}">
                {# Header #}
                <div class="flex items-center justify-between px-6 py-4 border-b border-gray-200 dark:border-gray-700">
                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white">{{ title }}</h3>
                    <button
                        @click="{{ show_var }} = false"
                        type="button"
                        :disabled="{{ loading_var }}"
                        class="p-2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
                    >
                        <svg class="w-5 h-5" 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"></path>
                        </svg>
                    </button>
                </div>

                {# Body #}
                <div class="px-6 py-4 max-h-[calc(100vh-200px)] overflow-y-auto">
                    {{ caller() }}
                </div>

                {# Footer #}
                <div class="flex items-center justify-end gap-3 px-6 py-4 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/50 rounded-b-xl">
                    <button
                        @click="{{ show_var }} = false"
                        type="button"
                        :disabled="{{ loading_var }}"
                        class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
                    >
                        Cancel
                    </button>
                    <button
                        type="submit"
                        :disabled="{{ loading_var }}"
                        class="inline-flex items-center px-4 py-2 text-sm font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700 transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 disabled:opacity-50 disabled:cursor-not-allowed"
                    >
                        <span x-show="{{ loading_var }}" x-html="$icon('spinner', 'w-4 h-4 mr-2')"></span>
                        <span x-text="{{ loading_var }} ? '{{ loading_text }}' : '{{ submit_text }}'"></span>
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endmacro %}


{#
  Slide-over Panel
  ================
  A side panel that slides in from the right.

  Parameters:
    - id: Unique panel ID
    - title: Panel title
    - show_var: Alpine.js variable controlling visibility
    - width: 'sm' | 'md' | 'lg' | 'xl' (default: 'md')
#}
{% macro slide_over(id, title, show_var='isPanelOpen', width='md') %}
{% set widths = {
    'sm': 'max-w-sm',
    'md': 'max-w-md',
    'lg': 'max-w-lg',
    'xl': 'max-w-xl'
} %}
<div
    x-show="{{ show_var }}"
    x-cloak
    @keydown.escape.window="{{ show_var }} = false"
    class="fixed inset-0 z-50 overflow-hidden"
    role="dialog"
    aria-modal="true"
>
    {# Backdrop #}
    <div
        x-show="{{ show_var }}"
        x-transition:enter="ease-out duration-300"
        x-transition:enter-start="opacity-0"
        x-transition:enter-end="opacity-100"
        x-transition:leave="ease-in duration-200"
        x-transition:leave-start="opacity-100"
        x-transition:leave-end="opacity-0"
        class="fixed inset-0 bg-gray-500/50 dark:bg-gray-900/80 backdrop-blur-sm"
        @click="{{ show_var }} = false"
    ></div>

    {# Panel #}
    <div class="fixed inset-y-0 right-0 flex max-w-full pl-10">
        <div
            x-show="{{ show_var }}"
            x-transition:enter="transform transition ease-in-out duration-300"
            x-transition:enter-start="translate-x-full"
            x-transition:enter-end="translate-x-0"
            x-transition:leave="transform transition ease-in-out duration-300"
            x-transition:leave-start="translate-x-0"
            x-transition:leave-end="translate-x-full"
            class="w-screen {{ widths[width] }}"
        >
            <div class="flex h-full flex-col bg-white dark:bg-gray-800 shadow-xl">
                {# Header #}
                <div class="flex items-center justify-between px-6 py-4 border-b border-gray-200 dark:border-gray-700">
                    <h2 class="text-lg font-semibold text-gray-900 dark:text-white">{{ title }}</h2>
                    <button
                        @click="{{ show_var }} = false"
                        class="p-2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors"
                    >
                        <svg class="w-5 h-5" 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"></path>
                        </svg>
                    </button>
                </div>

                {# Body #}
                <div class="flex-1 overflow-y-auto px-6 py-4">
                    {{ caller() }}
                </div>
            </div>
        </div>
    </div>
</div>
{% endmacro %}
