editor.addEventListener('input', (e) => {
    let content = editor.innerHTML;

    // 1. SMART COMMAND: @clock
    if (content.includes('@clock')) {
        const time = new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
        const clockBadge = `<span contenteditable="false" class="bg-sky-500/20 text-sky-400 px-3 py-1 rounded-full text-sm font-bold mx-1 border border-sky-500/30">🕒 ${time}</span>&nbsp;`;
        editor.innerHTML = content.replace('@clock', clockBadge);
        placeCursorAtEnd(editor);
    }

    // 2. SMART COMMAND: @routine
    if (content.includes('@routine')) {
        const routineTemplate = `
            <div contenteditable="false" class="my-8 p-6 bg-[#2e3440] border border-slate-700 rounded-3xl shadow-inner">
                <h3 class="text-sky-400 font-black italic tracking-tighter mb-4 uppercase text-xs">Daily Routine Setup</h3>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                    <div class="p-4 bg-[#1e293b] rounded-xl border border-slate-800">
                        <div class="text-white font-bold mb-2">☀️ Morning</div>
                        <div contenteditable="true" class="text-slate-400 text-sm italic">Click to edit...</div>
                    </div>
                    <div class="p-4 bg-[#1e293b] rounded-xl border border-slate-800">
                        <div class="text-white font-bold mb-2">☁️ Afternoon</div>
                        <div contenteditable="true" class="text-slate-400 text-sm italic">Click to edit...</div>
                    </div>
                    <div class="p-4 bg-[#1e293b] rounded-xl border border-slate-800">
                        <div class="text-white font-bold mb-2">🌙 Evening</div>
                        <div contenteditable="true" class="text-slate-400 text-sm italic">Click to edit...</div>
                    </div>
                </div>
            </div><br>`;
        
        editor.innerHTML = content.replace('@routine', routineTemplate);
        placeCursorAtEnd(editor);
    }

    // 3. AUTO-SAVE
    localStorage.setItem('doc-content', editor.innerHTML);
});

// Helper function to keep typing after inserting a template
function placeCursorAtEnd(el) {
    el.focus();
    if (typeof window.getSelection != "undefined" && typeof document.createRange != "undefined") {
        var range = document.createRange();
        range.selectNodeContents(el);
        range.collapse(false);
        var sel = window.getSelection();
        sel.removeAllRanges();
        sel.addRange(range);
    }
}