script.js

const STORE_KEY = 'wacaller_history';
const MAX_HISTORY = 4;

// Load initially
document.addEventListener('DOMContentLoaded', loadHistory);

function call() {
    const countryCode = document.getElementById("countryCode").value;
    let rawNumber = document.getElementById("phoneNumber").value;

    // Sanitize: keep only digits
    let cleanNumber = rawNumber.replace(/\D/g, '');

    if (!cleanNumber) {
        alert("Please enter a valid phone number.");
        return;
    }

    const fullNumber = countryCode + cleanNumber;
    const link = "https://wa.me/" + fullNumber;

    // Save to history before redirecting
    addToHistory(countryCode, cleanNumber);

    // Open WhatsApp
    window.location.href = link;
}

function addToHistory(code, number) {
    let history = getHistory();
    
    // Format nice display
    const display = `+${code} ${formatLocalNumber(number)}`;
    const fullNumber = code + number;

    // Check if already exists and remove to push it to the top
    history = history.filter(item => item.full !== fullNumber);

    history.unshift({
        full: fullNumber,
        code: code,
        number: number,
        display: display
    });

    if (history.length > MAX_HISTORY) {
        history.pop();
    }

    localStorage.setItem(STORE_KEY, JSON.stringify(history));
    renderHistory(history);
}

function getHistory() {
    try {
        const data = localStorage.getItem(STORE_KEY);
        return data ? JSON.parse(data) : [];
    } catch (e) {
        return [];
    }
}

function clearHistory() {
    localStorage.removeItem(STORE_KEY);
    renderHistory([]);
}

function loadHistory() {
    const history = getHistory();
    renderHistory(history);
}

function renderHistory(history) {
    const section = document.getElementById('recentSection');
    const list = document.getElementById('recentList');
    
    list.innerHTML = '';

    if (history.length === 0) {
        section.style.display = 'none';
        return;
    }

    section.style.display = 'block';

    history.forEach(item => {
        const li = document.createElement('li');
        li.className = 'recent-item';
        li.onclick = () => {
            document.getElementById('countryCode').value = item.code;
            document.getElementById('phoneNumber').value = item.number;
            call(); // auto call if they click it
        };
        
        li.innerHTML = `
            <div class="recent-number">${item.display}</div>
            <div class="recent-action">
               <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <line x1="22" y1="2" x2="11" y2="13"></line>
                    <polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
                </svg>
            </div>
        `;
        list.appendChild(li);
    });
}

// Just a basic formatter for the display text
// Tries to chunk it 3 or 4 digits
function formatLocalNumber(num) {
    if (num.length >= 9) {
        return num.substring(0,3) + ' ' + num.substring(3, 6) + ' ' + num.substring(6);
    }
    return num;
}

// Set focus to the input initially
window.onload = () => {
     document.getElementById('phoneNumber').focus();
};