const ADBWohneinheitContactManager = {
    modal: null,
    homeId: null,
    header: null,
    contacts: [],
    editingIndex: null,

    init() {
        document.body.addEventListener('click', this.handleBodyClick.bind(this));
    },

    handleBodyClick(e) {
        const trigger = e.target.closest('[data-home-id][data-home-contact]');
        if (trigger) {
            e.preventDefault();
            this.homeId = trigger.dataset.homeId;
            this.openModal();
        }
    },

    async openModal() {
        this.editingIndex = null;
        this.createModal();
        this.showLoading();
        try {
            const response = await axios.post('/ADBWohneinheit/getContacts', { id: this.homeId });
            if (response.data.success) {
                this.contacts = response.data.contacts || [];
                this.header = response.data.header || {};
                this.render();
            } else {
                this.showError(response.data.message);
            }
        } catch (error) {
            this.showError('Fehler beim Laden der Kontaktdaten.');
            console.error(error);
        }
    },

    createModal() {
        if (this.modal) {
            $(this.modal).modal('hide');
            this.modal.remove();
        }

        const modalHtml = `
            <div class="modal fade" id="contactManagerModal" tabindex="-1" role="dialog" aria-labelledby="contactManagerModalLabel" aria-hidden="true">
              <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                  <div class="modal-header">
                    <h5 class="modal-title" id="contactManagerModalLabel">Kontakt verwalten (WE-ID: ${this.homeId})</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                      <span aria-hidden="true">&times;</span>
                    </button>
                  </div>
                  <div class="modal-body">
                    </div>
                </div>
              </div>
            </div>
        `;
        document.body.insertAdjacentHTML('beforeend', modalHtml);
        this.modal = document.getElementById('contactManagerModal');
        $(this.modal).modal('show');
        this.modal.addEventListener('hidden.bs.modal', () => {
            if (document.body.contains(this.modal)) {
                this.modal.remove();
            }
            this.modal = null;
        });
    },

    render() {
        const body = this.modal.querySelector('.modal-body');
        const contactListHtml = this.contacts.map((contact, index) => this.renderContact(contact, index)).join('');

        this.modal.querySelector('.modal-title').innerText = `Kontakt verwalten (WE-ID: ${this.homeId}) [${this.header}]`;

        body.innerHTML = `
            <div class="mb-4">
                <h6>Bestehende Kontakte</h6>
                ${this.contacts.length ? `<ul class="list-group">${contactListHtml}</ul>` : '<p class="text-muted">Keine Kontakte vorhanden.</p>'}
            </div>
            <hr>
            <div>
                <h6>${this.editingIndex !== null ? 'Kontakt bearbeiten' : 'Neuen Kontakt hinzufügen'}</h6>
                ${this.renderForm(this.editingIndex !== null ? this.contacts[this.editingIndex] : {})}
            </div>
        `;
        this.attachFormListeners();
    },

    renderContact(contact, index) {
        const isCompany = contact.firma && contact.firma.trim() !== '';
        const displayName = isCompany ? contact.firma : `${contact.vorname || ''} ${contact.nachname || ''}`.trim();
        const typeLabel = contact.type === 'renter' ? 'Mieter' : (contact.type === 'prospect' ? 'Interessent' : '');
        const typeBadge = typeLabel ? `<span class="badge badge-info ml-2">${typeLabel}</span>` : '';

        return `
            <li class="list-group-item d-flex justify-content-between align-items-center">
                <div>
                    <strong>${displayName}</strong>${typeBadge}
                    <br>
                    <small class="text-muted">${contact.telefon || 'Kein Telefon'} | ${contact.email || 'Keine E-Mail'}</small>
                </div>
                <div>
                    <button class="btn btn-sm btn-outline-primary mr-2" data-action="edit" data-index="${index}"><i class="fas fa-edit"></i> Bearbeiten</button>
                    <button class="btn btn-sm btn-outline-danger" data-action="delete" data-index="${index}"><i class="fas fa-trash"></i> Löschen</button>
                </div>
            </li>
        `;
    },

    renderForm(contact = {}) {
        return `
            <form id="contactForm" class="p-3 bg-light border rounded">
                <div class="form-group row">
                    <label class="col-sm-3 col-form-label">Typ</label>
                    <div class="col-sm-9">
                        <select class="form-control form-control-sm" name="type" required>
                            <option value="" disabled ${!contact.type ? 'selected' : ''}>Bitte wählen...</option>
                            <option value="renter" ${contact.type === 'renter' ? 'selected' : ''}>Mieter</option>
                            <option value="prospect" ${contact.type === 'prospect' ? 'selected' : ''}>Interessent</option>
                        </select>
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-sm-3 col-form-label">Firma</label>
                    <div class="col-sm-9">
                        <input type="text" class="form-control form-control-sm" name="firma" value="${contact.firma || ''}" placeholder="Firmenname">
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-sm-3 col-form-label">Vorname</label>
                    <div class="col-sm-9">
                        <input type="text" class="form-control form-control-sm" name="vorname" value="${contact.vorname || ''}" placeholder="Vorname">
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-sm-3 col-form-label">Nachname</label>
                    <div class="col-sm-9">
                        <input type="text" class="form-control form-control-sm" name="nachname" value="${contact.nachname || ''}" placeholder="Nachname">
                    </div>
                </div>
                 <div class="form-group row">
                    <label class="col-sm-3 col-form-label">Telefon</label>
                    <div class="col-sm-9">
                        <input type="tel" class="form-control form-control-sm" name="telefon" value="${contact.telefon || ''}" placeholder="Telefonnummer">
                    </div>
                </div>
                <div class="form-group row mb-0">
                    <label class="col-sm-3 col-form-label">E-Mail</label>
                    <div class="col-sm-9">
                        <input type="email" class="form-control form-control-sm" name="email" value="${contact.email || ''}" placeholder="E-Mail Adresse">
                    </div>
                </div>
                <hr>
                <div class="text-right">
                    ${this.editingIndex !== null ? `<button class="btn btn-secondary mr-2" data-action="cancel-edit" type="button">Abbrechen</button>` : ''}
                    <button class="btn btn-primary" type="submit"><i class="fas fa-save mr-1"></i> ${this.editingIndex !== null ? 'Änderungen speichern' : 'Kontakt hinzufügen'}</button>
                </div>
            </form>
        `;
    },

    attachFormListeners() {
        const form = this.modal.querySelector('#contactForm');
        if (!form) return;

        const firmaInput = form.querySelector('[name="firma"]');
        const vornameInput = form.querySelector('[name="vorname"]');
        const nachnameInput = form.querySelector('[name="nachname"]');

        const togglePersonFields = () => {
            const isCompany = firmaInput.value.trim() !== '';
            vornameInput.disabled = isCompany;
            nachnameInput.disabled = isCompany;
            if (isCompany) {
                vornameInput.value = '';
                nachnameInput.value = '';
            }
        };

        const toggleCompanyField = () => {
            const isPerson = vornameInput.value.trim() !== '' || nachnameInput.value.trim() !== '';
            firmaInput.disabled = isPerson;
            if (isPerson) {
                firmaInput.value = '';
            }
        };

        firmaInput.addEventListener('input', togglePersonFields);
        vornameInput.addEventListener('input', toggleCompanyField);
        nachnameInput.addEventListener('input', toggleCompanyField);

        togglePersonFields();
        toggleCompanyField();

        form.addEventListener('submit', this.handleFormSubmit.bind(this));

        this.modal.querySelector('.modal-body').addEventListener('click', (e) => {
            const button = e.target.closest('button[data-action]');
            if(!button) return;

            e.preventDefault();
            const action = button.dataset.action;
            const index = button.dataset.index;

            if (action === 'edit') this.handleEdit(index);
            if (action === 'delete') this.handleDelete(index);
            if (action === 'cancel-edit') this.handleCancelEdit();
        });
    },

    handleFormSubmit(e) {
        e.preventDefault();
        const formData = new FormData(e.target);
        const newContact = Object.fromEntries(formData.entries());

        if (this.editingIndex !== null) {
            this.contacts[this.editingIndex] = newContact;
        } else {
            this.contacts.push(newContact);
        }
        this.saveContacts();
    },

    handleEdit(index) {
        this.editingIndex = parseInt(index, 10);
        this.render();
    },

    handleCancelEdit() {
        this.editingIndex = null;
        this.render();
    },

    handleDelete(index) {
        if (confirm('Sollen die Kontaktdaten wirklich gelöscht werden?')) {
            this.contacts.splice(index, 1);
            this.saveContacts();
        }
    },

    async saveContacts() {
        this.showLoading('Speichern...');
        try {
            const response = await axios.post('/ADBWohneinheit/saveContacts', {
                id: this.homeId,
                data: this.contacts
            });

            if (response.data.success) {
                this.editingIndex = null;
                const freshResponse = await axios.post('/ADBWohneinheit/getContacts', { id: this.homeId });
                this.contacts = freshResponse.data.contacts || [];
                this.render();
                window.notify('success', response.data.message);
            } else {
                this.showError(response.data.message);
            }
        } catch(error) {
            this.showError('Fehler beim Speichern der Kontaktdaten.');
            console.error(error);
        }
    },

    showLoading(message = 'Laden...') {
        const body = this.modal.querySelector('.modal-body');
        body.innerHTML = `<div class="text-center p-5"><div class="spinner-border text-primary" role="status"><span class="sr-only">Loading...</span></div><p class="mt-2">${message}</p></div>`;
    },

    showError(message) {
        const body = this.modal.querySelector('.modal-body');
        body.innerHTML = `<div class="alert alert-danger">${message}</div>`;
        setTimeout(() => this.render(), 3000);
    }
};

document.addEventListener('DOMContentLoaded', () => {
    ADBWohneinheitContactManager.init();
});