{% extends "base.html" %}
{% load static %}

{% block title %}
Blch - Project
{% endblock %}

{% block content %}
<!-- Donation Section -->
<h2>Donation Tiers</h2>
<ul>
    <li>Tier 1: 0.03 Ether</li>
    <li>Tier 2: 0.06 Ether</li>
    <li>Tier 3: 0.15 Ether</li>
</ul>

<!-- Donation Input and Mint Button -->
<input type="text" id="donationAmount" placeholder="e.g. 0.05">
<button id="mintButton" class="btn btn-primary">Mint NFT</button>

<!-- Transaction Details and Ownership Info -->
<div id="transactionDetails"></div>
<div id="ownershipInfo"></div>
<button id="withdrawButton" class="btn btn-secondary" style="display: none;">Withdraw Funds</button>

<!-- Transaction List -->
<h3>Transaction List</h3>
<ul id="transactionList"></ul>
{% endblock %}

{% block extra_scripts %}
<script type="module">
    import contractABI from '{% static "js/contractABI.js" %}';
    let contract;
    let processedTransactions = new Set();


    let isConfirmed_minted = false;
    let isConfirmed_withdraw = false;

    document.addEventListener('DOMContentLoaded', function () {
        if (typeof window.ethereum !== 'undefined') {
            const web3 = new Web3(window.ethereum);

            const contractAddress = "0xB6dEE524a9c071cA7E7D239300D86cF3218f5560" //"0x8cA7dB580c03331A308bac08DDFa387feC63344B"

            contract = new web3.eth.Contract(contractABI, contractAddress);

            function checkOwnership() {
                contract.methods.owner().call().then(owner => {
                    const ownershipDiv = document.getElementById('ownershipInfo');
                    const currentAddress = web3.utils.toChecksumAddress(web3.eth.currentProvider.selectedAddress);
                    const ownerAddress = web3.utils.toChecksumAddress(owner);

                    if (currentAddress === ownerAddress) {
                        document.getElementById('withdrawButton').style.display = 'block';
                        ownershipDiv.innerHTML = "<p>You are the owner of this contract.</p>";
                    } else {
                        ownershipDiv.innerHTML = "<p>You are not the owner of this contract.</p>";
                    }
                });
            }

            // Fetch and display transaction events from the database
            function displayTransactionEvents() {
                fetch('/api/get_all_events/')
                    .then(response => {
                        if (!response.ok) {
                            throw new Error('Network response was not ok');
                        }
                        return response.json();
                    })
                    .then(data => {
                        const transactionList = document.getElementById('transactionList');
                        transactionList.innerHTML = ''; // Clear the current list


                    if (data.mint_events.length === 0) {
                        transactionList.innerHTML = '<li>No mints</li>';
                        return;
                    }
                    // Process mint events
                    data.mint_events.forEach(event => {
                        const li = document.createElement('li');
                        li.textContent = `${event.user} minted token ${event.tokenId} with donation ${event.donationAmount} Ether`;
                        transactionList.appendChild(li);
                    });

                    if (data.withdraw_events.length === 0) {
                        return;
                    }
                    // Process withdraw events
                    data.withdraw_events.forEach(event => {
                        const li = document.createElement('li');
                        li.textContent = `${event.recipient} withdrew ${event.amount} Ether`;
                        transactionList.appendChild(li);
                    });
                    })
                    .catch(error => console.error('Error fetching events:', error));
            }

            // Initial fetch
            displayTransactionEvents();

            // Initial check
            window.ethereum.request({ method: 'eth_requestAccounts' }).then(() => {
                checkOwnership();
            });

            function getCookie(name) {
                let cookieValue = null;
                if (document.cookie && document.cookie !== '') {
                    const cookies = document.cookie.split(';');
                    for (let i = 0; i < cookies.length; i++) {
                        const cookie = cookies[i].trim();
                        if (cookie.substring(0, name.length + 1) === (name + '=')) {
                            cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                            break;
                        }
                    }
                }
                return cookieValue;
            }

            // Set up the event listener
            contract.events.NFTMinted({
                filter: { user: web3.eth.currentProvider.selectedAddress },
                fromBlock: 'latest'
            }).on('data', function (event) {

                const transactionHash = event.transactionHash;
                if (processedTransactions.has(transactionHash)) {
                    // This transaction has already been processed, so return early
                    return;
                }

                processedTransactions.add(transactionHash);
                const li = document.createElement('li');
                li.textContent = `${event.returnValues.user} minted token ${event.returnValues.tokenId} with donation ${web3.utils.fromWei(event.returnValues.donationAmount, 'ether')} Ether`;
                document.getElementById('transactionList').appendChild(li);

                // Send event data to DB
                fetch('/api/save_transaction_event/', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                        'X-CSRFToken': getCookie('csrftoken')
                    },
                    body: `user=${event.returnValues.user}&tokenId=${event.returnValues.tokenId}&donationAmount=${web3.utils.fromWei(event.returnValues.donationAmount, 'ether')}`
                })
                    .then(response => {
                        return response.json();
                    })
                    .catch(error => console.error("API error:", error));
            });


            // Set up the event listener for Withdrawn
            contract.events.Withdrawn({
                filter: { recipient: web3.eth.currentProvider.selectedAddress },
                fromBlock: 'latest'
            }).on('data', function (event) {

                const transactionHash = event.transactionHash;
                if (processedTransactions.has(transactionHash)) {
                    // This transaction has already been processed, so return early
                    return;
                }

                processedTransactions.add(transactionHash);
                const li = document.createElement('li');
                li.textContent = `${event.returnValues.recipient} withdrew ${web3.utils.fromWei(event.returnValues.amount, 'ether')} Ether`;
                document.getElementById('transactionList').appendChild(li);

                // Send event data to DB
                fetch('/api/save_withdraw_event/', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                        'X-CSRFToken': getCookie('csrftoken')
                    },
                    body: `recipient=${event.returnValues.recipient}&amount=${web3.utils.fromWei(event.returnValues.amount, 'ether')}`
                })
                    .catch(error => console.error('Error saving withdraw event:', error));
            });

            // Mint
            document.getElementById('mintButton').addEventListener('click', async () => {

                isConfirmed_minted = false;
                await window.ethereum.request({ method: 'eth_requestAccounts' });
                const donationAmount = document.getElementById('donationAmount').value;
                const price = web3.utils.toWei(donationAmount, 'ether');

                contract.methods.owner().call().then(owner => {
                    if (web3.eth.currentProvider.selectedAddress === owner) {
                        document.getElementById('withdrawButton').style.display = 'block';
                    }
                });

                contract.methods.mintNFT().send({ from: web3.eth.currentProvider.selectedAddress, value: price })
                    .on('transactionHash', function (hash) {
                        alert('Transaction sent, waiting for confirmation!');
                        fetchTransactionDetails(hash);
                    })
                    .on('confirmation', function (confirmationNumber, receipt) {
                        if (!isConfirmed_minted) {
                            alert('Transaction confirmed!');
                            isConfirmed_minted = true;
                        }
                    })
                    .on('error', function (error, receipt) {
                        alert('Transaction failed!');
                    });
            });

            // Withdraw
            document.getElementById('withdrawButton').addEventListener('click', async () => {
                await window.ethereum.request({ method: 'eth_requestAccounts' });

                isConfirmed_withdraw = false;
                contract.methods.withdraw().send({ from: web3.eth.currentProvider.selectedAddress })
                    .on('transactionHash', function (hash) {
                        alert('Withdrawal initiated, waiting for confirmation!');
                        fetchTransactionDetails(hash);
                    })
                    .on('confirmation', function (confirmationNumber, receipt) {
                        if (!isConfirmed_withdraw) {
                            alert('Withdrawal confirmed!');
                            isConfirmed_withdraw = true;
                        }
                    })
                    .on('error', function (error, receipt) {
                        alert('Withdrawal failed!');
                    });
            });
        } else {
            console.log('MetaMask is not detected');
        }
    });

    function fetchTransactionDetails(hash) {
        const api_key = "1HPKJ67MINAKFND4WNXNYCYZHXPHHMEI64";
        const url = `https://api.etherscan.io/api?module=transaction&action=gettxreceiptstatus&txhash=${hash}&apikey=${api_key}`;

        fetch(url)
            .then(response => response.json())
            .then(data => {
                const detailsDiv = document.getElementById('transactionDetails');
                if (data.status && data.status === "1") {
                    detailsDiv.innerHTML = "<p>Transaction Status: Successful</p>";
                } else {
                    detailsDiv.innerHTML = "<p>Transaction Status: Failed</p>";
                }
            })
            .catch(error => console.error('Error:', error));
    }

</script>
{% endblock %}