<% layout('./layouts/boilerplate') %>
<body>
    <div style="height: 110px;"></div>
    <section class="mt-3 mb-8">
        <div class="col-8 offset-1 mt-2 mb-2">
            <h2>Land Details:</h2>
        </div>
        <div class="col-6 offset-4 mt-2 show-card">
            <img src="https://media.istockphoto.com/id/909423306/photo/modern-multilevel-house-exterior-with-pool.webp?b=1&s=170667a&w=0&k=20&c=lVkUVRVlGBio7oMSYkx_tQuydlhJnBkpnVSuBBHtRMM="
                class="card-img-top show-image" alt="show-image">
            <div class="showcard-body">
                <p class="card-text"><b>Land Id: </b><span id="landid"></span></p>
                <p class="card-text"><b>Area: </b><span id="area"></span></p>
                <p class="card-text"><b>Land Address: </b><span id="landAddress"></span></p>
                <p class="card-text"><b>Price: </b><span id="landPrice"></span></p>
            </div>
            <button id="saleBtn" class="button btn-dark mt-3">List Land for Sale</button>
        </div>
        <div style="height: 200px;"></div>
    </section>

    <section class="mt-3 mb-8">
        <div style="height: 200px;"></div>
        <div class="col-8 offset-1 mt-2 mb-2">
            <h2>Buy Requests:</h2>
        </div>
        <div class="col-10 offset-1 mt-2 mb-2">
            <table class="table table-striped">
                <thead>
                    <tr>
                        <th>Buyer Address</th>
                        <th>Buyer Name</th>
                        <th>Buyer Phone</th>
                        <th>Buyer Email</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody id="buyerDetailsTable">
                    <!-- Buyer details will be appended here -->
                </tbody>
            </table>
        </div>
        <div id="proofSection" style="display:none; margin-left:160px">
            <form enctype="multipart/form-data" id="proofForm" >
                <input type="file" id="proofFile" />
                <button id="submitProofBtn" type="submit" class="button btn-dark mt-3">Submit Proof</button>
            </form>
        </div>
        <div style="height: 200px;"></div>
    </section>

    <script src="https://unpkg.com/web3modal"></script>
    <script src="https://unpkg.com/@walletconnect/web3-provider/dist/umd/index.min.js"></script>
    <script src="https://cdn.ethers.io/lib/ethers-5.0.umd.min.js"></script>
    <script>
        const contractABI = JSON.parse('<%- JSON.stringify(contractABI) %>');
        const contractAddress = "0xf7dB55e79E0cbb4E8E016bB22c25DbA13901DCca"; // Your contract address

        async function fetchLandDetails(landId) {
            try {
                await window.ethereum.request({ method: 'eth_requestAccounts' });
                const provider = new ethers.providers.Web3Provider(window.ethereum);
                const signer = provider.getSigner();
                const contract = new ethers.Contract(contractAddress, contractABI, signer);
                const landDetails = await contract.getLandDetails(landId);
                console.log('Land Details:', landDetails);
                document.getElementById('landid').innerText = landId;
                document.getElementById('area').innerText = landDetails.area;
                document.getElementById('landAddress').innerText = landDetails.landAddress;
                document.getElementById('landPrice').innerText = landDetails.landPrice;
                const saleButton = document.getElementById('saleBtn');
                saleButton.addEventListener('click', () => listLandForSale(contract, landId, landDetails.landPrice));
                fetchBuyerDetails(contract, landId); // Fetch buyer details after fetching land details
            } catch (error) {
                console.error('Error fetching land details:', error);
            }
        }

        async function listLandForSale(contract, landId, landPrice) {
            try {
                // Call smart contract function to list land for sale
                const tx = await contract.listLandForSale(landId, landPrice);
                const receipt = await tx.wait();
                console.log('Transaction confirmed:', receipt);
                console.log(`Land with ID ${landId} listed for sale.`);
                const saleButton = document.getElementById('saleBtn');
                saleButton.innerText = 'Land listed for sale';
                saleButton.disabled = true;
            } catch (error) {
                console.error('Error listing land for sale:', error);
                alert("Land Not Verified By Govt, wait for the verification");
            }
        }

        async function fetchBuyerDetails(contract, landId) {
            try {
                const buyerDetailsTable = document.getElementById('buyerDetailsTable');
                const buyer = await contract.getBuyerDetails(landId);
                console.log(buyer);
                
                // Retrieve stored buyers from sessionStorage
                const storedBuyers = JSON.parse(sessionStorage.getItem('buyers')) || [];

                // Check if the buyer is already stored
                const buyerExists = storedBuyers.some(b => b.accountAddress === buyer.accountAddress);

                if (!buyerExists) {
                    // Store new buyer details
                    storedBuyers.push(buyer);
                    sessionStorage.setItem('buyers', JSON.stringify(storedBuyers));

                    const row = document.createElement('tr');
                    row.innerHTML = `
                        <td>${buyer.accountAddress}</td>
                        <td>${buyer.name}</td>
                        <td>${buyer.phoneNumber}</td>
                        <td>${buyer.email}</td>
                        <td><button class="button btn-dark approveBtn">Approve</button></td>
                    `;
                    buyerDetailsTable.appendChild(row);

                    const approveButtons = document.getElementsByClassName('approveBtn');
                    Array.from(approveButtons).forEach((button) => {
                        button.addEventListener('click', (e) => {
                            e.preventDefault();
                            document.getElementById('proofSection').style.display = 'block';
                        });
                    });
                }
                console.log('Buyer Details:', buyer);
            } catch (error) {
                console.log('No buyers found for the given land ID.', error);
            }
        }

        document.getElementById('proofForm').addEventListener('submit', async function (event) {
            event.preventDefault();
            const fileInput = document.getElementById('proofFile');
            const file = fileInput.files[0];
            const formData = new FormData();
            formData.append('file', file);
            await submitForm(formData);
        });
        
        async function submitForm(formData) {
            try {
                const response = await fetch('/uploadDocument', {
                    method: 'POST',
                    body: formData
                });
                const result = await response.json();
                const hash = result.ipfsHash;
                console.log(hash);
                const proofURL = `https://gateway.pinata.cloud/ipfs/${hash}`;
                const urlParams = new URLSearchParams(window.location.search);
                const landId = urlParams.get('landId');
                if (landId) {
                    const provider = new ethers.providers.Web3Provider(window.ethereum);
                    const signer = provider.getSigner();
                    const contract = new ethers.Contract(contractAddress, contractABI, signer);
                    await approveSaleByOwner(contract, landId, proofURL);
                } else {
                    console.error('Land ID not found in URL parameters.');
                }
            } catch (error) {
                console.error('Error uploading proof:', error);
            }
        }
        
        async function approveSaleByOwner(contract, landId, proofURL) {
            try {
                const tx = await contract.approveSaleByOwner(landId, proofURL);
                const receipt = await tx.wait();
                console.log('Sale approved:', receipt);
                alert('Sale approved successfully!');
                // Refresh the page
                window.location.reload();
            } catch (error) {
                console.error('Error approving sale:', error);
            }
        }

        // Extract landId from URL
        const urlParams = new URLSearchParams(window.location.search);
        const landId = urlParams.get('landId');

        if (landId) {
            fetchLandDetails(landId);
        } else {
            console.error('Land ID not found in URL parameters.');
        }
    </script>
</body>
</html>
