import { createPopup, destroyAllPopups } from './popupManager.js';

const POST_URL = 'https://api.fedikirche.de/starterpack';
const AUTH_TOKEN = '5e1185f21148c3f6c81cfcd15a3449eadb42c0c248f010810956d926bacffb55';

export function initializeCreateStarterKitPopup() {
    const createButton = document.getElementById('create-starterkit-btn');

    createButton.addEventListener('click', () => {
        const popup = createPopup({
            title: 'Erstelle dein StarterPack',
            body: getStarterKitPopupContent(),
            closeCallback: () => document.documentElement.classList.remove('html-no-scroll'),
            customClass: 'starterkit-popup'
        });

        document.documentElement.classList.add('html-no-scroll');

        setupFormEvents(popup);
    });
}

function getStarterKitPopupContent() {
    return `
        <div class="hint-box">
            <p>
                Mit diesem Formular kannst du dein StarterPack ganz einfach zusammenstellen und einreichen.
            </p>
        </div>
        <form id="starterkit-form">
            <label for="kit-name">Name des StarterPacks:</label>
            <input type="text" id="kit-name" name="kitName" required />
            <label for="kit-description">Beschreibung:</label>
            <textarea id="kit-description" name="kitDescription" required></textarea>
            <label for="kit-author">Autor (z. B. @user@libori.social):</label>
            <input type="text" id="kit-author" name="kitAuthor" required />
            <label for="kit-accounts">Accounts (z. B. @user@kirche.social; ein Account pro Zeile):</label>
            <textarea id="kit-accounts" name="kitAccounts" required></textarea>
            <button type="submit">StarterPack einreichen</button>
        </form>
        <div id="preview-section" style="display:none;">
            <p>Überprüfe die folgenden Daten sorgfältig, bevor du sie absendest:</p>
            <pre id="json-preview"></pre>
            <p>Stimmen die Daten? Wenn ja, klicke auf 'Los gehts!', um deine Eingabe zu übermitteln.</p>
            <button id="confirm-submit">Los gehts!</button>
            <button id="cancel-submit">zurück</button>
        </div>
        <div id="status-section" style="display:none;">
            <p id="status-message"></p>
            <p id="status-details"></p>
            <button id="new-form-btn" style="display:none;">Neues Formular erstellen</button>
        </div>      
        <div class="hint-box">
            <p>
                ℹ️ Die StarterPacks, sowie diese ganze Seite wird von unserem <a href="https://codeberg.org/kirche-im-netz/Startodon-Hub" target="_blank">Codeberg-Repository</a> ausgeliefert. Gerne kannst du dein StarterPack auch direkt als Issue einreichen oder den aktuellen Bearbeitungsstand verfolgen.
            </p>
        </div>  
    `;
}

function setupFormEvents(popup) {
    const form = popup.querySelector('#starterkit-form');
    const previewSection = popup.querySelector('#preview-section');
    const statusSection = popup.querySelector('#status-section');
    const statusMessage = popup.querySelector('#status-message');
    const statusDetails = popup.querySelector('#status-details');
    const newFormButton = popup.querySelector('#new-form-btn');
    const jsonPreview = popup.querySelector('#json-preview');
    const confirmButton = popup.querySelector('#confirm-submit');
    const cancelButton = popup.querySelector('#cancel-submit');

    let starterKit = null;

    form.addEventListener('submit', (event) => {
        event.preventDefault();
        const formData = new FormData(form);

        const kitName = formData.get('kitName');
        const kitDescription = formData.get('kitDescription');
        const kitAuthor = formData.get('kitAuthor').trim();

        // Validierung des Autors
        if (!kitAuthor.match(/^@[a-zA-Z0-9_]+@[a-zA-Z0-9.-]+$/)) {
            alert(`Fehler im Feld "Autor": Ungültiger Mastodon-Handle (${kitAuthor}). Bitte im Format @nutzername@server eingeben.`);
            return;
        }

        // Validierung der Accounts
        const kitAccounts = formData
            .get('kitAccounts')
            .split('\n')
            .map((account, index) => {
                const trimmed = account.trim();
                if (!trimmed.match(/^@[a-zA-Z0-9_]+@[a-zA-Z0-9.-]+$/)) {
                    alert(`Fehler im Feld "Accounts" (Zeile ${index + 1}): Ungültiges Kontoformat (${trimmed}). Bitte im Format @nutzername@server eingeben.`);
                    throw new Error(`Ungültiges Kontoformat: ${trimmed}`);
                }
                return trimmed;
            });

        if (!kitName || !kitDescription || !kitAuthor || kitAccounts.length === 0) {
            alert('Bitte alle Felder ausfüllen.');
            return;
        }

        starterKit = {
            name: kitName,
            description: kitDescription,
            authors: [kitAuthor],
            accounts: kitAccounts,
        };

        form.style.display = 'none';
        previewSection.style.display = 'block';
        jsonPreview.textContent = JSON.stringify(starterKit, null, 2);
    });

    confirmButton.addEventListener('click', async () => {
        confirmButton.disabled = true;
        confirmButton.textContent = 'Absenden...';

        try {
            const response = await fetch(POST_URL, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Authorization': AUTH_TOKEN
                },
                body: JSON.stringify(starterKit)
            });

            previewSection.style.display = 'none';
            statusSection.style.display = 'block';
            if (response.ok) {
                statusMessage.textContent = '✅ Erfolgreich übermittelt!';
                statusDetails.innerHTML = '<strong>Vielen Dank für dein StarterPack! 😇</strong><br>Wir werden es nun prüfen. Sollte alles in Ordnung sein, stellen wir es zeitnah online. In der Regel werden wir dich auch kurz informieren. Informiere dich gerne im <a href="https://codeberg.org/kirche-im-netz/Startodon-Hub" target="_blank">Repository</a> über den aktuellen Stand. <br><br>Möchtest du ein weiteres StarterPack einreichen?';
                newFormButton.style.display = 'block';
            } else {
                statusMessage.textContent = '❌ Fehler beim Einreichen!';
                statusDetails.innerHTML = 'Es gab ein Problem bei der Übermittlung. Bitte überprüfe deine Daten und versuche es erneut. Klappt es dann immer noch nicht, kopiere deine Eingabe und reiche sie gerne direkt als Issue in unserem <a href="https://codeberg.org/kirche-im-netz/Startodon-Hub" target="_blank">Repository</a> ein. <br><br><strong>Bitte informiere kurz <a href="https://libori.social/@alex">@alex@libori.social</a> kurz über den Fehler.</strong>';
            }
        } catch (error) {
            statusMessage.textContent = '❌ Netzwerkfehler!';
            statusDetails.innerHTML = 'Es gab ein Problem bei der Übermittlung. Bitte überprüfe deine Daten und versuche es erneut. Klappt es dann immer noch nicht, kopiere deine Eingabe und reiche sie gerne direkt als Issue in unserem <a href="https://codeberg.org/kirche-im-netz/Startodon-Hub" target="_blank">Repository</a> ein. <br><br><strong>Bitte informiere kurz <a href="https://libori.social/@alex">@alex@libori.social</a> kurz über den Fehler.</strong>';
        }
    });

    cancelButton.addEventListener('click', () => {
        form.style.display = 'block';
        previewSection.style.display = 'none';
    });

    newFormButton.addEventListener('click', () => {
        form.reset();
        form.style.display = 'block';
        statusSection.style.display = 'none';
        confirmButton.disabled = false;
        confirmButton.textContent = 'Los gehts!';
    });
}
