{% extends "base/base.html" %}
{% load static %}
{% load park_tags %}

{% block title %}{{ park.name }} - ThrillWiki{% endblock %}

{% block extra_head %}
{% if park.location.exists %}
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
{% endif %}
{% endblock %}

{% block content %}
<script>
    document.addEventListener('alpine:init', () => {
        Alpine.data('photoUploadModal', () => ({
            show: false,
            editingPhoto: { caption: '' }
        }))
    })
</script>

<div class="container px-4 mx-auto sm:px-6 lg:px-8">
    <!-- Action Buttons - Above header -->
    <div hx-get="{% url 'parks:park_actions' park.slug %}"
         hx-trigger="load, auth-changed from:body"
         hx-swap="innerHTML">
    </div>

    <!-- Status Management Section (Moderators Only) -->
    <div id="park-status-section"
         hx-get="{% url 'parks:park_status_actions' park.slug %}"
         hx-trigger="load"
         hx-swap="outerHTML">
    </div>

    <!-- Park Header -->
    <div class="p-compact mb-6 bg-white rounded-lg shadow-lg dark:bg-gray-800">
        <div class="text-center">
            <h1 class="text-3xl font-bold text-gray-900 dark:text-white lg:text-4xl">{{ park.name }}</h1>
            {% if park.formatted_location %}
            <div class="flex items-center justify-center mt-2 text-sm text-gray-600 dark:text-gray-400">
                <i class="mr-1 fas fa-map-marker-alt"></i>
                <p>{{ park.formatted_location }}</p>
            </div>
            {% endif %}
            <div class="flex flex-wrap items-center justify-center gap-2 mt-3">
                {% include "parks/partials/park_header_badge.html" with park=park %}

                {% if park.average_rating %}
                <span class="flex items-center px-3 py-1 text-sm font-medium text-yellow-800 bg-yellow-100 status-badge dark:bg-yellow-600 dark:text-yellow-50">
                    <span class="mr-1 text-yellow-500 dark:text-yellow-200">★</span>
                    {{ park.average_rating|floatformat:1 }}/10
                </span>
                {% endif %}
            </div>
        </div>
    </div>

    <!-- Horizontal Stats Bar -->
    <div class="grid-stats mb-6">
        <!-- Operator - Priority Card (First Position) -->
        {% if park.operator %}
        <div class="bg-white rounded-lg shadow-lg dark:bg-gray-800 p-compact card-stats card-stats-priority">
            <div class="text-center">
                <dt class="text-sm font-semibold text-gray-900 dark:text-white">Operator</dt>
                <dd class="mt-1">
                    <span class="text-sm font-bold text-sky-900 dark:text-sky-400">
                        {{ park.operator.name }}
                    </a>
                </dd>
            </div>
        </div>
        {% endif %}

        <!-- Property Owner (if different from operator) -->
        {% if park.property_owner and park.property_owner != park.operator %}
        <div class="bg-white rounded-lg shadow-lg dark:bg-gray-800 p-compact card-stats">
            <div class="text-center">
                <dt class="text-sm font-semibold text-gray-900 dark:text-white">Property Owner</dt>
                <dd class="mt-1">
                    <a href="{% url 'property_owners:property_owner_detail' park.property_owner.slug %}"
                       class="text-sm font-bold text-sky-900 dark:text-sky-400 hover:text-sky-800 dark:hover:text-sky-300">
                        {{ park.property_owner.name }}
                    </a>
                </dd>
            </div>
        </div>
        {% endif %}

        <!-- Total Rides -->
        <a href="{% url 'parks:rides:ride_list' park.slug %}"
           class="bg-white rounded-lg shadow-lg dark:bg-gray-800 p-compact card-stats transition-transform hover:scale-[1.02]">
            <div class="text-center">
                <dt class="text-sm font-semibold text-gray-900 dark:text-white">Total Rides</dt>
                <dd class="mt-1 text-2xl font-bold text-sky-900 dark:text-sky-400 hover:text-sky-800 dark:hover:text-sky-300">{{ park.ride_count|default:"N/A" }}</dd>
            </div>
        </a>

        <!-- Roller Coasters -->
        <div class="bg-white rounded-lg shadow-lg dark:bg-gray-800 p-compact card-stats">
            <div class="text-center">
                <dt class="text-sm font-semibold text-gray-900 dark:text-white">Roller Coasters</dt>
                <dd class="mt-1 text-2xl font-bold text-sky-900 dark:text-sky-400">{{ park.coaster_count|default:"N/A" }}</dd>
            </div>
        </div>

        <!-- Status -->
        <div class="bg-white rounded-lg shadow-lg dark:bg-gray-800 p-compact card-stats">
            <div class="text-center">
                <dt class="text-sm font-semibold text-gray-900 dark:text-white">Status</dt>
                <dd class="mt-1 text-sm font-bold text-sky-900 dark:text-sky-400">{{ park.get_status_display }}</dd>
            </div>
        </div>

        <!-- Opened Date -->
        {% if park.opening_date %}
        <div class="bg-white rounded-lg shadow-lg dark:bg-gray-800 p-compact card-stats">
            <div class="text-center">
                <dt class="text-sm font-semibold text-gray-900 dark:text-white">Opened</dt>
                <dd class="mt-1 text-sm font-bold text-sky-900 dark:text-sky-400">{{ park.opening_date }}</dd>
            </div>
        </div>
        {% endif %}

        <!-- Website -->
        {% if park.website %}
        <div class="bg-white rounded-lg shadow-lg dark:bg-gray-800 p-compact card-stats">
            <div class="text-center">
                <dt class="text-sm font-semibold text-gray-900 dark:text-white">Website</dt>
                <dd class="mt-1">
                    <a href="{{ park.website }}"
                       class="inline-flex items-center text-sm font-bold text-sky-900 dark:text-sky-400 hover:text-sky-800 dark:hover:text-sky-300"
                       target="_blank" rel="noopener noreferrer">
                        Visit
                        <i class="ml-1 text-xs fas fa-external-link-alt"></i>
                    </a>
                </dd>
            </div>
        </div>
        {% endif %}
    </div>

    <!-- Rest of the content remains unchanged -->
    {% if park.photos.exists %}
        <div class="p-optimized mb-8 bg-white rounded-lg shadow dark:bg-gray-800">
            <h2 class="mb-4 text-xl font-semibold text-gray-900 dark:text-white">Photos</h2>
            {% include "media/partials/photo_display.html" with photos=park.photos.all content_type="parks.park" object_id=park.id %}
        </div>
    {% endif %}

    <!-- Main Content Grid -->
    <div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
        <!-- Left Column - Description and Rides -->
        <div class="lg:col-span-2">
            {% if park.description %}
                <div class="p-optimized mb-6 bg-white rounded-lg shadow dark:bg-gray-800">
                    <h2 class="mb-4 text-xl font-semibold text-gray-900 dark:text-white">About</h2>
                    <div class="prose dark:prose-invert max-w-none">
                        {{ park.description|linebreaks }}
                    </div>
                </div>
            {% endif %}

            <!-- Rides and Attractions -->
            <div class="p-optimized mb-6 bg-white rounded-lg shadow dark:bg-gray-800">
                <div class="flex items-center justify-between mb-4">
                    <h2 class="text-xl font-semibold text-gray-900 dark:text-white">Rides & Attractions</h2>
                    <a href="{% url 'parks:rides:ride_list' park.slug %}" class="text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300">
                        View All
                    </a>
                </div>
                {% if park.rides.exists %}
                    <div class="grid gap-4 md:grid-cols-2">
                        {% for ride in park.rides.all|slice:":6" %}
                            <div class="p-4 transition-colors rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700">
                                <a href="{% url 'parks:rides:ride_detail' park.slug ride.slug %}" class="block">
                                    <h3 class="mb-1 font-semibold text-gray-900 dark:text-white">{{ ride.name }}</h3>
                                    <span class="text-blue-800 bg-blue-100 status-badge dark:bg-blue-700 dark:text-blue-50">
                                        {{ ride.get_category_display }}
                                    </span>
                                    {% if ride.average_rating %}
                                        <span class="flex items-center text-yellow-800 bg-yellow-100 status-badge dark:bg-yellow-600 dark:text-yellow-50">
                                            <span class="mr-1 text-yellow-500 dark:text-yellow-200">★</span>
                                            {{ ride.average_rating|floatformat:1 }}/10
                                        </span>
                                    {% endif %}
                                </a>
                            </div>
                        {% endfor %}
                    </div>
                {% else %}
                    <p class="text-gray-500 dark:text-gray-400">No rides or attractions listed yet.</p>
                {% endif %}
            </div>
        </div>

        <!-- Right Column - Map and Additional Info -->
        <div class="lg:col-span-1">
            <!-- Location Map -->
            {% if park.location.exists %}
                <div class="p-optimized mb-6 bg-white rounded-lg shadow dark:bg-gray-800">
                    <h2 class="mb-4 text-xl font-semibold text-gray-900 dark:text-white">Location</h2>
                    <div id="park-map" class="relative rounded-lg" style="z-index: 0;"></div>
                </div>
            {% endif %}

            <!-- History Panel -->
            <div class="p-optimized mb-6 bg-white rounded-lg shadow dark:bg-gray-800" x-data="{ showFsmHistory: false }">
                <div class="flex items-center justify-between mb-4">
                    <h2 class="text-xl font-semibold text-gray-900 dark:text-white">History</h2>
                    {% if perms.parks.change_park %}
                    <button type="button"
                            @click="showFsmHistory = !showFsmHistory"
                            class="inline-flex items-center px-3 py-1.5 text-sm font-medium text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600 transition-colors duration-150">
                        <i class="mr-2 fas fa-history"></i>
                        <span x-text="showFsmHistory ? 'Hide Transitions' : 'Show Transitions'"></span>
                    </button>
                    {% endif %}
                </div>

                <!-- FSM Transition History (Moderators Only) -->
                {% if perms.parks.change_park %}
                <div x-show="showFsmHistory" x-cloak class="mb-4">
                    <div id="park-fsm-history-container"
                         x-show="showFsmHistory"
                         x-init="$watch('showFsmHistory', value => { if(value && !$el.dataset.loaded) { htmx.trigger($el, 'load-history'); $el.dataset.loaded = 'true'; } })"
                         hx-get="{% url 'moderation:moderation-reports-all-history' %}?model_type=park&object_id={{ park.id }}"
                         hx-trigger="load-history"
                         hx-target="this"
                         hx-swap="innerHTML"
                         hx-indicator="#park-fsm-loading">
                        <!-- Loading State -->
                        <div id="park-fsm-loading" class="flex items-center justify-center py-4">
                            <i class="mr-2 text-blue-500 fas fa-spinner fa-spin"></i>
                            <span class="text-sm text-gray-600 dark:text-gray-400">Loading transitions...</span>
                        </div>
                    </div>
                </div>
                {% endif %}

                <!-- Regular History -->
                <div class="space-y-4">
                    {% for record in history %}
                        <div class="p-4 rounded-lg bg-gray-50 dark:bg-gray-700/50">
                            <div class="text-sm text-gray-500 dark:text-gray-400">
                                {{ record.history_date|date:"M d, Y H:i" }}
                                {% if record.history_user %}
                                    by {{ record.history_user.username }}
                                {% endif %}
                            </div>
                            <div class="mt-2">
                                {% for field, changes in record.diff_against_previous.items %}
                                    {% if field != "updated_at" %}
                                        <div class="text-sm">
                                            <span class="font-medium">{{ field|title }}:</span>
                                            <span class="text-red-600 dark:text-red-400">{{ changes.old }}</span>
                                            <span class="mx-1">-></span>
                                            <span class="text-green-600 dark:text-green-400">{{ changes.new }}</span>
                                        </div>
                                    {% endif %}
                                {% endfor %}
                            </div>
                        </div>
                    {% empty %}
                        <p class="text-gray-500">No history available.</p>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Photo Upload Modal -->
{% if perms.media.add_photo %}
    <div x-cloak
         x-data="{
            show: false,
            editingPhoto: null,
            init() {
                this.editingPhoto = { caption: '' };
            }
         }"
         @show-photo-upload.window="show = true; init()"
         x-show="show"
         class="fixed inset-0 z-[60] flex items-center justify-center bg-black/50"
         @click.self="show = false">
        <div class="w-full max-w-2xl p-6 mx-4 bg-white rounded-lg shadow-xl dark:bg-gray-800">
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-xl font-semibold text-gray-900 dark:text-white">Upload Photos</h3>
                <button @click="show = false" class="text-gray-500 hover:text-gray-700 dark:hover:text-gray-300">
                    <i class="text-xl fas fa-times"></i>
                </button>
            </div>
            {% include "media/partials/photo_upload.html" with content_type="parks.park" object_id=park.id %}
        </div>
    </div>
{% endif %}


{% endblock %}

{% block extra_js %}
<!-- Photo Gallery Script -->
<script src="{% static 'js/photo-gallery.js' %}"></script>

<!-- Map Script (if location exists) -->
{% if park.location.exists %}
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script src="{% static 'js/park-map.js' %}"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        {% with location=park.location.first %}
        initParkMap({{ location.latitude }}, {{ location.longitude }}, "{{ park.name }}");
        {% endwith %}
    });
</script>
{% endif %}
{% endblock %}
