{% extends "framework_modern.html" %}
{% load static %}

{% block content %}
  <script src="{% static 'js/alpine/components/widgets.js' %}"></script>
  <script src="{% static 'js/api/additional-information.js' %}"></script>

  {% block action_modals %}
    {% include "modals/objects/edit_scenario_modal.html" %}
    {% include "modals/objects/add_additional_information_modal.html" %}
    {% include "modals/objects/update_scenario_additional_information_modal.html" %}
    {% include "modals/objects/generic_delete_modal.html" %}
  {% endblock action_modals %}

  <div class="space-y-2 p-4">
    <!-- Header Section -->
    <div class="card bg-base-100">
      <div class="card-body">
        <div class="flex items-center justify-between">
          <h2 class="card-title text-2xl">{{ scenario.name }}</h2>
          <div id="actionsButton" class="dropdown dropdown-end hidden">
            <div tabindex="0" role="button" class="btn btn-ghost btn-sm">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="16"
                height="16"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
                class="lucide lucide-wrench"
              >
                <path
                  d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"
                />
              </svg>
              Actions
            </div>
            <ul
              tabindex="-1"
              class="dropdown-content menu bg-base-100 rounded-box z-50 w-52 p-2"
            >
              {% block actions %}
                {% include "actions/objects/scenario.html" %}
              {% endblock %}
            </ul>
          </div>
        </div>
      </div>
    </div>

    <!-- Description -->
    <div class="card bg-base-100">
      <div class="card-body">
        <h3 class="card-title mb-2 text-lg">Description</h3>
        <p>{{ scenario.description }}</p>
        <p class="mt-2"><strong>Type:</strong> {{ scenario.scenario_type }}</p>
        <p><strong>Reported:</strong> {{ scenario.scenario_date }}</p>
      </div>
    </div>

    <!-- Additional Information -->
    <div class="card bg-base-100">
      <div class="card-body">
        <h3 class="card-title mb-4 text-lg">Additional Information</h3>
        <div
          x-data="{
            items: [],
            schemas: {},
            loading: true,
            error: null,
            async init() {
              try {
                // Use the unified API client for loading data
                const { items, schemas } = await window.AdditionalInformationApi.loadSchemasAndItems('{{ scenario.uuid }}');
                this.items = items;
                this.schemas = schemas;
              } catch (err) {
                this.error = err.message;
                console.error('Error loading additional information:', err);
              } finally {
                this.loading = false;
              }
            },
            async deleteItem(uuid) {
              if (!confirm('Are you sure you want to delete this item?')) return;

              try {
                // Use the unified API client for delete operations
                await window.AdditionalInformationApi.deleteItem('{{ scenario.uuid }}', uuid);

                // Remove from items array
                this.items = this.items.filter(item => item.uuid !== uuid);
              } catch (err) {
                alert('Error deleting item: ' + err.message);
                console.error('Error deleting item:', err);
              }
            }
          }"
        >
          <!-- Loading state -->
          <template x-if="loading">
            <div class="flex items-center justify-center p-4">
              <span class="loading loading-spinner loading-md"></span>
            </div>
          </template>

          <!-- Error state -->
          <template x-if="error">
            <div class="alert alert-error mb-4">
              <span x-text="error"></span>
            </div>
          </template>

          <!-- Items list -->
          <template x-if="!loading && !error">
            <div class="space-y-4">
              <template x-if="items.length === 0">
                <p class="text-base-content/60">
                  No additional information available.
                </p>
              </template>

              <template x-for="item in items" :key="item.uuid">
                <div class="card bg-base-200 shadow-sm">
                  <div class="card-body p-4">
                    <div class="flex items-start justify-between">
                      <div
                        class="flex-1"
                        x-data="schemaRenderer({
                             rjsf: schemas[item.type.toLowerCase()],
                             data: item.data,
                             mode: 'view'
                           })"
                        x-init="init()"
                      >
                        {% include "components/schema_form.html" %}
                      </div>
                      {% if meta.can_edit %}
                        <button
                          class="btn btn-sm btn-ghost ml-2"
                          @click="deleteItem(item.uuid)"
                        >
                          <svg
                            xmlns="http://www.w3.org/2000/svg"
                            width="16"
                            height="16"
                            viewBox="0 0 24 24"
                            fill="none"
                            stroke="currentColor"
                            stroke-width="2"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            class="lucide lucide-trash"
                          >
                            <path d="M3 6h18" />
                            <path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" />
                            <path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" />
                          </svg>
                        </button>
                      {% endif %}
                    </div>
                  </div>
                </div>
              </template>
            </div>
          </template>
        </div>
      </div>
    </div>

    {% if scenario.parent %}
      <div class="card bg-base-100">
        <div class="card-body">
          <h3 class="card-title mb-4 text-lg">
            Parent Scenario Additional Information
          </h3>
          <div
            x-data="{
            items: [],
            schemas: {},
            loading: true,
            error: null,
            async init() {
              try {
                // Use the unified API client for loading data
                const { items, schemas } = await window.AdditionalInformationApi.loadSchemasAndItems('{{ scenario.parent.uuid }}');
                this.items = items;
                this.schemas = schemas;
              } catch (err) {
                this.error = err.message;
                console.error('Error loading additional information:', err);
              } finally {
                this.loading = false;
              }
            },
          }"
          >
            <!-- Loading state -->
            <template x-if="loading">
              <div class="flex items-center justify-center p-4">
                <span class="loading loading-spinner loading-md"></span>
              </div>
            </template>

            <!-- Error state -->
            <template x-if="error">
              <div class="alert alert-error mb-4">
                <span x-text="error"></span>
              </div>
            </template>

            <!-- Items list -->
            <template x-if="!loading && !error">
              <div class="space-y-4">
                <template x-if="items.length === 0">
                  <p class="text-base-content/60">
                    No additional information available.
                  </p>
                </template>

                <template x-for="item in items" :key="item.uuid">
                  <div class="card bg-base-200 shadow-sm">
                    <div class="card-body p-4">
                      <div class="flex items-start justify-between">
                        <div
                          class="flex-1"
                          x-data="schemaRenderer({
                             rjsf: schemas[item.type.toLowerCase()],
                             data: item.data,
                             mode: 'view'
                           })"
                          x-init="init()"
                        >
                          {% include "components/schema_form.html" %}
                        </div>
                      </div>
                    </div>
                  </div>
                </template>
              </div>
            </template>
          </div>
        </div>
      </div>
    {% endif %}

    <!-- Pathways -->
    {% if scenario.related_pathways %}
      <div class="collapse-arrow bg-base-200 collapse">
        <input type="checkbox" checked />
        <div class="collapse-title text-xl font-medium">Pathways</div>
        <div class="collapse-content">
          <ul class="menu bg-base-100 rounded-box">
            {% for p in scenario.related_pathways %}
              <li>
                <a href="{{ p.url }}" class="hover:bg-base-200"
                  >{{ p.name }} <i>({{ p.package.name }})</i></a
                >
              </li>
            {% endfor %}
          </ul>
        </div>
      </div>
    {% endif %}

    <!-- Related Scenarios -->
    {% if children.exists %}
      <div class="collapse-arrow bg-base-200 collapse">
        <input type="checkbox" />
        <div class="collapse-title text-xl font-medium">Related Scenarios</div>
        <div class="collapse-content">
          <ul class="menu bg-base-100 rounded-box">
            {% for s in children %}
              <li>
                <a href="{{ s.url }}" class="hover:bg-base-200"
                  >{{ s.name }} <i>({{ s.package.name }})</i></a
                >
              </li>
            {% endfor %}
          </ul>
        </div>
      </div>
    {% endif %}

    <!-- Parent Scenarios -->
    {% if scenario.parent %}
      <div class="collapse-arrow bg-base-200 collapse">
        <input type="checkbox" />
        <div class="collapse-title text-xl font-medium">Parent Scenario</div>
        <div class="collapse-content">
          <ul class="menu bg-base-100 rounded-box">
            <li>
              <a href="{{ scenario.parent.url }}" class="hover:bg-base-200"
                >{{ scenario.parent.name }}
                <i>({{ scenario.parent.package.name }})</i></a
              >
            </li>
          </ul>
        </div>
      </div>
    {% endif %}
  </div>

  <script>
    // Show actions button if there are actions
    document.addEventListener("DOMContentLoaded", function () {
      const actionsButton = document.getElementById("actionsButton");
      const actionsList = actionsButton?.querySelector("ul");
      if (actionsList && actionsList.children.length > 0) {
        actionsButton?.classList.remove("hidden");
      }
    });
  </script>
{% endblock content %}