<dialog
  id="search_modal"
  class="modal items-start sm:items-center"
  x-data="searchModal()"
  @close="reset()"
>
  <div class="modal-box mt-4 sm:mt-0 p-1 sm:h-8/12 sm:w-[85vw] sm:max-w-5xl">
    <!-- Search Input and Mode Selector -->
    <div class="form-control mb-4 w-full shrink-0">
      <div class="join m-0 w-full items-center p-3">
        <label class="input join-item input-ghost grow">
          <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-search-icon lucide-search"
          >
            <path d="m21 21-4.34-4.34" />
            <circle cx="11" cy="11" r="8" />
          </svg>
          <input
            type="text"
            autofocus
            x-ref="searchbar"
            x-model="query"
            @keydown.enter="performSearch('{{ SERVER_BASE }}')"
            placeholder="Benfuracarb"
            class="grow"
            aria-label="Search"
          />
        </label>

        <!-- Mode Dropdown -->
        <div>
          <button
            type="button"
            tabindex="0"
            popovertarget="search_dropdown_menu"
            style="anchor-name: --anchor-mode"
            class="btn join-item btn-ghost"
          >
            <span x-text="searchModeLabel"></span>
            <svg
              class="ml-1 h-4 w-4"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M19 9l-7 7-7-7"
              />
            </svg>
          </button>
          <ul
            tabindex="0"
            class="dropdown dropdown-end menu bg-base-200 rounded-box w-64 p-2 shadow-lg"
            popover
            x-ref="modeDropdown"
            id="search_dropdown_menu"
            style="position-anchor: --anchor-mode"
          >
            <li class="menu-title">Text</li>
            <li>
              <a
                @click.prevent="setSearchMode('text', 'Text')"
                class="tooltip tooltip-left"
                data-tip="Search on object names and descriptions"
              >
                Text
              </a>
            </li>
            <li class="menu-title">SMILES</li>
            <li>
              <a
                @click.prevent="setSearchMode('smiles_default', 'Default')"
                class="tooltip tooltip-left"
                data-tip="Ignores stereochemistry and charge"
              >
                Default
              </a>
            </li>
            <li>
              <a
                @click.prevent="setSearchMode('smiles_canonical', 'Canonical')"
                class="tooltip tooltip-left"
                data-tip="Ignores stereochemistry, preserves charge"
              >
                Canonical
              </a>
            </li>
            <li>
              <a
                @click.prevent="setSearchMode('smiles_exact', 'Exact')"
                class="tooltip tooltip-left"
                data-tip="Exact match for stereochemistry and charge"
              >
                Exact
              </a>
            </li>
            <li class="menu-title">InChI</li>
            <li>
              <a
                @click.prevent="setSearchMode('inchikey', 'InChIKey')"
                class="tooltip tooltip-left"
                data-tip="Search by InChIKey"
              >
                InChIKey
              </a>
            </li>
          </ul>
        </div>

        <button
          type="button"
          @click="performSearch('{{ SERVER_BASE }}')"
          class="btn btn-xs btn-ghost join-item"
        >
          <kbd class="kbd kbd-sm text-base-content/50 p-1">
            <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-corner-down-left-icon lucide-corner-down-left"
            >
              <path d="M20 4v7a4 4 0 0 1-4 4H4" />
              <path d="m9 10-5 5 5 5" />
            </svg>
          </kbd>
        </button>
      </div>
    </div>

    <!-- Package Selector with Pills -->
    <div class="form-control mb-4 shrink-0">
      <!-- Pills Container -->
      <div
        class="border-base-300 m-3 flex min-h-12 flex-wrap items-center gap-2 rounded-lg border-2 border-dashed p-3"
      >
        <!-- Dynamic Pills -->
        <template x-for="pkg in selectedPackages" :key="pkg.url">
          <span class="badge badge-outline gap-2 max-w-xs">
            <span class="truncate" :title="pkg.name" x-text="pkg.name"></span>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="h-4 w-4 cursor-pointer hover:text-error shrink-0 rotate-45"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
              @click="removePackage(pkg.url)"
            >
              <path d="M5 12h14" />
              <path d="M12 5v14" />
            </svg>
          </span>
        </template>

        <!-- Add Package Button -->
        <button
          type="button"
          popovertarget="package_dropdown_menu"
          style="anchor-name: --anchor-packages"
          class="btn btn-sm btn-ghost gap-2 text-base-content/50"
        >
          <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-plus-icon lucide-plus"
          >
            <path d="M5 12h14" />
            <path d="M12 5v14" />
          </svg>
          Add Package
        </button>
      </div>

      <!-- Package Dropdown Menu -->
      <ul
        class="dropdown dropdown-center menu bg-base-200 rounded-box max-h-96 w-80 overflow-y-auto p-2 shadow-lg"
        popover
        x-ref="packageDropdown"
        id="package_dropdown_menu"
        style="position-anchor: --anchor-packages"
      >
        {% if unreviewed_packages %}
          <li class="menu-title">Reviewed Packages</li>
          {% for obj in reviewed_packages %}
            <li>
              <a
                class="package-option flex items-center justify-between"
                data-package-url="{{ obj.url }}"
                data-package-name="{{ obj.name }}"
                @click.prevent.stop="togglePackage('{{ obj.url }}', '{{ obj.name }}')"
              >
                <span>{{ obj.name }}</span>
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  class="h-4 w-4"
                  :class="isPackageSelected('{{ obj.url }}') ? '' : 'hidden'"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke="currentColor"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="M5 13l4 4L19 7"
                  />
                </svg>
              </a>
            </li>
          {% endfor %}
          <li class="menu-title">Unreviewed Packages</li>
          {% for obj in unreviewed_packages %}
            <li>
              <a
                class="package-option flex items-center justify-between"
                data-package-url="{{ obj.url }}"
                data-package-name="{{ obj.name }}"
                @click.prevent.stop="togglePackage('{{ obj.url }}', '{{ obj.name }}')"
              >
                <span>{{ obj.name }}</span>
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  class="h-4 w-4"
                  :class="isPackageSelected('{{ obj.url }}') ? '' : 'hidden'"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke="currentColor"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="M5 13l4 4L19 7"
                  />
                </svg>
              </a>
            </li>
          {% endfor %}
        {% else %}
          <li class="menu-title">Reviewed Packages</li>
          {% for obj in reviewed_packages %}
            <li>
              <a
                class="package-option flex items-center justify-between"
                data-package-url="{{ obj.url }}"
                data-package-name="{{ obj.name }}"
                @click.prevent.stop="togglePackage('{{ obj.url }}', '{{ obj.name }}')"
              >
                <span>{{ obj.name }}</span>
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  class="h-4 w-4"
                  :class="isPackageSelected('{{ obj.url }}') ? '' : 'hidden'"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke="currentColor"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="M5 13l4 4L19 7"
                  />
                </svg>
              </a>
            </li>
          {% endfor %}
        {% endif %}
      </ul>
    </div>

    <!-- Loading Indicator -->
    <div x-show="isSearching" class="flex shrink-0 justify-center py-8">
      <span class="loading loading-spinner loading-lg text-primary"></span>
    </div>

    <!-- Results Container -->
    <div class="min-h-0 flex-1 overflow-y-auto p-2">
      <!-- No packages selected error -->
      <template x-if="results && results.error === 'no_packages'">
        <div class="alert alert-info">
          <svg
            class="w-6 h-6"
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
            />
          </svg>
          <span>Please select at least one package</span>
        </div>
      </template>

      <!-- Search error -->
      <template x-if="error">
        <div class="alert alert-error">
          <svg
            class="w-6 h-6"
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
            />
          </svg>
          <span x-text="error"></span>
        </div>
      </template>

      <!-- No results -->
      <template x-if="results && !results.error && !hasResults()">
        <div class="alert alert-warning">
          <svg
            class="w-6 h-6"
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
            />
          </svg>
          <span>No results found</span>
        </div>
      </template>

      <!-- Results display -->
      <template x-if="results && !results.error && hasResults()">
        <div class="mb-2">
          <div class="text-sm font-semibold text-base-content/70 mb-2">
            Results
          </div>

          <!-- Compounds -->
          <template x-if="results.Compounds && results.Compounds.length > 0">
            <div class="collapse collapse-arrow bg-base-200 mb-2">
              <input type="checkbox" checked />
              <div class="collapse-title font-medium">
                Compounds
                <span
                  class="badge badge-neutral badge-sm ml-2"
                  x-text="results.Compounds.length"
                ></span>
              </div>
              <div class="collapse-content">
                <template x-for="item in results.Compounds" :key="item.url">
                  <a
                    :href="item.url"
                    class="block px-4 py-2 hover:bg-base-300 rounded-lg transition-colors"
                    x-text="item.name"
                  ></a>
                </template>
              </div>
            </div>
          </template>

          <!-- Compound Structures -->
          <template
            x-if="results['Compound Structures'] && results['Compound Structures'].length > 0"
          >
            <div class="collapse collapse-arrow bg-base-200 mb-2">
              <input type="checkbox" checked />
              <div class="collapse-title font-medium">
                Compound Structures
                <span
                  class="badge badge-neutral badge-sm ml-2"
                  x-text="results['Compound Structures'].length"
                ></span>
              </div>
              <div class="collapse-content">
                <template
                  x-for="item in results['Compound Structures']"
                  :key="item.url"
                >
                  <a
                    :href="item.url"
                    class="block px-4 py-2 hover:bg-base-300 rounded-lg transition-colors"
                    x-text="item.name"
                  ></a>
                </template>
              </div>
            </div>
          </template>

          <!-- Rules -->
          <template x-if="results.Rules && results.Rules.length > 0">
            <div class="collapse collapse-arrow bg-base-200 mb-2">
              <input type="checkbox" checked />
              <div class="collapse-title font-medium">
                Rules
                <span
                  class="badge badge-neutral badge-sm ml-2"
                  x-text="results.Rules.length"
                ></span>
              </div>
              <div class="collapse-content">
                <template x-for="item in results.Rules" :key="item.url">
                  <a
                    :href="item.url"
                    class="block px-4 py-2 hover:bg-base-300 rounded-lg transition-colors"
                    x-text="item.name"
                  ></a>
                </template>
              </div>
            </div>
          </template>

          <!-- Reactions -->
          <template x-if="results.Reactions && results.Reactions.length > 0">
            <div class="collapse collapse-arrow bg-base-200 mb-2">
              <input type="checkbox" checked />
              <div class="collapse-title font-medium">
                Reactions
                <span
                  class="badge badge-neutral badge-sm ml-2"
                  x-text="results.Reactions.length"
                ></span>
              </div>
              <div class="collapse-content">
                <template x-for="item in results.Reactions" :key="item.url">
                  <a
                    :href="item.url"
                    class="block px-4 py-2 hover:bg-base-300 rounded-lg transition-colors"
                    x-text="item.name"
                  ></a>
                </template>
              </div>
            </div>
          </template>

          <!-- Pathways -->
          <template x-if="results.Pathways && results.Pathways.length > 0">
            <div class="collapse collapse-arrow bg-base-200 mb-2">
              <input type="checkbox" checked />
              <div class="collapse-title font-medium">
                Pathways
                <span
                  class="badge badge-neutral badge-sm ml-2"
                  x-text="results.Pathways.length"
                ></span>
              </div>
              <div class="collapse-content">
                <template x-for="item in results.Pathways" :key="item.url">
                  <a
                    :href="item.url"
                    class="block px-4 py-2 hover:bg-base-300 rounded-lg transition-colors"
                    x-text="item.name"
                  ></a>
                </template>
              </div>
            </div>
          </template>
        </div>
      </template>
    </div>
  </div>

  <form method="dialog" class="modal-backdrop">
    <button aria-label="close"></button>
  </form>
</dialog>
