let contacts = [];

// Load contacts on page load
document.addEventListener('DOMContentLoaded', async () => {
    await loadContacts();

    // Add event listeners after the DOM is loaded
    const newContactButton = document.querySelector('.newcontact-button');
    const searchContactInput = document.getElementById('search-contact');

    newContactButton.addEventListener('click', addNewContact);  // Button click event
    searchContactInput.addEventListener('input', searchContacts); // Search input event
});

async function loadContacts() {
    const response = await fetch('/api/contacts');
    if (response.ok) {
        contacts = await response.json();
        displayContacts(contacts);
    } else {
        console.error('Failed to load contacts');
    }
}

function formatTimestamp(timestamp) {
    if (!timestamp) return 'Never';
    const date = new Date(timestamp);
    return date.toLocaleString();
}

function displayContacts(contactList) {
    const container = document.getElementById('contacts-container');
    container.innerHTML = '';
    contactList.forEach(contact => {
        const contactDiv = createContactDiv(contact);
        container.appendChild(contactDiv);
    });
}

function createContactDiv(contact) {
    const contactDiv = document.createElement('div');
    contactDiv.className = 'contact';
    contactDiv.dataset.name = contact.name;
    contactDiv.innerHTML = `
        <div class="contact-inputs">
            <input type="text" placeholder="Name" value="${contact.name}" onchange="markContactAsModified(this)">
            <input type="text" placeholder="Organization" value="${contact.organization || ''}" onchange="markContactAsModified(this)">
            <input type="text" placeholder="Telephone" value="${contact.telephone || ''}" onchange="markContactAsModified(this)">
            <input type="text" placeholder="Second Telephone" value="${contact.secondTelephone || ''}" onchange="markContactAsModified(this)">
            <input type="text" placeholder="Email" value="${contact.email || ''}" onchange="markContactAsModified(this)">
        </div>
        <div class="sbutton-container">
            <button class="save-button">Save</button>
            <button class="delete-button">Delete</button>
        </div>
        <div class="last-modified">
            Last modified: ${formatTimestamp(contact.lastModified)}
        </div>
    `;
    contactDiv.querySelector('.save-button').addEventListener('click', () => saveContact(contactDiv));  // Save button
    contactDiv.querySelector('.delete-button').addEventListener('click', () => deleteContact(contactDiv));  // Delete button
    return contactDiv;
}

function markContactAsModified(input) {
    const contactDiv = input.closest('.contact');
    contactDiv.classList.add('modified');
}

function getContactFromDiv(contactDiv) {
    return {
        name: contactDiv.querySelector('input[placeholder="Name"]').value.trim(),
        organization: contactDiv.querySelector('input[placeholder="Organization"]').value.trim(),
        telephone: contactDiv.querySelector('input[placeholder="Telephone"]').value.trim(),
        secondTelephone: contactDiv.querySelector('input[placeholder="Second Telephone"]').value.trim(),
        email: contactDiv.querySelector('input[placeholder="Email"]').value.trim(),
        lastModified: null // will be set after save
    };
}

async function saveContact(contactDiv) {
    let contactData = getContactFromDiv(contactDiv);

    // Basic validation
    if (!contactData.name) {
        alert('Name is required.');
        return;
    }

    contactData.lastModified = new Date().toISOString();

    try {
        const response = await fetch('/api/contacts', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify(contactData),
        });

        if (response.ok) {
            const savedContact = await response.json();

            // Update local contacts array
            const index = contacts.findIndex(c => c.name === savedContact.name);
            if (index !== -1) {
                contacts[index] = savedContact;
            } else {
                contacts.push(savedContact);
            }

            // Update UI
            contactDiv.classList.remove('modified');
            contactDiv.dataset.name = savedContact.name;
            const lastModifiedDiv = contactDiv.querySelector('.last-modified');
            lastModifiedDiv.textContent = 'Last modified: ' + formatTimestamp(savedContact.lastModified);

        } else {
            alert('Failed to save contact.');
        }
    } catch (error) {
        console.error('Error saving contact:', error);
        alert('Error saving contact.');
    }
}

async function deleteContact(contactDiv) {
    const contactName = contactDiv.dataset.name;

    if (!contactName) {
        // This might be a new unsaved contact, just remove from UI
        contactDiv.remove();
        return;
    }

    if (!confirm(`Are you sure you want to delete contact "${contactName}"?`)) {
        return;
    }

    try {
        const response = await fetch('/api/contacts', {
            method: 'DELETE',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({ name: contactName }),
        });

        if (response.ok) {
            // Remove from local contacts and UI
            contacts = contacts.filter(c => c.name !== contactName);
            contactDiv.remove();
            alert('Contact deleted successfully');
        } else {
            alert('Failed to delete contact.');
        }
    } catch (error) {
        console.error('Error deleting contact:', error);
        alert('Error deleting contact.');
    }
}

function addNewContact() {
    const container = document.getElementById('contacts-container');
    const newContact = {
        name: '',
        organization: '',
        telephone: '',
        secondTelephone: '',
        email: '',
        lastModified: null
    };
    contacts.unshift(newContact);
    const contactDiv = createContactDiv(newContact);
    container.insertBefore(contactDiv, container.firstChild);
}

function searchContacts() {
    const searchTerm = document.getElementById('search-contact').value.toLowerCase();
    const filteredContacts = contacts.filter(contact =>
        (contact.name && contact.name.toLowerCase().includes(searchTerm)) ||
        (contact.organization && contact.organization.toLowerCase().includes(searchTerm)) ||
        (contact.email && contact.email.toLowerCase().includes(searchTerm))
    );
    displayContacts(filteredContacts);
}