{% extends "framework_modern.html" %}
{% load static %}
{% block main_content %}
  <!-- Hero Section with Logo and Search -->
  <section class="hero relative mx-auto h-fit w-full max-w-5xl shadow-none">
    <div
      class="hero from-primary-800 to-primary-600 min-h-[calc(100vh*0.4)] bg-gradient-to-br"
      style="background-image: url('{% static "/images/hero.png" %}'); background-size: cover; background-position: center;"
    >
      <div class="hero-overlay"></div>
      <!-- Predict Pathway text over the image -->
      <div class="absolute bottom-40 left-1/8 -translate-x-8">
        <h2 class="text-base-100 text-left text-3xl text-shadow-lg">
          Predict Your Pathway
        </h2>
      </div>
    </div>
  </section>

  <div class="bg-base-200 mx-auto max-w-5xl shadow-md">
    <!-- Predict Pathway Section -->
    <div
      class="relative mx-auto -mt-32 mb-10 w-full flex-col lg:flex-row-reverse"
    >
      <div
        class="card bg-base-100 mx-auto w-3/4 shrink-0 shadow-xl transition-all duration-300 ease-in-out"
        x-data="{
          drawMode: false,
          smiles: '',
          loadExample(smilesStr, linkEl) {
            this.smiles = smilesStr;
            console.log(this.smiles, this.drawMode)
            const original = linkEl.textContent;
            linkEl.textContent = 'loaded!';
            setTimeout(() => linkEl.textContent = original, 1000);
          },
          syncFromKetcher() {
            const ketcher = getKetcherInstance('index-ketcher');
            if (ketcher && ketcher.getSmiles) {
              try {
                ketcher.getSmiles().then((smiles) => {
                  if(smiles.trim()) {
                    this.smiles = smiles.trim()
                  }
                });
              } catch (err) {
                console.error('Failed to sync from Ketcher:', err);
              }
            }
          },
          async submitForm() {
            let finalSmiles = '';
            if (this.drawMode) {
              const ketcher = getKetcherInstance('index-ketcher');
              if (ketcher && ketcher.getSmiles) {
                try {
                  finalSmiles = await getSmilesFromKetcher('index-ketcher')
                } catch (err) {
                  console.error('Failed to get SMILES from Ketcher:', err);
                  alert('BBUnable to extract structure. Please try again or switch to SMILES input.');
                  return;
                }
              } else {
                alert('The drawing editor is still loading. Please wait and try again.');
                return;
              }
            } else {
              finalSmiles = this.smiles.trim();
            }
            if (!finalSmiles) {
              alert('Please enter a SMILES string or draw a structure.');
              return;
            }
            document.getElementById('index-form-smiles').value = finalSmiles;
            document.getElementById('index-form').submit();
          }
        }"
        x-init="$watch('drawMode', value => { if (!value) syncFromKetcher(); })"
      >
        <div class="card-body">
          <div class="my-4 ml-8 flex h-fit flex-row items-center justify-start">
            <div class="flex items-center gap-1">
              <label class="swap btn btn-ghost btn-sm p-1" title="Input Mode">
                <input type="checkbox" x-model="drawMode" />
                <span class="swap-on flex items-center gap-1">
                  <div
                    class="bg-neutral/50 text-neutral-content flex items-center justify-center rounded-full p-1"
                  >
                    <svg
                      aria-label="smiles mode"
                      xmlns="http://www.w3.org/2000/svg"
                      viewBox="0 0 20 20"
                      class="size-5"
                    >
                      <g
                        stroke-linejoin="round"
                        stroke-linecap="round"
                        stroke-width="2"
                        fill="currentColor"
                        stroke="none"
                      >
                        <path
                          fill-rule="evenodd"
                          d="M8 2.75A.75.75 0 0 1 8.75 2h7.5a.75.75 0 0 1 0 1.5h-3.215l-4.483 13h2.698a.75.75 0 0 1 0 1.5h-7.5a.75.75 0 0 1 0-1.5h3.215l4.483-13H8.75A.75.75 0 0 1 8 2.75Z"
                          clip-rule="evenodd"
                        />
                      </g>
                    </svg>
                  </div>
                  <span class="ext-xs">SMILES</span>
                </span>
                <span class="swap-off flex items-center gap-1">
                  <div
                    class="bg-neutral/50 text-neutral-content flex items-center justify-center rounded-full p-1"
                  >
                    <svg
                      aria-label="draw mode"
                      xmlns="http://www.w3.org/2000/svg"
                      viewBox="0 0 20 20"
                      fill="currentColor"
                      stroke="none"
                      class="size-5"
                    >
                      <path
                        d="m2.695 14.762-1.262 3.155a.5.5 0 0 0 .65.65l3.155-1.262a4 4 0 0 0 1.343-.886L17.5 5.501a2.121 2.121 0 0 0-3-3L3.58 13.419a4 4 0 0 0-.885 1.343Z"
                      />
                    </svg>
                  </div>
                  <span class="text-base/50 text-xs">Draw</span>
                </span>
              </label>
            </div>
          </div>

          <fieldset
            class="fieldset overflow-hidden transition-all duration-300 ease-in-out"
            :class="drawMode ? 'p-4' : 'p-8'"
          >
            <form
              id="index-form"
              action="{{ meta.current_package.url }}/pathway"
              method="POST"
              @submit.prevent="submitForm()"
            >
              {% csrf_token %}
              <div
                id="text-input-container"
                x-show="!drawMode"
                x-transition:enter="transition ease-out duration-300"
                x-transition:enter-start="opacity-0 scale-95"
                x-transition:enter-end="opacity-100 scale-100"
                x-transition:leave="transition ease-in duration-300"
                x-transition:leave-start="opacity-100 scale-100"
                x-transition:leave-end="opacity-0 scale-95"
              >
                <div class="join mx-auto w-full">
                  <input
                    type="text"
                    id="index-form-text-input"
                    placeholder="canonical SMILES string"
                    class="input input-md join-item grow"
                    x-model="smiles"
                  />
                  <button class="btn btn-neutral join-item">Predict!</button>
                </div>
                <div class="label relative mt-1 w-full">
                  <div class="flex gap-2">
                    <a
                      href="#"
                      class="example-link hover:text-primary cursor-pointer"
                      title="load example"
                      @click.prevent="loadExample('CN1C=NC2=C1C(=O)N(C(=O)N2C)C', $el)"
                      >Caffeine</a
                    >
                    <a
                      href="#"
                      class="example-link hover:text-primary cursor-pointer"
                      title="load example"
                      @click.prevent="loadExample('COC(=O)[C@H](CC1=CC=CC=C1)NC(=O)[C@H](CC(=O)O)N', $el)"
                      >Aspartame</a
                    >
                  </div>
                  <a
                    class="absolute top-0 left-[calc(100%-5.4rem)]"
                    href="/predict"
                    >Advanced</a
                  >
                </div>
              </div>
              <div
                id="ketcher-container"
                x-show="drawMode"
                x-transition:enter="transition ease-out duration-300"
                x-transition:enter-start="opacity-0 scale-95"
                x-transition:enter-end="opacity-100 scale-100"
                x-transition:leave="transition ease-in duration-300"
                x-transition:leave-start="opacity-100 scale-100"
                x-transition:leave-end="opacity-0 scale-95"
                class="w-full"
              >
                <div class="mb-8 w-full">
                  {% with iframe_id="index-ketcher" height="400" text_input_id="index-form-smiles" %}
                    {% include "components/ketcher.html" %}
                  {% endwith %}
                </div>
                <button
                  class="btn btn-lg bg-primary-950 text-primary-50 join-item mt-2 w-full"
                >
                  Predict!
                </button>
                <div class="mt-1 flex w-full justify-end">
                  <a class="label justify-end" href="/predict">Advanced</a>
                </div>
              </div>
              <input
                type="hidden"
                id="index-form-smiles"
                name="smiles"
                value="smiles"
              />
              <input
                type="hidden"
                id="index-form-predict"
                name="predict"
                value="predict"
              />
              <input type="hidden" id="current-action" value="predict" />
            </form>
          </fieldset>
        </div>
      </div>
    </div>

    <!-- Community News Section -->
    <section class="bg-base-200 z-10 mx-8 py-16">
      <div class="mx-auto max-w-7xl px-4">
        <h2 class="h2 mb-8 text-left font-bold">Community Updates</h2>

        <div id="community-news-container" class="flex justify-center gap-4">
          <!-- News cards will be populated here -->
          <div id="loading" class="flex w-full justify-center">
            <span class="loading loading-spinner loading-lg"></span>
          </div>
        </div>

        <div class="mt-6 text-right">
          <a
            href="https://community.envipath.org/c/announcements/10"
            target="_blank"
            class="btn btn-ghost btn-sm"
          >
            Read More Announcements
          </a>
        </div>

        <!-- Discourse API integration -->
        <script src="{% static 'js/discourse-api.js' %}"></script>
      </div>
    </section>

    <!-- Mission Statement Section -->
    <section class="from-base-200 to-base-100 bg-gradient-to-b py-16">
      <div class="mx-auto px-8 md:px-12">
        <div class="flex flex-row gap-4">
          <div class="w-1/3">
            <img
              src="{% static "/images/ep-rule-artwork.png" %}"
              alt="rule-based iterative tree greneration"
              class="h-full w-full object-contain"
            />
          </div>
          <div class="mr-8 w-2/3 space-y-4 text-left">
            <h2 class="h2 mb-8 font-bold">About enviPath</h2>
            <p class="">
              enviPath is a database and prediction system for the microbial
              biotransformation of organic environmental contaminants. The
              database provides the possibility to store and view experimentally
              observed biotransformation pathways.
            </p>
            <p class="">
              The pathway prediction system provides different relative
              reasoning models to predict likely biotransformation pathways and
              products. Explore our tools and contribute to advancing
              environmental biotransformation research.
            </p>
            <div class="float-right flex flex-row gap-4">
              <a href="/about" class="btn btn-ghost-neutral">Read More</a>
              <a href="/cite" class="btn btn-neutral">Publications</a>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Partners Section -->
    <section class="bg-base-100 py-14 sm:py-12">
      <div class="mx-auto px-6 lg:px-8">
        <div class="divider">
          <h2 class="text-center text-lg/8 font-semibold">Backed by Science</h2>
        </div>
        <div
          class="mx-auto mt-10 grid max-w-lg grid-cols-4 items-center gap-x-8 gap-y-10 sm:max-w-xl sm:grid-cols-6 sm:gap-x-10 lg:mx-0 lg:max-w-none lg:grid-cols-3"
        >
          <img
            src="{% static "/images/uoa-logo-small.png" %}"
            alt="The University of Auckland"
            class="max-h-20 w-full object-contain lg:col-span-1"
          />
          <img
            src="{% static "/images/logo-eawag.svg" %}"
            alt="Eawag"
            class="max-h-12 w-full object-contain lg:col-span-1"
          />
          <img
            src="{% static "/images/uzh-logo.svg" %}"
            alt="University of Zurich"
            class="2 max-h-16 w-full object-contain lg:col-span-1"
          />
        </div>
      </div>
    </section>
  </div>

  <script language="javascript">
    var currentPackage = "{{ meta.current_package.url }}";

    // Helper function to safely get Ketcher instance from iframe
    function getKetcherInstance(iframeId) {
      const ketcherFrame = document.getElementById(iframeId);
      if (!ketcherFrame) {
        console.error("Ketcher iframe not found:", iframeId);
        return null;
      }

      try {
        if (
          "contentWindow" in ketcherFrame &&
          ketcherFrame.contentWindow.ketcher
        ) {
          return ketcherFrame.contentWindow.ketcher;
        }
      } catch (err) {
        console.error(
          "Cannot access Ketcher iframe - possible CORS issue:",
          err,
        );
      }

      return null;
    }

    // Discourse API integration is now handled by discourse-api.js

    // Function to render Discourse topics into cards
    function renderDiscourseTopics(topics) {
      const container = document.getElementById("community-news-container");
      if (!container) return;

      // Clear container
      container.innerHTML = "";

      // Create cards for each topic
      topics.forEach((topic) => {
        const card = createDiscourseCard(topic);
        container.insertAdjacentHTML("beforeend", card);
      });
    }

    // Function to create HTML card for a topic
    function createDiscourseCard(topic) {
      const date = new Date(topic.created_at).toLocaleDateString();

      return `
                <div class="card bg-white shadow-sm hover:shadow-lg transition-shadow duration-300 h-52 w-75 flex-shrink-0">
                    <div class="card-body flex flex-col h-full justify-between">
                        <h3 class="card-title leading-tight font-normal tracking-tight mb-2 line-clamp-5 overflow-hidden">
                            <a href="${topic.url}" target="_blank" class="hover:text-primary">
                                ${topic.title}
                            </a>
                        </h3>

                        <div class="flex flex-row items-center justify-between">
                            <div class="flex items-center gap-2">
                                <div class="avatar tooltip tooltip-right" data-tip="${topic.author}">
                                    <div class="w-8 rounded-full">
                                        <img src="${topic.author_avatar}" alt="${topic.author}" />
                                    </div>
                                </div>
                                <span class="text-xs text-gray-500">${date}</span>
                            </div>
                            <a href="${topic.url}" target="_blank" class="btn btn-ghost text-neutral-500 rounded-full p-2">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                    <path d="M12 7v14"/>
                                    <path d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"/>
                                </svg>
                            </a>
                        </div>
                    </div>
                </div>
            `;
    }

    // Make render function globally available
    window.renderDiscourseTopics = renderDiscourseTopics;

    // Ketcher iframe load handler - set up change event to sync SMILES
    document.addEventListener("DOMContentLoaded", function () {
      const indexKetcher = document.getElementById("index-ketcher");
      indexKetcher.addEventListener("load", function () {
        const checkKetcherReady = () => {
          const win = this.contentWindow;
          if (win.ketcher && "editor" in win.ketcher) {
            window.indexKetcher = win.ketcher;
          } else {
            setTimeout(checkKetcherReady, 100);
          }
        };
        checkKetcherReady();
      });
    });
  </script>
{% endblock main_content %}
