{% extends "base_config.html" %}
{% block content %}
<div class="page">
    <div class="section">
        <h2 class="section-title">
            <img class="card-icon" src="/static/assets/icons/github.svg" alt="Github">
            <span class="card-title-text">Github</span>
            <div class="instructions">
                <a href="https://github.com/khoj-ai/khoj/wiki/Setup-Github-integration">ⓘ Help</a>
            </div>
        </h2>
        <form>
            <table>
                <tr>
                    <td>
                        <label for="pat-token">Personal Access Token</label>
                    </td>
                    <td>
                        <input type="text" id="pat-token" name="pat" value="{{ current_config['pat_token'] }}">
                    </td>
                </tr>
            </table>
            <h4>Repositories</h4>
            <div id="repositories" class="section-cards">
                {% for repo in current_config['repos'] %}
                <div class="card repo" id="repo-card-{{loop.index}}">
                    <label for="repo-owner">Repository Owner</label>
                    <input type="text" id="repo-owner-{{loop.index}}" name="repo_owner" value="{{ repo.owner }}">
                    <label for="repo-name">Repository Name</label>
                    <input type="text" id="repo-name-{{loop.index}}" name="repo_name" value="{{ repo.name}}">
                    <label for="repo-branch">Repository Branch</label>
                    <input type="text" id="repo-branch-{{loop.index}}" name="repo_branch" value="{{ repo.branch }}">
                    <button type="button"
                            class="remove-repo-button"
                            onclick="remove_repo({{loop.index}})"
                            id="remove-repo-button-{{loop.index}}">Remove Repository</button>
                </div>
                {% endfor %}
            </div>
            <button type="button" id="add-repository-button">Add Repository</button>
            <table style="display: none;" >
                <tr>
                    <td>
                        <label for="compressed-jsonl">Compressed JSONL (Output)</label>
                    </td>
                    <td>
                        <input type="text" id="compressed-jsonl" name="compressed-jsonl" value="{{ current_config['compressed_jsonl'] }}">
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="embeddings-file">Embeddings File (Output)</label>
                    </td>
                    <td>
                        <input type="text" id="embeddings-file" name="embeddings-file" value="{{ current_config['embeddings_file'] }}">
                    </td>
                </tr>
            </table>
            <div class="section">
                <div id="success" style="display: none;"></div>
                <button id="submit" type="submit">Save</button>
            </div>
        </form>
    </div>
</div>
<style>
    div.repo {
        width: 100%;
        height: 100%;
        grid-template-rows: none;
    }
    div#repositories {
        margin-bottom: 12px;
    }
    button.remove-repo-button {
        background-color: gainsboro;
    }
</style>
<script>
    const add_repo_button = document.getElementById("add-repository-button");
    add_repo_button.addEventListener("click", function(event) {
        event.preventDefault();
        var repo = document.createElement("div");
        repo.classList.add("card");
        repo.classList.add("repo");
        const id = Date.now();
        repo.id = "repo-card-" + id;
        repo.innerHTML = `
            <label for="repo-owner">Repository Owner</label>
            <input type="text" id="repo-owner" name="repo_owner">
            <label for="repo-name">Repository Name</label>
            <input type="text" id="repo-name" name="repo_name">
            <label for="repo-branch">Repository Branch</label>
            <input type="text" id="repo-branch" name="repo_branch">
            <button type="button"
                    class="remove-repo-button"
                    onclick="remove_repo(${id})"
                    id="remove-repo-button-${id}">Remove Repository</button>
        `;
        document.getElementById("repositories").appendChild(repo);
    })

    function remove_repo(index) {
        document.getElementById("repo-card-" + index).remove();
    }

    submit.addEventListener("click", function(event) {
        event.preventDefault();

        const compressed_jsonl = document.getElementById("compressed-jsonl").value;
        const embeddings_file = document.getElementById("embeddings-file").value;
        const pat_token = document.getElementById("pat-token").value;

        if (pat_token == "") {
            document.getElementById("success").innerHTML = "❌ Please enter a Personal Access Token.";
            document.getElementById("success").style.display = "block";
            return;
        }


        var cards = document.getElementById("repositories").getElementsByClassName("repo");
        var repos = [];

        for (var i = 0; i < cards.length; i++) {
            var card = cards[i];
            var owner = card.getElementsByTagName("input")[0].value;
            var name = card.getElementsByTagName("input")[1].value;
            var branch = card.getElementsByTagName("input")[2].value;

            if (owner == "" || name == "" || branch == "") {
                continue;
            }

            repos.push({
                "owner": owner,
                "name": name,
                "branch": branch,
            });
        }

        if (repos.length == 0) {
            document.getElementById("success").innerHTML = "❌ Please add at least one repository.";
            document.getElementById("success").style.display = "block";
            return;
        }

        const csrfToken = document.cookie.split('; ').find(row => row.startsWith('csrftoken'))?.split('=')[1];
        fetch('/api/config/data/content_type/github', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRFToken': csrfToken,
            },
            body: JSON.stringify({
                "pat_token": pat_token,
                "repos": repos,
                "compressed_jsonl": compressed_jsonl,
                "embeddings_file": embeddings_file,
            })
        })
        .then(response => response.json())
        .then(data => {
            if (data["status"] == "ok") {
                document.getElementById("success").innerHTML = "✅ Successfully updated. Go to your <a href='/config'>settings page</a> to complete setup.";
                document.getElementById("success").style.display = "block";
            } else {
                document.getElementById("success").innerHTML = "⚠️ Failed to update settings.";
                document.getElementById("success").style.display = "block";
            }
        })
    });
</script>
{% endblock %}
