{% 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>

    <!-- Header Grid -->
    <div class="grid grid-cols-2 gap-2 mb-6 sm:grid-cols-12">
        <!-- Park Info Card -->
        <div class="flex flex-col items-center justify-center h-full col-span-2 p-3 text-center bg-white rounded-lg shadow-lg sm:col-span-3 dark:bg-gray-800">
            <h1 class="text-2xl font-bold leading-tight text-gray-900 sm:text-lg lg:text-4xl md:text-lg dark:text-white">{{ park.name }}</h1>
            {% if park.formatted_location %}
                    <div class="flex items-center justify-center mt-1 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-1 mt-2">
                <span class="status-badge text-xs sm:text-sm font-medium py-1 px-2 {% 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-2 py-1 text-xs font-medium text-yellow-800 bg-yellow-100 sm:text-sm 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>

        <!-- Stats and Quick Facts -->
        <div class="grid h-full grid-cols-2 col-span-2 gap-2 sm:col-span-9">
            <!-- Stats Column -->
            <div class="grid grid-cols-2 col-span-12 gap-2 sm:col-span-4">
                <!-- Total Rides Card -->
                <a href="{% url 'parks:rides:ride_list' park.slug %}" 
                   class="flex flex-col items-center justify-center p-3 text-center transition-transform bg-white rounded-lg shadow-lg hover:scale-[1.02] dark:bg-gray-800">
                    <dt class="text-sm font-semibold text-gray-900 sm:text-base lg:text-lg dark:text-white">Total Rides</dt>
                    <dd class="mt-1 text-xl font-bold text-sky-900 hover:text-sky-800 sm:text-2xl lg:text-3xl dark:text-sky-400 dark:hover:text-sky-300">
                        {{ park.ride_count|default:"N/A" }}
                    </dd>
                </a>

                <!-- Total Roller Coasters Card -->
                <div class="flex flex-col items-center justify-center p-3 text-center bg-white rounded-lg shadow-lg dark:bg-gray-800">
                    <dt class="text-sm font-semibold text-gray-900 sm:text-base lg:text-lg dark:text-white">Roller Coasters</dt>
                    <dd class="mt-1 text-xl font-bold text-sky-900 hover:text-sky-800 sm:text-2xl lg:text-3xl dark:text-sky-400 dark:hover:text-sky-300">
                        {{ park.coaster_count|default:"N/A" }}
                    </dd>
                </div>
            </div>

            <!-- Quick Facts Grid -->
            <div class="grid h-full grid-cols-3 col-span-12 gap-1 p-3 bg-white rounded-lg shadow-lg sm:col-span-8 dark:bg-gray-800">
                {% if park.owner %}
                <div class="flex flex-col items-center justify-center p-1 text-center">
                    <i class="text-lg text-blue-600 sm:text-xl lg:text-2xl fas fa-building dark:text-blue-400"></i>
                    <dt class="mt-1 text-xs font-medium text-gray-500 sm:text-sm lg:text-base dark:text-gray-400">Owner</dt>
                    <dd>
                        <a href="{% url 'companies:company_detail' park.owner.slug %}" 
                           class="text-xs text-blue-600 sm:text-sm lg:text-base hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300">
                            {{ park.owner.name }}
                        </a>
                    </dd>
                </div>
                {% endif %}

                {% if park.opening_date %}
                <div class="flex flex-col items-center justify-center p-1 text-center">
                    <i class="text-lg text-blue-600 sm:text-xl lg:text-2xl fas fa-calendar-alt dark:text-blue-400"></i>
                    <dt class="mt-1 text-xs font-medium text-gray-500 sm:text-sm lg:text-base dark:text-gray-400">Opened</dt>
                    <dd class="text-xs text-gray-900 sm:text-sm lg:text-base dark:text-white">{{ park.opening_date }}</dd>
                </div>
                {% endif %}

                {% if park.website %}
                <div class="flex flex-col items-center justify-center p-1 text-center">
                    <i class="text-lg text-blue-600 sm:text-xl lg:text-2xl fas fa-globe dark:text-blue-400"></i>
                    <dt class="mt-1 text-xs font-medium text-gray-500 sm:text-sm lg:text-base dark:text-gray-400">Website</dt>
                    <dd>
                        <a href="{{ park.website }}" 
                           class="inline-flex items-center text-xs text-blue-600 sm:text-sm lg:text-base hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300"
                           target="_blank" rel="noopener noreferrer">
                            Visit
                            <i class="ml-1 text-xs fas fa-external-link-alt"></i>
                        </a>
                    </dd>
                </div>
                {% endif %}
            </div>
        </div>
    </div>

    <!-- Rest of the content remains unchanged -->
    {% if park.photos.exists %}
        <div class="p-6 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-6 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-6 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-6 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-6 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 bg-opacity-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 %}