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

    <!-- Hero Section with Logo and Search -->
    <section class="hero min-h-[calc(100vh*0.7)] w-full shadow-none"
                style="background-image: url('{% static "/images/hero.png" %}'); background-size: cover; background-position: center;">

            <div class="hero-overlay blur-xs"></div>

            <div class="hero-content flex-col lg:flex-row-reverse w-full h-fit">
                <div class="card bg-base-100 shrink-0 shadow-2xl p-8 w-3/4">
                    <div class="card-body">
                        <fieldset class="fieldset">
                            <div class="flex flex-row justify-between items-center h-fit">
                                <h2 class="card-title text-xl text-neutral-600">Predict Pathway</h2>
                                <label class="toggle text-base-content toggle-xl justify-self-end mb-6 align-baseline">
                                    <input type="checkbox" />
                                    <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>
                                    <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>
                                    </label>
                            </div>
                            <form id="index-form" action="{{ meta.current_package.url }}/pathway" method="POST">
                                {% csrf_token %}
                                 <div id="text-input-container" class="transition-all duration-300 ease-in-out opacity-100 transform scale-100">
                                     <div class="join w-full mx-auto">
                                         <input type="text" id="index-form-text-input" placeholder="cannonical SMILES string" class="input grow input-lg join-item" />
                                         <button class="btn btn-lg bg-primary-950 text-primary-50 join-item">Predict!</button>
                                     </div>
                                     <div class="label flex flex-row gap-2 w-full mt-1" >
                                         <a href="#">Example 1</a>
                                         <a href="#">Example 2</a>
                                         <a class="ml-auto w-[9em]" href="#">Advanced </a> <!-- TODO: positioning a bit sloppy. Better reference button?  -->
                                     </div>
                                 </div>
                                 <div id="ketcher-container" class="hidden w-full transition-all duration-300 ease-in-out opacity-0 transform scale-95">
                                     <iframe id="index-ketcher" src="{% static '/js/ketcher2/ketcher.html' %}"
                                     width="100%" height="510"></iframe>
                                     <button class="btn btn-lg bg-primary-950 text-primary-50 join-item w-full mt-2">Predict!</button>
                                 </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>

            <div class="hero-overlay"></div>
            <div class="hero-content text-neutral-content text-center">
            <div class="max-w-md">

            </div>
            </div>
        </div>
    </section>

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

            <div id="community-news-container" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                <!-- News cards will be populated here -->
                <div id="loading" class="col-span-full flex justify-center">
                    <span class="loading loading-spinner loading-lg"></span>
                </div>
            </div>

            <!-- Fallback for discourse widget -->
            <div class="hidden">
                <d-topics-list discourse-url="https://community.envipath.org"
                              per-page="10"
                              category="10"
                              template="complete"
                              id="discourse-topics">
                </d-topics-list>
            </div>
        </div>
    </section>

    <!-- Mission Statement Section -->
    <section class="py-16 bg-base-100">
        <div class="max-w-4xl mx-auto px-4">
            <h2 class="text-3xl font-bold text-center mb-8">About enviPath</h2>
            <div class="space-y-4 text-center">
                <p class="text-lg">
                    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="text-lg">
                    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>
        </div>
    </section>

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

        // Process discourse topics into individual cards
        function processDiscourseTopics() {
            setTimeout(function() {
                const topicsList = $('#discourse-topics');
                if (topicsList.length && topicsList.find('li').length > 0) {
                    $('#loading').hide();

                    topicsList.find('li').each(function(index) {
                        if (index >= 6) return false; // Limit to 6 cards

                        const $item = $(this);
                        const $link = $item.find('a').first();
                        const title = $link.text().trim();
                        const url = $link.attr('href');
                        const excerpt = $item.find('.topic-excerpt').text().trim() || 'Click to read more...';

                        const card = `
                            <div class="card bg-white shadow-xl hover:shadow-2xl transition-shadow duration-300">
                                <div class="card-body">
                                    <h3 class="card-title text-lg line-clamp-2">
                                        <a href="${url}" target="_blank" class="hover:text-primary">
                                            ${title}
                                        </a>
                                    </h3>
                                    <p class="text-gray-600 line-clamp-3">${excerpt}</p>
                                    <div class="card-actions justify-end mt-4">
                                        <a href="${url}" target="_blank" class="btn btn-sm btn-primary">
                                            Read More
                                        </a>
                                    </div>
                                </div>
                            </div>
                        `;

                        $('#community-news-container').append(card);
                    });
                } else {
                    // Retry if not loaded yet
                    if (index < 10) {
                        processDiscourseTopics();
                    } else {
                        $('#loading').html('<p class="text-gray-500">Unable to load community updates</p>');
                    }
                }
            }, 500);
        }

        // Toggle functionality with smooth animations
        function toggleInputMode() {
            const toggle = $('input[type="checkbox"]');
            const textContainer = $('#text-input-container');
            const ketcherContainer = $('#ketcher-container');

            if (toggle.is(':checked')) {
                // Draw mode - show Ketcher, hide text input
                textContainer.addClass('hidden opacity-0 transform scale-95');
                textContainer.removeClass('opacity-100 transform scale-100');

                // Small delay to allow text container to fade out first
                setTimeout(() => {
                    ketcherContainer.removeClass('hidden opacity-0 transform scale-95');
                    ketcherContainer.addClass('opacity-100 transform scale-100');
                }, 150);
            } else {
                // SMILES mode - show text input, hide Ketcher
                ketcherContainer.addClass('opacity-0 transform scale-95');
                ketcherContainer.removeClass('opacity-100 transform scale-100');

                // Small delay to allow ketcher container to fade out first
                setTimeout(() => {
                    textContainer.removeClass('hidden opacity-0 transform scale-95');
                    textContainer.addClass('opacity-100 transform scale-100');
                }, 150);

                // Transfer SMILES from Ketcher to text input if available
                if (window.indexKetcher && window.indexKetcher.getSmiles) {
                    const smiles = window.indexKetcher.getSmiles();
                    if (smiles && smiles.trim() !== '') {
                        $('#index-form-text-input').val(smiles);
                    }
                }
            }
        }

        // Ketcher integration
        function indexKetcherToTextInput() {
            $('#index-form-smiles').val(this.ketcher.getSmiles());
        }

        $(function () {
            // Toggle event listener
            $('input[type="checkbox"]').on('change', toggleInputMode);

            // Ketcher iframe load handler
            $('#index-ketcher').on('load', function() {
                const checkKetcherReady = () => {
                    const win = this.contentWindow;
                    if (win.ketcher && 'editor' in win.ketcher) {
                        window.indexKetcher = win.ketcher;
                        win.ketcher.editor.event.change.handlers.push({
                            once: false,
                            priority: 0,
                            f: indexKetcherToTextInput,
                            ketcher: win.ketcher
                        });
                    } else {
                        setTimeout(checkKetcherReady, 100);
                    }
                };
                checkKetcherReady();
            });

            // Handle form submission on Enter
            $('#index-form').on("submit", function (e) {
                e.preventDefault();

                var textSmiles = '';

                // Check if we're in Ketcher mode and extract SMILES
                if ($('input[type="checkbox"]').is(':checked') && window.indexKetcher) {
                    textSmiles = window.indexKetcher.getSmiles().trim();
                } else {
                    textSmiles = $('#index-form-text-input').val().trim();
                }

                if (textSmiles === '') {
                    return;
                }

                $('#index-form-smiles').val(textSmiles);
                $("#index-form").attr("action", currentPackage + "/pathway");
                $("#index-form").attr("method", 'POST');
                this.submit();
            });

            // Process discourse topics into cards
            processDiscourseTopics();
        });
    </script>
{% endblock main_content %}