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

{% 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 nonce="{{ request.csp_nonce }}">
    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>

    <!-- 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">
                <span class="status-badge text-sm font-medium py-1 px-3 {% if park.status == 'OPERATING' %}status-operating
                           {% elif park.status == 'CLOSED_TEMP' or park.status == 'CLOSED_PERM' %}status-closed
                           {% elif park.status == 'UNDER_CONSTRUCTION' %}status-construction
                           {% elif park.status == 'DEMOLISHED' %}status-demolished
                           {% elif park.status == 'RELOCATED' %}status-relocated{% endif %}">
                    {{ park.get_status_display }}
                </span>
                {% 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 }}
                    </span>
                </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">
                    <span class="text-sm font-bold text-sky-900 dark:text-sky-400">
                        {{ park.property_owner.name }}
                    </span>
                </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-6 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-1 xl:grid-cols-2">
                        {% for ride in park.rides.all|slice:":6" %}
                            <c-ride_card :ride="ride" url_variant="park" />
                        {% 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>
                    {% with location=park.location.first %}
                    {% if location.latitude is not None and location.longitude is not None %}
                    <div id="park-map" class="relative rounded-lg" style="z-index: 0;"
                         data-latitude="{{ location.latitude|default_if_none:'' }}"
                         data-longitude="{{ location.longitude|default_if_none:'' }}"
                         data-park-name="{{ park.name|escape }}"></div>
                    {% else %}
                    <div class="relative rounded-lg p-4 text-center text-gray-500 dark:text-gray-400">
                        <i class="fas fa-map-marker-alt text-2xl mb-2"></i>
                        <p>Location information not available</p>
                    </div>
                    {% endif %}
                    {% endwith %}
                </div>
            {% endif %}

            <!-- History Panel -->
            <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">History</h2>
                <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 nonce="{{ request.csp_nonce }}">
document.addEventListener('DOMContentLoaded', function() {
    var mapElement = document.getElementById('park-map');
    if (mapElement && mapElement.dataset.latitude && mapElement.dataset.longitude) {
        var latitude = parseFloat(mapElement.dataset.latitude);
        var longitude = parseFloat(mapElement.dataset.longitude);
        var parkName = mapElement.dataset.parkName;
        
        if (!isNaN(latitude) && !isNaN(longitude) && parkName) {
            initParkMap(latitude, longitude, parkName);
        }
    }
});
</script>
{% endif %}
{% endblock %}