// update-poi-details-ui.js
import { showToast } from './utilities.js';

export class UpdatePoiDetailsUI {
    static instance = null;

    static getInstance() {
        if (!UpdatePoiDetailsUI.instance) {
            UpdatePoiDetailsUI.instance = new UpdatePoiDetailsUI();
        }
        return UpdatePoiDetailsUI.instance;
    }

    constructor() {
        this.onSaveCallback = null;
        this.data = null;
        this.popupElement = this._createPopupElement();
        this._attachEventListeners();
    }

    _createPopupElement() {
        const popup = document.createElement('div');
        popup.id = 'update-stone-popup';
        popup.classList.add('add-stone-popup-overlay');

        popup.innerHTML = `
            <style>
                .add-stone-popup-overlay {
                    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
                    background-color: rgba(0, 0, 0, 0.6); display: none;
                    justify-content: center; align-items: center; z-index: 1001;
                }
                .add-stone-popup-content {
                    background-color: #fff; padding: 30px; border-radius: 10px;
                    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); width: 90%;
                    max-width: 400px; text-align: center; position: relative;
                    box-sizing: border-box;
                }
                .add-stone-popup-content h3 {
                    margin-top: 0; color: #333; margin-bottom: 20px;
                }
                .add-stone-popup-content label {
                    display: block; text-align: left; margin-bottom: 5px;
                    font-weight: bold; color: #555; width: 100%; box-sizing: border-box;
                }
                .add-stone-popup-content input, .add-stone-popup-content textarea {
                    width: 100%; padding: 10px; margin-bottom: 10px;
                    border: 1px solid #ccc; border-radius: 5px;
                    font-size: 1em; box-sizing: border-box;
                    background-color: #f8f8f8; color: #333; text-align: left;
                }
                .add-stone-popup-content textarea#stonePosition {
                    min-height: 80px; resize: vertical; overflow-y: auto;
                }
                .add-stone-popup-content .popup-buttons {
                    margin-top: 20px; display: flex;
                    justify-content: space-around; gap: 10px; flex-wrap: wrap;
                }
                .add-stone-popup-content button {
                    padding: 10px 20px; border: none; border-radius: 50px;
                    cursor: pointer; font-size: 1em; font-weight: bold;
                    transition: background-color 0.2s ease, transform 0.1s ease;
                    flex-grow: 1; min-width: 120px;
                }
                .add-stone-popup-content button:hover { transform: translateY(-2px); }
                .add-stone-popup-content button#saveStoneButton { background-color: #28a745; color: white; }
                .add-stone-popup-content button#saveStoneButton:hover { background-color: #218838; }
                .add-stone-popup-content button#closePopupButton { background-color: #dc3545; color: white; }
                .add-stone-popup-content button#closePopupButton:hover { background-color: #c82333; }
            </style>
            <div class="add-stone-popup-content">
                <h3>Stolperstein bearbeiten</h3>
                <form id="updateForm">
                    <input type="hidden" id="stoneGID" name="gid">
                    <label for="firstName">Vorname</label>
                    <input type="text" id="firstName" name="first_name" placeholder="Vorname" required>
                    <label for="lastName">Nachname</label>
                    <input type="text" id="lastName" name="last_name" placeholder="Nachname" required>
                    <label for="yearOfBirth">Geburtsjahr</label>
                    <input type="text" id="yearOfBirth" name="year_of_birth" placeholder="Geburtsjahr" required>
                    <label for="stonePosition">Verlegeort des Steins</label>
                    <input type="text" id="stonePosition" name="stone_position" placeholder="leer = 'vor der Haustür'" >
                    <div class="popup-buttons">
                        <button id="saveStoneButton" type="submit">Speichern</button>
                        <button id="closePopupButton" type="button">Schließen</button>
                    </div>
                </form>
            </div>
        `;
        document.body.appendChild(popup);
        return popup;
    }

    _attachEventListeners() {
        const form = this.popupElement.querySelector('#updateForm');
        const closeButton = this.popupElement.querySelector('#closePopupButton');

        form.addEventListener('submit', (e) => {
            e.preventDefault();
            const dataToSave = this._collectFormData();
            if (dataToSave && this.onSaveCallback) {
                this.onSaveCallback(dataToSave);
            } else {
                showToast("Fehler", "Speicherfunktion nicht verfügbar.", 'error');
            }
        });

        closeButton.addEventListener('click', () => {
            this.closePopup();
        });
    }

    showPopup(poiData, onSaveCallback) {
        this.onSaveCallback = onSaveCallback;

        // Wir nutzen poiData (das flache Objekt aus dem Store) direkt:
        this.popupElement.querySelector('#stoneGID').value = poiData.gid;
        this.popupElement.querySelector('#firstName').value = poiData.first_name || '';
        this.popupElement.querySelector('#lastName').value = poiData.last_name || '';
        this.popupElement.querySelector('#yearOfBirth').value = poiData.year_of_birth || '';
        this.popupElement.querySelector('#stonePosition').value = poiData.stone_position || '';

        this.popupElement.style.display = 'flex';
    }
    closePopup() {
        this.popupElement.style.display = 'none';
        this.onSaveCallback = null;
    }

    _collectFormData() {
        const form = this.popupElement.querySelector('#updateForm');
        if (!form.reportValidity()) {
            showToast("Fehler", "Bitte füllen Sie alle erforderlichen Felder aus.");
            return null;
        }

        return {
            gid: form.querySelector('#stoneGID').value,
            first_name: form.querySelector('#firstName').value,
            last_name: form.querySelector('#lastName').value,
            year_of_birth: form.querySelector('#yearOfBirth').value,
            stone_position: form.querySelector('#stonePosition').value,
        };
    }
}