const hackerPopup = document.createElement("div");
hackerPopup.id = "hackerLocalStoragePopup";
hackerPopup.innerHTML = `
    <div id="hackerPopupHeader">
        <span>💀 Local Storage Terminal</span>
        <button id="hackerClosePopup">✖</button>
    </div>
    <div id="hackerStorageList"></div>
`;
document.body.appendChild(hackerPopup);

const hackerEditPopup = document.createElement("div");
hackerEditPopup.id = "hackerEditPopup";
hackerEditPopup.innerHTML = `
    <div id="hackerEditHeader">
        <span>⚠️ MODIFY DATA</span>
        <button id="hackerCloseEditPopup">✖</button>
    </div>
    <div id="hackerEditContent">
        <p id="hackerEditKey"></p>
        <textarea id="hackerEditValue"></textarea>
        <button id="hackerApplyEdit">💾 Save Changes</button>
    </div>
`;
document.body.appendChild(hackerEditPopup);

const hackerStyle = document.createElement("style");
hackerStyle.innerHTML = `
    #hackerLocalStoragePopup, #hackerEditPopup {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 400px;
        max-height: 500px;
        overflow-y: auto;
        background: #111;
        border: 2px solid #0f0;
        border-radius: 10px;
        box-shadow: 0 0 15px rgba(0, 255, 0, 0.75);
        padding: 15px;
        display: none;
        z-index: 1000;
        text-shadow: 0 0 5px #0f0;
    }
    #hackerPopupHeader, #hackerEditHeader {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-weight: bold;
        font-size: 16px;
        border-bottom: 2px solid #0f0;
    }
    #hackerClosePopup, #hackerCloseEditPopup {
        background: none;
        border: none;
        font-size: 18px;
        cursor: pointer;
        color: #f00;
        text-shadow: 0 0 5px #f00;
    }
    #hackerClosePopup:hover, #hackerCloseEditPopup:hover {
        color: #ff0;
    }
    .hackerStorageItem {
        padding: 10px;
        border-bottom: 1px dashed #0f0;
        cursor: pointer;
        background: #050;
        border-radius: 6px;
        margin-bottom: 5px;
        transition: background 0.3s ease, transform 0.2s ease;
    }
    .hackerStorageItem:hover {
        background: #0a0;
        transform: scale(1.02);
    }
    .hackerPreview {
        font-size: 12px;
        color: #0f0;
        margin-top: 3px;
        word-wrap: break-word;
    }
    #hackerEditValue {
        width: 100%;
        height: 100px;
        margin-top: 10px;
        border: 1px solid #0f0;
        padding: 8px;
        font-size: 14px;
        background: black;
        color: #0f0;
        text-shadow: 0 0 5px #0f0;
    }
    #hackerApplyEdit {
        margin-top: 10px;
        width: 100%;
        padding: 10px;
        background: #0f0;
        color: black;
        border: none;
        cursor: pointer;
        border-radius: 6px;
        font-size: 14px;
        transition: background 0.2s ease;
    }
    #hackerApplyEdit:hover {
        background: #ff0;
    }
`;
document.head.appendChild(hackerStyle);

function updateHackerStorageList() {
    const listContainer = document.getElementById("hackerStorageList");
    listContainer.innerHTML = "";
    
    Object.keys(localStorage).forEach(key => {
        const itemDiv = document.createElement("div");
        itemDiv.className = "hackerStorageItem";
        
        const keyLabel = document.createElement("span");
        keyLabel.textContent = "🔑 " + key;
        
        const preview = document.createElement("div");
        preview.className = "hackerPreview";
        preview.textContent = localStorage.getItem(key).substring(0, 30) + (localStorage.getItem(key).length > 30 ? "..." : "");
        
        itemDiv.appendChild(keyLabel);
        itemDiv.appendChild(preview);
        itemDiv.onclick = () => editHackerKey(key);
        
        listContainer.appendChild(itemDiv);
    });
}

function editHackerKey(key) {
    document.getElementById("hackerEditKey").textContent = `Editing: ${key}`;
    document.getElementById("hackerEditValue").value = localStorage.getItem(key);
    
    document.getElementById("hackerApplyEdit").onclick = () => {
        localStorage.setItem(key, document.getElementById("hackerEditValue").value);
        updateHackerStorageList();
        hackerEditPopup.style.display = "none";
    };
    
    hackerEditPopup.style.display = "block";
}

document.addEventListener("keydown", (event) => {
    if (event.ctrlKey && event.shiftKey && event.key.toLowerCase() === "h") {
        hackerPopup.style.display = hackerPopup.style.display === "none" ? "block" : "none";
        updateHackerStorageList();
        console.log("ACCESS GRANTED: LocalStorage Viewer Engaged...");
    }
});

document.getElementById("hackerClosePopup").onclick = () => {
    hackerPopup.style.display = "none";
};

document.getElementById("hackerCloseEditPopup").onclick = () => {
    hackerEditPopup.style.display = "none";
};