{% extends "base.html" %}
{% load static %}
{% load gravatar %}
{% load custom_tags %}
{% block title %}
    Overview | BACON
{% endblock title %}
{% block description %}
    Learn about the BACON project, its key features, and how to get involved in BACON
{% endblock description %}
{% block keywords %}
    overview, BACON, blockchain, contribution, open-source, Bitcoin, Runes, features, updates
{% endblock keywords %}
{% block og_title %}
    BACON Project Overview - BACON
{% endblock og_title %}
{% block og_description %}
    Explore the BACON project, its key features, and how you can contribute to the development and success of the open-source ecosystem through BACON
{% endblock og_description %}
{% block content %}
    <div class="min-h-screen bg-white">
        <div class="max-w-screen-2xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
            <div class="flex flex-col lg:flex-row gap-8">
                <!-- Left Sidebar -->
                <div class="lg:w-64 flex-shrink-0">{% include "includes/sidenav.html" %}</div>
                <!-- Main Content -->
                <div class="flex-1 max-w-[1400px]">
                    <div class="flex flex-col xl:flex-row gap-8">
                        <!-- Left Column -->
                        <div class="xl:w-2/3">
                            <!-- Overview Section -->
                            <section class="bg-white rounded-xl shadow-sm p-8 mb-8">
                                <div class="mb-8 -mx-8 -mt-8">
                                    <img src="{% static 'images/bacon.png' %}"
                                         alt="BACON Project Image"
                                         class="w-full h-auto object-cover rounded-t-xl"
                                         height="auto"
                                         width="auto">
                                </div>
                                <div class="max-w-3xl mx-auto">
                                    <p class="text-gray-700 text-lg leading-relaxed">
                                        BACON (Blockchain Assisted Contribution Network) is an innovative project within the OWASP BLT platform that integrates Bitcoin Core technology and the Runes protocol to reward contributors with blockchain-based incentives. By leveraging the power of blockchain, BACON ensures transparency, security, and fairness in the distribution of rewards, ultimately enhancing the quality and security of open-source software.
                                    </p>
                                </div>
                            </section>
                            <!-- Features Section -->
                            <section class="bg-white rounded-xl shadow-sm p-8 mb-8">
                                <div class="max-w-3xl mx-auto">
                                    <h2 class="text-3xl font-bold mb-6 flex items-center gap-3">
                                        <i class="fas fa-star text-[#e74c3c]"></i>
                                        Key Features
                                    </h2>
                                    <div class="grid md:grid-cols-2 gap-6">
                                        <div class="p-6 rounded-lg border-2 border-gray-100 hover:border-[#e74c3c] transition-colors duration-200">
                                            <div class="flex items-center gap-3 mb-3">
                                                <i class="fas fa-coins text-[#e74c3c] text-xl"></i>
                                                <h3 class="font-semibold text-lg">Incentivized Contributions</h3>
                                            </div>
                                            <p class="text-gray-600">Earn BACON tokens for reporting issues and resolving bugs.</p>
                                        </div>
                                        <div class="p-6 rounded-lg border-2 border-gray-100 hover:border-[#e74c3c] transition-colors duration-200">
                                            <div class="flex items-center gap-3 mb-3">
                                                <i class="fas fa-link text-[#e74c3c] text-xl"></i>
                                                <h3 class="font-semibold text-lg">Blockchain Transparency</h3>
                                            </div>
                                            <p class="text-gray-600">All transactions are securely logged on the Bitcoin blockchain.</p>
                                        </div>
                                        <div class="p-6 rounded-lg border-2 border-gray-100 hover:border-[#e74c3c] transition-colors duration-200">
                                            <div class="flex items-center gap-3 mb-3">
                                                <i class="fas fa-puzzle-piece text-[#e74c3c] text-xl"></i>
                                                <h3 class="font-semibold text-lg">Seamless Integration</h3>
                                            </div>
                                            <p class="text-gray-600">BACON tokens are fully integrated within the BLT ecosystem.</p>
                                        </div>
                                        <div class="p-6 rounded-lg border-2 border-gray-100 hover:border-[#e74c3c] transition-colors duration-200">
                                            <div class="flex items-center gap-3 mb-3">
                                                <i class="fas fa-shield-alt text-[#e74c3c] text-xl"></i>
                                                <h3 class="font-semibold text-lg">Secure Transactions</h3>
                                            </div>
                                            <p class="text-gray-600">Leverage the Runes protocol for safe and immutable transactions.</p>
                                        </div>
                                    </div>
                                </div>
                            </section>
                            <!-- Get Involved Section -->
                            <section class="bg-white rounded-xl shadow-sm p-8">
                                <div class="max-w-3xl mx-auto">
                                    <h2 class="text-3xl font-bold mb-6 flex items-center gap-3">
                                        <i class="fas fa-users text-[#e74c3c]"></i>
                                        Get Involved
                                    </h2>
                                    <p class="text-gray-700 text-lg leading-relaxed mb-8">
                                        We're excited to have the community involved in bringing BACON to life. Whether you're a developer, blockchain expert, or just passionate about open-source, there's a place for you in this project.
                                    </p>
                                    <div class="flex flex-wrap gap-4">
                                        <a href="{% url 'contribution_guidelines' %}"
                                           class="inline-flex select-none items-center justify-center gap-2 px-6 py-3 text-[#e74c3c] border-2 border-[#e74c3c] rounded-lg hover:bg-[#e74c3c] hover:text-white font-medium transition-all duration-200">
                                            <i class="fas fa-book"></i>
                                            Learn How to Contribute
                                        </a>
                                        <a href="https://github.com/owasp/BLT-BACON"
                                           class="inline-flex select-none items-center justify-center gap-2 px-6 py-3 text-[#e74c3c] border-2 border-[#e74c3c] rounded-lg hover:bg-[#e74c3c] hover:text-white font-medium transition-all duration-200">
                                            <i class="fab fa-github"></i>
                                            View on GitHub
                                        </a>
                                    </div>
                                </div>
                            </section>
                        </div>
                        <!-- Right Column -->
                        <div class="xl:w-1/3 space-y-8">
                            <!-- Submit BACON Request Form -->
                            <div class="bg-white rounded-xl shadow-sm p-8 border-2 border-[#e74c3c]">
                                <div class="flex items-center gap-3 mb-6">
                                    <i class="fas fa-bacon text-2xl text-[#e74c3c]"></i>
                                    <h3 class="text-2xl font-bold">Submit Request</h3>
                                </div>
                                <form id="baconForm" class="space-y-6">
                                    <div class="space-y-2">
                                        <label for="github_url" class="block text-sm font-semibold text-gray-700">
                                            <i class="fab fa-github mr-2"></i>GitHub Pull Request URL
                                        </label>
                                        <div class="relative">
                                            <input type="url"
                                                   id="github_url"
                                                   name="github_url"
                                                   placeholder="https://github.com/owner/repo/pull/123"
                                                   class="pl-10 block w-full rounded-lg border-2 border-gray-200 shadow-sm focus:border-[#e74c3c] focus:ring focus:ring-[#e74c3c] focus:ring-opacity-50 transition-all duration-200"
                                                   required>
                                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                                <i class="fas fa-link text-gray-400"></i>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="space-y-2">
                                        <label for="contribution_type"
                                               class="block text-sm font-semibold text-gray-700">
                                            <i class="fas fa-code-branch mr-2"></i>Contribution Type
                                        </label>
                                        <div class="relative">
                                            <select id="contribution_type"
                                                    name="contribution_type"
                                                    class="pl-10 block w-full rounded-lg border-2 border-gray-200 shadow-sm focus:border-[#e74c3c] focus:ring focus:ring-[#e74c3c] focus:ring-opacity-50 transition-all duration-200"
                                                    required>
                                                <option value="" disabled selected>Select contribution type...</option>
                                                <option value="security">Security Related</option>
                                                <option value="non-security">Non-Security Related</option>
                                            </select>
                                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                                <i class="fas fa-shield-alt text-gray-400"></i>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="space-y-2">
                                        <label for="description" class="block text-sm font-semibold text-gray-700">
                                            <i class="fas fa-align-left mr-2"></i>Description
                                        </label>
                                        <div class="relative">
                                            <textarea id="description"
                                                      name="description"
                                                      rows="4"
                                                      placeholder="Describe your contribution..."
                                                      class="pl-10 block w-full rounded-lg border-2 border-gray-200 shadow-sm focus:border-[#e74c3c] focus:ring focus:ring-[#e74c3c] focus:ring-opacity-50 transition-all duration-200"
                                                      required></textarea>
                                            <div class="absolute top-3 left-0 pl-3 flex items-start pointer-events-none">
                                                <i class="fas fa-pen text-gray-400"></i>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="pt-4">
                                        <button type="submit"
                                                class="group w-full inline-flex items-center justify-center gap-2 py-3 px-4 border-2 border-[#e74c3c] rounded-lg bg-[#e74c3c] text-white font-semibold hover:bg-[#c0392b] hover:border-[#c0392b] focus:outline-none focus:ring-2 focus:ring-[#e74c3c] focus:ring-offset-2 transition-all duration-200">
                                            <i class="fas fa-paper-plane group-hover:translate-x-1 transition-transform duration-200"></i>
                                            Submit BACON Request
                                        </button>
                                    </div>
                                </form>
                            </div>
                            <!-- Requests List -->
                            <div class="bg-white rounded-xl shadow-sm p-8">
                                <div class="flex items-center gap-3 mb-6">
                                    <i class="fas fa-list text-2xl text-[#e74c3c]"></i>
                                    <h2 class="text-2xl font-bold">BACON Requests</h2>
                                </div>
                                <!-- Filter Form -->
                                <form method="get" class="space-y-4 mb-8">
                                    <div class="space-y-2">
                                        <label class="block text-sm font-semibold text-gray-700">
                                            <i class="fas fa-filter mr-2"></i>Transaction Status
                                        </label>
                                        <select name="tx-status"
                                                class="block w-full rounded-lg border-2 border-gray-200 shadow-sm focus:border-[#e74c3c] focus:ring focus:ring-[#e74c3c] focus:ring-opacity-50 transition-all duration-200">
                                            <option value="">All Transactions</option>
                                            <option value="pending" {% if tx_status == "pending" %}selected{% endif %}>Pending</option>
                                            <option value="completed"
                                                    {% if tx_status == "completed" %}selected{% endif %}>
                                                Confirmed
                                            </option>
                                        </select>
                                    </div>
                                    <div class="space-y-2">
                                        <label class="block text-sm font-semibold text-gray-700">
                                            <i class="fas fa-tasks mr-2"></i>Request Status
                                        </label>
                                        <select name="decision-status"
                                                class="block w-full rounded-lg border-2 border-gray-200 shadow-sm focus:border-[#e74c3c] focus:ring focus:ring-[#e74c3c] focus:ring-opacity-50 transition-all duration-200">
                                            <option value="">All Statuses</option>
                                            <option value="accepted"
                                                    {% if decision_status == "accepted" %}selected{% endif %}>
                                                Accepted
                                            </option>
                                            <option value="declined"
                                                    {% if decision_status == "declined" %}selected{% endif %}>
                                                Rejected
                                            </option>
                                        </select>
                                    </div>
                                    <button type="submit"
                                            class="w-full inline-flex items-center justify-center gap-2 py-3 px-4 text-[#e74c3c] border-2 border-[#e74c3c] rounded-lg hover:bg-[#e74c3c] hover:text-white font-medium transition-all duration-200">
                                        <i class="fas fa-search"></i>
                                        Apply Filters
                                    </button>
                                </form>
                                <!-- Requests List -->
                                <div class="space-y-6">
                                    {% for submission in submissions %}
                                        <div class="rounded-lg border-2 {% if submission.status == 'accepted' %}border-green-500 bg-green-50{% elif submission.status == 'declined' %}border-red-500 bg-red-50{% else %}border-gray-200{% endif %} p-6 transition-all duration-200 hover:shadow-md">
                                            <div class="flex items-start justify-between mb-4">
                                                <div class="flex items-center gap-3">
                                                    {% if submission.user.userprofile.avatar %}
                                                        <img src="{{ submission.user.userprofile.avatar }}"
                                                             alt="{{ submission.user.username }}"
                                                             class="w-10 h-10 rounded-full"
                                                             width="40"
                                                             height="40">
                                                    {% else %}
                                                        <img src="{% gravatar_url submission.user.email 40 %}"
                                                             alt="{{ submission.user.username }}"
                                                             class="w-10 h-10 rounded-full"
                                                             width="40"
                                                             height="40">
                                                    {% endif %}
                                                    <div>
                                                        <h3 class="font-semibold text-lg">{{ submission.user.username }}</h3>
                                                        <a href="{{ submission.github_url }}"
                                                           target="_blank"
                                                           class="text-[#e74c3c] hover:text-[#c0392b] inline-flex items-center gap-1">
                                                            <i class="fab fa-github"></i>
                                                            View PR
                                                        </a>
                                                    </div>
                                                </div>
                                                <span class="px-3 py-1 rounded-full text-sm font-medium {% if submission.status == 'accepted' %}bg-green-200 text-green-800{% elif submission.status == 'declined' %}bg-red-200 text-red-800{% else %}bg-gray-200 text-gray-800{% endif %}">
                                                    {{ submission.get_status_display }}
                                                </span>
                                            </div>
                                            <div class="space-y-2 text-sm text-gray-600">
                                                <p class="flex items-center gap-2">
                                                    <i class="fas fa-code-branch w-5"></i>
                                                    <span class="font-medium">Type:</span> {{ submission.get_contribution_type_display }}
                                                </p>
                                                <p class="flex items-center gap-2">
                                                    <i class="fas fa-exchange-alt w-5"></i>
                                                    <span class="font-medium">Transaction:</span> {{ submission.get_transaction_status_display }}
                                                </p>
                                                <p class="flex items-center gap-2">
                                                    <i class="fas fa-bacon w-5"></i>
                                                    <span class="font-medium">Amount:</span> {{ submission.bacon_amount }} BACON
                                                </p>
                                            </div>
                                            <div class="mt-4">
                                                <button onclick="toggleDescription('{{ submission.id }}')"
                                                        class="text-[#e74c3c] hover:text-[#c0392b] inline-flex items-center gap-2">
                                                    <i class="fas fa-eye"></i>
                                                    View Description
                                                </button>
                                                <p id="description-{{ submission.id }}"
                                                   class="hidden mt-3 p-4 bg-gray-50 rounded-lg text-gray-700">
                                                    {{ submission.description }}
                                                </p>
                                            </div>
                                            {% if is_mentor %}
                                                <div class="mt-4 pt-4 border-t border-gray-200">
                                                    <button onclick="toggleInspect('{{ submission.id }}')"
                                                            class="w-full inline-flex items-center justify-center gap-2 py-2 px-4 bg-gray-100 hover:bg-gray-200 rounded-lg transition-colors duration-200">
                                                        <i class="fas fa-eye"></i>
                                                        Inspect Request
                                                    </button>
                                                    <div id="inspect-{{ submission.id }}" class="hidden mt-4 space-y-4">
                                                        <div class="p-4 bg-gray-50 rounded-lg space-y-3">
                                                            <p class="flex items-center gap-2">
                                                                <i class="fab fa-github w-5"></i>
                                                                <span class="font-medium">GitHub:</span> {{ submission.user.username }}
                                                            </p>
                                                            <p class="flex items-center gap-2">
                                                                <i class="fas fa-wallet w-5"></i>
                                                                <span class="font-medium">BCH Address:</span>
                                                                <span class="font-mono text-sm">{{ submission.user.userprofile.bch_address }}</span>
                                                            </p>
                                                        </div>
                                                        <div class="space-y-2">
                                                            <label for="bacon-input-{{ submission.id }}"
                                                                   class="block text-sm font-semibold text-gray-700">
                                                                <i class="fas fa-bacon mr-2"></i>BACON Amount
                                                            </label>
                                                            <input type="number"
                                                                   id="bacon-input-{{ submission.id }}"
                                                                   value="{{ submission.bacon_amount }}"
                                                                   class="block w-full rounded-lg border-2 border-gray-200 shadow-sm focus:border-[#e74c3c] focus:ring focus:ring-[#e74c3c] focus:ring-opacity-50 transition-all duration-200">
                                                        </div>
                                                        <div class="flex gap-4">
                                                            <button onclick="updateSubmission('{{ submission.id }}', 'accepted')"
                                                                    class="flex-1 inline-flex items-center justify-center gap-2 py-2 px-4 bg-green-500 hover:bg-green-600 text-white rounded-lg transition-colors duration-200">
                                                                <i class="fas fa-check"></i>
                                                                Accept
                                                            </button>
                                                            <button onclick="updateSubmission('{{ submission.id }}', 'declined')"
                                                                    class="flex-1 inline-flex items-center justify-center gap-2 py-2 px-4 bg-[#e74c3c] hover:bg-[#c0392b] text-white rounded-lg transition-colors duration-200">
                                                                <i class="fas fa-times"></i>
                                                                Reject
                                                            </button>
                                                        </div>
                                                    </div>
                                                </div>
                                            {% endif %}
                                        </div>
                                    {% empty %}
                                        <div class="text-center py-12">
                                            <div class="mx-auto w-24 h-24 rounded-full bg-gray-100 flex items-center justify-center mb-4">
                                                <i class="fas fa-inbox text-4xl text-gray-400"></i>
                                            </div>
                                            <h3 class="text-lg font-medium text-gray-900 mb-2">No Requests Found</h3>
                                            <p class="text-gray-500">Submit a new BACON request to get started!</p>
                                        </div>
                                    {% endfor %}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        document.getElementById("baconForm").addEventListener("submit", function(event) {
            event.preventDefault();
        
            const formData = {
                github_url: document.getElementById("github_url").value,
                contribution_type: document.getElementById("contribution_type").value,
                description: document.getElementById("description").value
            };

            fetch("/api/bacon/submit/", {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                    "X-CSRFToken": "{{ csrf_token }}"
                },
                body: JSON.stringify(formData)
            })
            .then(response => response.json())
            .then(data => {
                if (data.message) {
                    alert("Submission Successful!");
                    document.getElementById("baconForm").reset();
                    window.location.reload();
                } else {
                    alert("Error: " + data.error);
                }
            })
            .catch(error => {
                console.error("Error:", error);
                alert("An unexpected error occurred.");
            });
        });

        function toggleDescription(id) {
            let desc = document.getElementById("description-" + id);
            desc.classList.toggle("hidden");
        }

        function toggleInspect(id) {
            let inspectBox = document.getElementById("inspect-" + id);
            inspectBox.classList.toggle("hidden");
        }

        function updateSubmission(id, status) {
            let baconAmount = document.getElementById("bacon-input-" + id).value;

            fetch(`/update-submission-status/${id}/`, {
                method: "POST",
                headers: {
                    "X-CSRFToken": "{{ csrf_token }}",
                    "Content-Type": "application/json"
                },
                body: JSON.stringify({
                    status: status,
                    bacon_amount: baconAmount
                })
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    document.getElementById("status-" + id).innerText = status.charAt(0).toUpperCase() + status.slice(1);
                    document.getElementById("bacon-amount-" + id).innerText = baconAmount;
                    window.location.reload();
                } else {
                    alert("Error updating submission.");
                }
            })
            .catch(error => console.error("Error:", error));
        }
    </script>
{% endblock content %}