script.js

const display = document.getElementById('display');
const keys = document.querySelectorAll('.key');
const keyboardContainer = document.getElementById('keyboard-container');
const closeBtn = document.getElementById('close-keyboard-btn');
const toast = document.getElementById('toast');
const shiftBtn = document.getElementById('shift-btn');
const capsBtn = document.getElementById('caps-btn');

// State
let isShift = false;
let isCaps = false;

// Pemetaan Simbol Shift
const shiftMap = {
    '1': '!', '2': '@', '3': '#', '4': '$', '5': '%',
    '6': '^', '7': '&', '8': '*', '9': '(', '0': ')',
    '-': '_', '=': '+', '[': '{', ']': '}', '\\': '|',
    ';': ':', "'": '"', ',': '<', '.': '>', '/': '?'
};

// --- LOGIKA KEYBOARD MUNCUL/HILANG ---

function showKeyboard() {
    keyboardContainer.classList.remove('hidden');
    // Tampilkan tombol tutup di layar kecil jika mau, atau gunakan tombol di UI
    // Di sini kita bisa membuat textarea sedikit transparan atau memberi efek visual
}

function hideKeyboard() {
    keyboardContainer.classList.add('hidden');
    display.blur(); // Hilangkan fokus
}

// Event: Saat textarea diklik, tampilkan keyboard
display.addEventListener('click', (e) => {
    // Mencegah klik ganda zoom
    e.preventDefault();
    showKeyboard();
});

// Event: Tombol "Sembunyikan" di atas keyboard
closeBtn.addEventListener('click', hideKeyboard);

// Event: Klik di luar keyboard/texarea untuk menutup (opsional)
document.addEventListener('click', (e) => {
    const clickedInsideKeyboard = keyboardContainer.contains(e.target);
    const clickedInsideDisplay = display.contains(e.target);

    if (!clickedInsideKeyboard && !clickedInsideDisplay) {
        hideKeyboard();
    }
});

// --- LOGIKA KETIKAN ---

keys.forEach(key => {
    const handleDown = (e) => {
        e.preventDefault();
        pressKey(key);
    };

    const handleUp = (e) => {
        e.preventDefault();
        releaseKey(key);
    };

    key.addEventListener('mousedown', handleDown);
    key.addEventListener('touchstart', handleDown);
    key.addEventListener('mouseup', handleUp);
    key.addEventListener('touchend', handleUp);
    key.addEventListener('mouseleave', () => key.classList.remove('active'));
});

function pressKey(keyElement) {
    keyElement.classList.add('active');
    if (navigator.vibrate) navigator.vibrate(10);

    const code = keyElement.dataset.code;
    const rawKey = keyElement.dataset.key;

    if (code === 'ShiftLeft' || code === 'ShiftRight') {
        if (!isShift) {
            isShift = true;
            updateKeyLabels();
            highlightShift(true);
        }
        return;
    }

    if (code === 'CapsLock') {
        isCaps = !isCaps;
        capsBtn.classList.toggle('active-state', isCaps);
        updateKeyLabels();
        return;
    }

    if (code === 'Backspace') { deleteChar(); return; }
    if (code === 'Space') { insertChar(' '); return; }
    if (code === 'Enter') { insertChar('\n'); return; }
    if (code === 'Tab') { insertChar('    '); return; }
    if (code === 'Escape') { hideKeyboard(); return; } // ESC menutup keyboard
    
    // Tombol Khusus untuk menutup keyboard jika tidak ada tombol Close
    if (code === 'AltRight' || code === 'ControlRight') {
        // Bisa disesuaikan perilakunya
        return; 
    }

    if (code.startsWith('Arrow')) {
        moveCursor(code);
        return;
    }

    if (rawKey) {
        let charToInsert = rawKey;
        const isLetter = rawKey.length === 1 && rawKey.match(/[a-z]/i);
        
        if (isLetter) {
            charToInsert = (isShift || isCaps) ? rawKey.toUpperCase() : rawKey.toLowerCase();
        } else {
            if (isShift && shiftMap[rawKey]) {
                charToInsert = shiftMap[rawKey];
            }
        }
        insertChar(charToInsert);
    }
}

function releaseKey(keyElement) {
    keyElement.classList.remove('active');
    const code = keyElement.dataset.code;
    if (code === 'ShiftLeft' || code === 'ShiftRight') {
        isShift = false;
        highlightShift(false);
        updateKeyLabels();
    }
}

// --- MANIPULASI TEKS ---

function insertChar(char) {
    const start = display.selectionStart;
    const end = display.selectionEnd;
    const text = display.value;
    display.value = text.substring(0, start) + char + text.substring(end);
    const newPos = start + char.length;
    display.selectionStart = display.selectionEnd = newPos;
}

function deleteChar() {
    const start = display.selectionStart;
    const end = display.selectionEnd;
    const text = display.value;
    
    if (start === end && start > 0) {
        display.value = text.substring(0, start - 1) + text.substring(end);
        display.selectionStart = display.selectionEnd = start - 1;
    } else {
        display.value = text.substring(0, start) + text.substring(end);
        display.selectionStart = display.selectionEnd = start;
    }
}

function moveCursor(direction) {
    let pos = display.selectionStart;
    if (direction === 'ArrowLeft' && pos > 0) pos--;
    if (direction === 'ArrowRight' && pos < display.value.length) pos++;
    // Navigasi atas/bawah disederhanakan untuk contoh ini
    display.selectionStart = display.selectionEnd = pos;
}

// --- VISUAL UPDATE ---

function highlightShift(active) {
    active ? shiftBtn.classList.add('active-state') : shiftBtn.classList.remove('active-state');
}

function updateKeyLabels() {
    keys.forEach(key => {
        const raw = key.dataset.key;
        if (!raw) return;
        let label = raw;
        if (raw.match(/[a-z]/i)) {
            label = (isCaps || isShift) ? raw.toUpperCase() : raw.toLowerCase();
        } else if (shiftMap[raw]) {
            label = isShift ? shiftMap[raw] : raw;
        }
        key.innerHTML = label;
        if (shiftMap[raw]) key.innerHTML += `<span class="shift-hint">${shiftMap[raw]}</span>`;
    });
}

// Toolbar Functions
window.clearText = function() {
    display.value = '';
};
window.copyText = function() {
    display.select();
    navigator.clipboard.writeText(display.value).then(() => {
        toast.style.opacity = '1';
        setTimeout(() => toast.style.opacity = '0', 2000);
    });
};

// Inisialisasi
updateKeyLabels();