script.js

let contacts = [];
let currentEditId = null;
let currentAvatar = "";
let contactModal = null;

document.addEventListener("DOMContentLoaded", () => {
    loadContactsFromStorage();
    contactModal = new bootstrap.Modal(document.getElementById('contactModal'));
    renderAll();
    setupEventListeners();
});

function saveToStorage() {
    localStorage.setItem("myContacts", JSON.stringify(contacts));
}

function loadContactsFromStorage() {
    const stored = localStorage.getItem("myContacts");
    if (stored) contacts = JSON.parse(stored);
}

function generateId() {
    return Date.now().toString(36) + Math.random().toString(36).substr(2);
}

function addContact(contactData) {
    const newContact = {
        id: generateId(),
        ...contactData,
        createdAt: new Date().toISOString()
    };
    contacts.push(newContact);
    saveToStorage();
    renderAll();
}

function updateContact(id, updatedData) {
    const index = contacts.findIndex(c => c.id === id);
    if (index !== -1) {
        contacts[index] = { ...contacts[index], ...updatedData };
        saveToStorage();
        renderAll();
    }
}

function deleteContact(id) {
    Swal.fire({
        title: 'Are you sure?',
        text: "You won't be able to revert this!",
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#d33',
        confirmButtonText: 'Yes, delete it!'
    }).then(result => {
        if (result.isConfirmed) {
            contacts = contacts.filter(c => c.id !== id);
            saveToStorage();
            renderAll();
            Swal.fire('Deleted!', 'Contact has been deleted.', 'success');
        }
    });
}

function toggleFavorite(id) {
    const contact = contacts.find(c => c.id === id);
    if (contact) {
        contact.isFavorite = !contact.isFavorite;
        saveToStorage();
        renderAll();
    }
}

function toggleEmergency(id) {
    const contact = contacts.find(c => c.id === id);
    if (contact) {
        contact.isEmergency = !contact.isEmergency;
        saveToStorage();
        renderAll();
    }
}

function renderAll() {
    const searchTerm = document.getElementById("searchInput").value.toLowerCase();
    const filteredContacts = contacts.filter(c =>
        c.name.toLowerCase().includes(searchTerm) ||
        c.phone.includes(searchTerm) ||
        (c.email && c.email.toLowerCase().includes(searchTerm))
    );
    renderContactsGrid(filteredContacts);
    renderStats();
    renderSidebars();
}

function renderContactsGrid(list) {
    const grid = document.getElementById("contacts-grid");
    if (list.length === 0) {
        grid.innerHTML = `<div class="col-12 text-center text-muted py-5"><i class="fa-solid fa-box-open fs-1 mb-3"></i><p>No contacts found.</p></div>`;
        return;
    }

    grid.innerHTML = list.map(contact => `
        <div class="col-md-6">
            <div class="card contact-card h-100 rounded-4 border-0 shadow-sm bg-white position-relative">
                <div class="custom-badge-position p-3 d-flex flex-column gap-1">
                    ${contact.isFavorite ? '<i class="fa-solid fa-star custom-yellow-icon rounded-circle"></i>' : ''}
                    ${contact.isEmergency ? '<i class="fa-solid fa-heart-pulse custom-red-icon rounded-circle"></i>' : ''}
                </div>

                <div class="card-body">
                    <div class="d-flex align-items-center gap-3 mb-3">
                        ${getAvatarHTML(contact, 'md')}
                        <div>
                            <h6 class="fw-bold mb-0 text-dark">${contact.name}</h6>
                            <small class="text-muted"><i class="fa-solid fa-phone me-1 custom-phone-icon"></i> ${contact.phone}</small>
                        </div>
                    </div>
                    
                    <div class="small text-secondary mb-3">
                        ${contact.email ? `<div class="mb-1"><i class="fa-solid fa-envelope me-2 custom-purple-icon"></i>${contact.email}</div>` : ''}
                        ${contact.address ? `<div><i class="fa-solid fa-location-dot me-2 custom-green-icon"></i>${contact.address}</div>` : ''}
                    </div>

                    <div class="mb-3">
                        ${contact.group ? `<span class="badge badge-${contact.group} rounded-1 fw-normal px-2 py-1 text-capitalize">${contact.group}</span>` : ''}
                        ${contact.isEmergency ? `<span class="badge badge-danger rounded-1 fw-normal px-2 py-1">Emergency</span>` : ''}
                    </div>
                </div>

                <div class="card-footer bg-light border-0 d-flex justify-content-between py-2 rounded-bottom-4">
                    <div>
                        <a href="tel:${contact.phone}" class="custom-green-hover custom-green-icon"><i class="fa-solid fa-phone"></i></a>
                        ${contact.email ? `<a href="mailto:${contact.email}" class="custom-yellow-hover custom-purple-icon"><i class="fa-solid fa-envelope"></i></a>` : ''}
                    </div>
                    <div>
                        <button onclick="toggleFavorite('${contact.id}')" class="btn btn-sm btn-light ${contact.isFavorite ? 'text-warning' : 'text-secondary'}"><i class="fa-${contact.isFavorite ? 'solid' : 'regular'} fa-star"></i></button>
                        <button onclick="toggleEmergency('${contact.id}')" class="btn btn-sm btn-light ${contact.isEmergency ? 'text-danger' : 'text-secondary'}"><i class="fa-solid fa-heart-pulse"></i></button>
                        <button onclick="openEditModal('${contact.id}')" class="btn btn-sm btn-light text-secondary"><i class="fa-solid fa-pen"></i></button>
                        <button onclick="deleteContact('${contact.id}')" class="btn btn-sm btn-light text-secondary"><i class="fa-solid fa-trash"></i></button>
                    </div>
                </div>
            </div>
        </div>
    `).join("");

    document.getElementById("contacts-count").textContent = `Manage and organize your ${list.length} contacts`;
}

function renderStats() {
    const total = contacts.length;
    const favorites = contacts.filter(c => c.isFavorite).length;
    const emergency = contacts.filter(c => c.isEmergency).length;

    document.getElementById("stats-container").innerHTML = `
        <div class="col-md-4">
            <div class="card border-0 shadow-sm rounded-4 px-4 py-3 d-flex flex-row align-items-center gap-3 card-hover-shadow">
                <div class="rounded-4 d-flex justify-content-center align-items-center" 
                     style="width:46px; height:46px; background: #1e63ff; box-shadow: 0px 4px 4px rgba(30, 99, 255, 0.25);">
                    <i class="fa-solid fa-users text-white fs-6"></i>
                </div>
                <div>
                    <small class="text-muted text-uppercase fw-bold">Total</small>
                    <h3 class="fw-bold text-dark mb-0">${total}</h3>
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="card border-0 shadow-sm rounded-4 px-4 py-3 d-flex flex-row align-items-center gap-3 card-hover-shadow">
                <div class="rounded-4 d-flex justify-content-center align-items-center" 
                     style="width:46px; height:46px; background:#ff9800; box-shadow: 0px 4px 4px rgba(255, 152, 0, 0.25);">
                    <i class="fa-solid fa-star text-white fs-6"></i>
                </div>
                <div>
                    <small class="text-muted text-uppercase fw-bold">Favorites</small>
                    <h3 class="fw-bold text-dark mb-0">${favorites}</h3>
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="card border-0 shadow-sm rounded-4 px-4 py-3 d-flex flex-row align-items-center gap-3 card-hover-shadow">
                <div class="rounded-4 d-flex justify-content-center align-items-center" 
                     style="width:46px; height:46px; background:#ff1744; box-shadow: 0px 4px 4px rgba(255, 23, 68, 0.25);">
                    <i class="fa-solid fa-heart-pulse text-white fs-6"></i>
                </div>
                <div>
                    <small class="text-muted text-uppercase fw-bold">Emergency</small>
                    <h3 class="fw-bold text-dark mb-0">${emergency}</h3>
                </div>
            </div>
        </div>
    `;
}

function renderSidebars() {
    const favList = document.getElementById("favorites-list");
    const emergList = document.getElementById("emergency-list");

    const favs = contacts.filter(c => c.isFavorite);
    const emergs = contacts.filter(c => c.isEmergency);

    const createMiniItem = (c, isEmergency = false) => `
        <div class="d-flex align-items-center justify-content-between mb-2 p-2 rounded-4 ${isEmergency ? 'hover-danger' : 'hover-light'}">
            <div class="d-flex align-items-center gap-2">
                ${c.avatar ? `<img src="${c.avatar}" class="mini-avatar-img rounded-3">`
                    : `<div class="mini-avatar d-flex justify-content-center align-items-center fw-bold text-white">${c.name.charAt(0)}</div>`}
                <div class="text-truncate" style="max-width: 120px;">
                    <div class="fw-semibold text-dark small">${c.name}</div>
                    <div class="text-muted" style="font-size: 11px;">${c.phone}</div>
                </div>
            </div>

            <a href="tel:${c.phone}" 
               class="mini-call-btn d-flex justify-content-center align-items-center hover-phone ${isEmergency ? 'dangerbg' : 'lightbg'}">
                <i class="fa-solid fa-phone"></i>
            </a>
        </div>
    `;

    favList.innerHTML = favs.length
        ? favs.map(c => createMiniItem(c)).join("")
        : '<div class="text-center text-muted small py-2">No favorites yet</div>';

    emergList.innerHTML = emergs.length
        ? emergs.map(c => createMiniItem(c, true)).join("")
        : '<div class="text-center text-muted small py-2">No emergency contacts</div>';
}

function getAvatarHTML(contact, size = 'md') {
    if (contact.avatar) {
        return `<img src="${contact.avatar}" class="avatar-${size} rounded-4">`;
    }

    const colors = ['#ef4444', '#4ff916ff', '#f59e0b', '#10b981', '#6366f1', '#8b5cf6', '#ec4899'];
    const charCode = contact.name.charCodeAt(0) || 0;
    const color = colors[charCode % colors.length];
    const initial = contact.name.charAt(0).toUpperCase();

    return `<div class="avatar-${size}" style="background-color: ${color};">${initial}</div>`;
}

window.openAddModal = function () {
    currentEditId = null;
    currentAvatar = "";
    document.getElementById("contactForm").reset();
    document.getElementById("modalTitle").textContent = "Add New Contact";
    document.getElementById("avatarPreview").innerHTML = '<i class="fa-solid fa-user"></i>';
    contactModal.show();
}

window.openEditModal = function (id) {
    const contact = contacts.find(c => c.id === id);
    if (!contact) return;

    currentEditId = id;
    currentAvatar = contact.avatar || "";

    document.getElementById("contactName").value = contact.name;
    document.getElementById("contactPhone").value = contact.phone;
    document.getElementById("contactEmail").value = contact.email || "";
    document.getElementById("contactAddress").value = contact.address || "";
    document.getElementById("contactGroup").value = contact.group || "";
    document.getElementById("contactFavorite").checked = contact.isFavorite;
    document.getElementById("contactEmergency").checked = contact.isEmergency;

    const preview = document.getElementById("avatarPreview");
    preview.innerHTML = currentAvatar
        ? `<img src="${currentAvatar}" class="w-100 h-100 object-fit-cover">`
        : contact.name.charAt(0).toUpperCase();

    document.getElementById("modalTitle").textContent = "Edit Contact";
    contactModal.show();
}

function setupEventListeners() {
    document.getElementById("contactForm").addEventListener("submit", function (e) {
        e.preventDefault();

        const name = document.getElementById("contactName").value.trim();
        const phone = document.getElementById("contactPhone").value.trim();

        if (!name || !phone) {
            Swal.fire("Error", "Name and Phone are required!", "error");
            return;
        }

        const formData = {
            name,
            phone,
            email: document.getElementById("contactEmail").value.trim(),
            address: document.getElementById("contactAddress").value.trim(),
            group: document.getElementById("contactGroup").value,
            isFavorite: document.getElementById("contactFavorite").checked,
            isEmergency: document.getElementById("contactEmergency").checked,
            avatar: currentAvatar
        };

        if (currentEditId) {
            updateContact(currentEditId, formData);
            Swal.fire("Updated", "Contact updated successfully", "success");
        } else {
            if (contacts.some(c => c.phone === phone)) {
                Swal.fire("Error", "Phone number already exists!", "error");
                return;
            }
            addContact(formData);
            Swal.fire("Saved", "Contact added successfully", "success");
        }

        contactModal.hide();
    });

    document.getElementById("avatarInput").addEventListener("change", function (e) {
        const file = e.target.files[0];
        if (!file) return;

        if (!file.type.startsWith("image/")) {
            Swal.fire("Error", "Please select a valid image file!", "error");
            return;
        }

        const reader = new FileReader();
        reader.onload = function (event) {
            currentAvatar = event.target.result;
            document.getElementById("avatarPreview").innerHTML =
                `<img src="${currentAvatar}" class="w-100 h-100 object-fit-cover rounded-4">`;
        };
        reader.readAsDataURL(file);
    });

    document.getElementById("searchInput").addEventListener("input", renderAll);
}