{% comment %}
Form Submission Feedback Component
==================================

Displays feedback after form submission with various states.

Purpose:
    Provides consistent feedback UI for form submission results including
    success confirmations, error summaries, and loading states.

Usage Examples:
    Success state:
        {% include 'forms/partials/form_submission_feedback.html' with state='success' message='Park saved successfully!' %}

    Error state:
        {% include 'forms/partials/form_submission_feedback.html' with state='error' message='Please fix the errors below' %}

    Loading state:
        {% include 'forms/partials/form_submission_feedback.html' with state='loading' message='Saving...' %}

    With redirect countdown:
        {% include 'forms/partials/form_submission_feedback.html' with state='success' message='Saved!' redirect_url='/parks/' redirect_seconds=3 %}

Parameters:
    Required:
    - state: 'success', 'error', 'warning', 'loading' (default: 'success')
    - message: Main feedback message

    Optional:
    - title: Optional title text
    - show_icon: Show status icon (default: True)
    - show_actions: Show action buttons (default: True)
    - primary_action_text: Primary button text (default: varies by state)
    - primary_action_url: Primary button URL
    - secondary_action_text: Secondary button text
    - secondary_action_url: Secondary button URL
    - redirect_url: URL to redirect to after countdown
    - redirect_seconds: Seconds before redirect (default: 3)
    - errors: List of error messages (for error state)
    - animate: Enable animations (default: True)

Dependencies:
    - Tailwind CSS for styling
    - Alpine.js for countdown functionality
    - Font Awesome icons

Accessibility:
    - Uses appropriate ARIA roles based on state
    - Announces changes to screen readers
{% endcomment %}

{% with state=state|default:'success' show_icon=show_icon|default:True show_actions=show_actions|default:True animate=animate|default:True redirect_seconds=redirect_seconds|default:3 %}

<div class="form-submission-feedback rounded-lg p-4 {% if animate %}animate-fade-in{% endif %}
            {% if state == 'success' %}bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800
            {% elif state == 'error' %}bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800
            {% elif state == 'warning' %}bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800
            {% elif state == 'loading' %}bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800
            {% endif %}"
     role="{% if state == 'error' %}alert{% else %}status{% endif %}"
     aria-live="{% if state == 'error' %}assertive{% else %}polite{% endif %}"
     {% if redirect_url %}
     x-data="{ countdown: {{ redirect_seconds }} }"
     x-init="setInterval(() => { if(countdown > 0) countdown--; else window.location.href = '{{ redirect_url }}'; }, 1000)"
     {% endif %}>

    <div class="flex {% if title or errors %}flex-col gap-3{% else %}items-center gap-3{% endif %}">
        {# Icon #}
        {% if show_icon %}
        <div class="flex-shrink-0 {% if title or errors %}flex items-center gap-3{% endif %}">
            {% if state == 'success' %}
            <div class="w-10 h-10 rounded-full bg-green-100 dark:bg-green-800/30 flex items-center justify-center">
                <i class="fas fa-check text-green-600 dark:text-green-400 text-lg" aria-hidden="true"></i>
            </div>
            {% elif state == 'error' %}
            <div class="w-10 h-10 rounded-full bg-red-100 dark:bg-red-800/30 flex items-center justify-center">
                <i class="fas fa-exclamation-circle text-red-600 dark:text-red-400 text-lg" aria-hidden="true"></i>
            </div>
            {% elif state == 'warning' %}
            <div class="w-10 h-10 rounded-full bg-yellow-100 dark:bg-yellow-800/30 flex items-center justify-center">
                <i class="fas fa-exclamation-triangle text-yellow-600 dark:text-yellow-400 text-lg" aria-hidden="true"></i>
            </div>
            {% elif state == 'loading' %}
            <div class="w-10 h-10 rounded-full bg-blue-100 dark:bg-blue-800/30 flex items-center justify-center">
                <i class="fas fa-spinner fa-spin text-blue-600 dark:text-blue-400 text-lg" aria-hidden="true"></i>
            </div>
            {% endif %}

            {# Title (if provided) #}
            {% if title %}
            <h3 class="font-semibold
                       {% if state == 'success' %}text-green-800 dark:text-green-200
                       {% elif state == 'error' %}text-red-800 dark:text-red-200
                       {% elif state == 'warning' %}text-yellow-800 dark:text-yellow-200
                       {% elif state == 'loading' %}text-blue-800 dark:text-blue-200
                       {% endif %}">
                {{ title }}
            </h3>
            {% endif %}
        </div>
        {% endif %}

        {# Content #}
        <div class="flex-1 min-w-0">
            {# Main message #}
            <p class="text-sm
                      {% if state == 'success' %}text-green-700 dark:text-green-300
                      {% elif state == 'error' %}text-red-700 dark:text-red-300
                      {% elif state == 'warning' %}text-yellow-700 dark:text-yellow-300
                      {% elif state == 'loading' %}text-blue-700 dark:text-blue-300
                      {% endif %}">
                {{ message }}
            </p>

            {# Error list (for error state) #}
            {% if state == 'error' and errors %}
            <ul class="mt-2 text-sm text-red-600 dark:text-red-400 space-y-1 list-disc list-inside">
                {% for error in errors %}
                <li>{{ error }}</li>
                {% endfor %}
            </ul>
            {% endif %}

            {# Redirect countdown #}
            {% if redirect_url %}
            <p class="mt-2 text-xs
                      {% if state == 'success' %}text-green-600 dark:text-green-400
                      {% else %}text-muted-foreground
                      {% endif %}">
                Redirecting in <span x-text="countdown"></span> seconds...
                <a href="{{ redirect_url }}" class="underline hover:no-underline ml-1">Go now</a>
            </p>
            {% endif %}
        </div>

        {# Actions #}
        {% if show_actions and state != 'loading' %}
        <div class="flex-shrink-0 flex items-center gap-2 {% if title or errors %}mt-2{% endif %}">
            {% if state == 'error' %}
            {# Error state actions #}
            {% if secondary_action_url %}
            <a href="{{ secondary_action_url }}"
               class="btn btn-sm btn-ghost text-red-600 dark:text-red-400 hover:bg-red-100 dark:hover:bg-red-800/30">
                {{ secondary_action_text|default:'Cancel' }}
            </a>
            {% endif %}
            {% if primary_action_url %}
            <a href="{{ primary_action_url }}"
               class="btn btn-sm bg-red-600 hover:bg-red-700 text-white">
                {{ primary_action_text|default:'Try Again' }}
            </a>
            {% else %}
            <button type="submit"
                    class="btn btn-sm bg-red-600 hover:bg-red-700 text-white">
                {{ primary_action_text|default:'Try Again' }}
            </button>
            {% endif %}

            {% elif state == 'success' %}
            {# Success state actions #}
            {% if secondary_action_url %}
            <a href="{{ secondary_action_url }}"
               class="btn btn-sm btn-ghost text-green-600 dark:text-green-400 hover:bg-green-100 dark:hover:bg-green-800/30">
                {{ secondary_action_text|default:'Add Another' }}
            </a>
            {% endif %}
            {% if primary_action_url %}
            <a href="{{ primary_action_url }}"
               class="btn btn-sm bg-green-600 hover:bg-green-700 text-white">
                {{ primary_action_text|default:'View' }}
            </a>
            {% endif %}

            {% elif state == 'warning' %}
            {# Warning state actions #}
            {% if secondary_action_url %}
            <a href="{{ secondary_action_url }}"
               class="btn btn-sm btn-ghost">
                {{ secondary_action_text|default:'Cancel' }}
            </a>
            {% endif %}
            {% if primary_action_url %}
            <a href="{{ primary_action_url }}"
               class="btn btn-sm bg-yellow-600 hover:bg-yellow-700 text-white">
                {{ primary_action_text|default:'Continue' }}
            </a>
            {% endif %}
            {% endif %}
        </div>
        {% endif %}
    </div>
</div>

{% endwith %}
