---
import Layout from "../../layouts/Layout.astro"
---
<Layout title="">
    <div>
        <h2>Delete Domain</h2>
        <form id="deleteDomainForm">
            <input type="text" id="domainName" placeholder="example.com" required>
            <button type="submit">Delete Domain</button>
        </form>
        <pre id="deleteResponse"></pre>
    </div>

    <script is:inline>
        document.getElementById('deleteDomainForm').addEventListener('submit', async (e) => {
            e.preventDefault();
            const domain = document.getElementById('domainName').value;
            const responseElement = document.getElementById('deleteResponse');
            
            responseElement.textContent = "Deleting domain...";
            
            try {
                const response = await fetch('http://localhost:2058/host-api/v1/delete-domain/', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                    },
                    body: `domain=${encodeURIComponent(domain)}`
                });
                
                const data = await response.json();
                
                if (data.status === 'success') {
                    responseElement.textContent = `✅ ${data.message}\nDomain: ${data.domain}`;
                    // Refresh domain list if needed
                    setTimeout(() => window.location.reload(), 1500);
                } else {
                    responseElement.textContent = `❌ ${data.message}\nError: ${data.error || 'Unknown error'}`;
                }
            } catch (error) {
                responseElement.textContent = `❌ Network Error: ${error.message}`;
            }
        });
    </script>
</Layout>