{% extends 'base/base.html' %}
{% load static %}

{% block title %}{% if is_edit %}Edit{% else %}Add{% endif %} Park - ThrillWiki{% endblock %}

{% block content %}
<div class="container px-4 mx-auto">
    <div class="max-w-3xl mx-auto">
        <!-- Park Form -->
        <div class="p-6 mb-6 bg-white rounded-lg shadow dark:bg-gray-800">
            <h1 class="mb-6 text-3xl font-bold text-gray-900 dark:text-white">{% if is_edit %}Edit{% else %}Add{% endif %} Park</h1>

            {% if form.errors %}
            <div class="p-4 mb-6 text-red-700 bg-red-100 border border-red-400 rounded-lg dark:bg-red-900 dark:text-red-100 dark:border-red-700">
                <p class="font-medium">Please correct the following errors:</p>
                <ul class="ml-4 list-disc">
                    {% for field in form %}
                        {% for error in field.errors %}
                            <li>{{ field.label }}: {{ error }}</li>
                        {% endfor %}
                    {% endfor %}
                    {% for error in form.non_field_errors %}
                        <li>{{ error }}</li>
                    {% endfor %}
                </ul>
            </div>
            {% endif %}

            <form method="post" class="space-y-6" id="park-form">
                {% csrf_token %}
                
                <!-- Hidden fields -->
                {{ form.country }}
                {{ form.region }}
                {{ form.city }}
                
                <!-- Name field -->
                <div>
                    <label for="{{ form.name.id_for_label }}" class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">
                        Name *
                    </label>
                    <div>
                        {{ form.name }}
                    </div>
                    {% if form.name.errors %}
                        <div class="mt-1 text-sm text-red-600 dark:text-red-400">
                            {{ form.name.errors }}
                        </div>
                    {% endif %}
                </div>

                <!-- Location fields -->
                <div x-data="locationAutocomplete('country', false)" class="relative">
                    <label for="{{ form.country_name.id_for_label }}" class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">
                        Country *
                    </label>
                    <input type="text" 
                           id="id_country_name"
                           name="country_name"
                           x-model="query"
                           @input.debounce.300ms="fetchSuggestions()"
                           @focus="fetchSuggestions()"
                           @click.away="suggestions = []"
                           class="w-full border-gray-300 rounded-lg form-input dark:border-gray-600 dark:bg-gray-700 dark:text-white"
                           placeholder="Select country..."
                           value="{{ form.country_name.value|default:'' }}"
                           autocomplete="off">
                    <!-- Suggestions Dropdown -->
                    <ul x-show="suggestions.length > 0"
                        x-cloak
                        class="absolute z-50 w-full py-1 mt-1 overflow-auto bg-white rounded-md shadow-lg dark:bg-gray-700 max-h-60">
                        <template x-for="suggestion in suggestions" :key="suggestion.id">
                            <li @click="selectSuggestion(suggestion)"
                                x-text="suggestion.name"
                                class="px-4 py-2 text-gray-700 cursor-pointer dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-600">
                            </li>
                        </template>
                    </ul>
                </div>

                <div x-data="locationAutocomplete('region', false)" class="relative">
                    <label for="{{ form.region_name.id_for_label }}" class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">
                        Region/State
                    </label>
                    <input type="text" 
                           id="id_region_name"
                           name="region_name"
                           x-model="query"
                           @input.debounce.300ms="fetchSuggestions()"
                           @focus="fetchSuggestions()"
                           @click.away="suggestions = []"
                           class="w-full border-gray-300 rounded-lg form-input dark:border-gray-600 dark:bg-gray-700 dark:text-white"
                           placeholder="Select region/state..."
                           value="{{ form.region_name.value|default:'' }}"
                           autocomplete="off">
                    <!-- Suggestions Dropdown -->
                    <ul x-show="suggestions.length > 0"
                        x-cloak
                        class="absolute z-50 w-full py-1 mt-1 overflow-auto bg-white rounded-md shadow-lg dark:bg-gray-700 max-h-60">
                        <template x-for="suggestion in suggestions" :key="suggestion.id">
                            <li @click="selectSuggestion(suggestion)"
                                x-text="suggestion.name"
                                class="px-4 py-2 text-gray-700 cursor-pointer dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-600">
                            </li>
                        </template>
                    </ul>
                </div>

                <div x-data="locationAutocomplete('city', false)" class="relative">
                    <label for="{{ form.city_name.id_for_label }}" class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">
                        City
                    </label>
                    <input type="text" 
                           id="id_city_name"
                           name="city_name"
                           x-model="query"
                           @input.debounce.300ms="fetchSuggestions()"
                           @focus="fetchSuggestions()"
                           @click.away="suggestions = []"
                           class="w-full border-gray-300 rounded-lg form-input dark:border-gray-600 dark:bg-gray-700 dark:text-white"
                           placeholder="Select city..."
                           value="{{ form.city_name.value|default:'' }}"
                           autocomplete="off">
                    <!-- Suggestions Dropdown -->
                    <ul x-show="suggestions.length > 0"
                        x-cloak
                        class="absolute z-50 w-full py-1 mt-1 overflow-auto bg-white rounded-md shadow-lg dark:bg-gray-700 max-h-60">
                        <template x-for="suggestion in suggestions" :key="suggestion.id">
                            <li @click="selectSuggestion(suggestion)"
                                x-text="suggestion.name"
                                class="px-4 py-2 text-gray-700 cursor-pointer dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-600">
                            </li>
                        </template>
                    </ul>
                </div>

                <!-- Other fields -->
                {% for field in form %}
                    {% if field.name not in 'name,country,region,city,country_name,region_name,city_name' %}
                    <div>
                        <label for="{{ field.id_for_label }}" class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">
                            {{ field.label }}{% if field.field.required %} *{% endif %}
                        </label>
                        <div>
                            {{ field }}
                        </div>
                        {% if field.help_text %}
                            <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">{{ field.help_text }}</p>
                        {% endif %}
                        {% if field.errors %}
                            <div class="mt-1 text-sm text-red-600 dark:text-red-400">
                                {{ field.errors }}
                            </div>
                        {% endif %}
                    </div>
                    {% endif %}
                {% endfor %}

                {% if not user.role == 'MODERATOR' and not user.role == 'ADMIN' and not user.role == 'SUPERUSER' %}
                <div class="p-4 mb-4 text-blue-700 bg-blue-100 border border-blue-400 rounded-lg dark:bg-blue-900 dark:text-blue-100 dark:border-blue-700">
                    <p>Your submission will be reviewed by a moderator before being published.</p>
                </div>
                <div class="space-y-4">
                    <div>
                        <label for="reason" class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">
                            Reason for {% if is_edit %}Edit{% else %}Addition{% endif %} *
                        </label>
                        <textarea name="reason"
                                  id="reason"
                                  class="w-full border-gray-300 rounded-lg form-textarea dark:border-gray-600 dark:bg-gray-700 dark:text-white"
                                  rows="3"
                                  required
                                  placeholder="Please explain why you're {% if is_edit %}editing{% else %}adding{% endif %} this park and provide any relevant details."></textarea>
                    </div>
                    <div>
                        <label for="source" class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">
                            Source (Optional)
                        </label>
                        <input type="text"
                               name="source"
                               id="source"
                               class="w-full border-gray-300 rounded-lg form-input dark:border-gray-600 dark:bg-gray-700 dark:text-white"
                               placeholder="Link to official website, news article, or other source">
                    </div>
                </div>
                {% endif %}

                <div class="flex justify-end space-x-4">
                    <a href="{% if is_edit %}{% url 'parks:park_detail' slug=object.slug %}{% else %}{% url 'parks:park_list' %}{% endif %}" 
                       class="px-4 py-2 text-gray-700 bg-gray-200 rounded-lg hover:bg-gray-300 dark:bg-gray-600 dark:text-gray-200 dark:hover:bg-gray-500">
                        Cancel
                    </a>
                    <button type="submit" class="px-4 py-2 text-white bg-blue-600 rounded-lg hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600">
                        {% if is_edit %}Save Changes{% else %}Submit{% endif %}
                    </button>
                </div>
            </form>
        </div>

        <!-- Photos Section (only shown on edit) -->
        {% if is_edit %}
            <div class="p-6 bg-white rounded-lg shadow dark:bg-gray-800" id="photos">
                {% include "media/partials/photo_manager.html" with photos=object.photos.all content_type="parks.park" object_id=object.id %}
            </div>
        {% endif %}
    </div>
</div>
{% endblock %}