document.addEventListener('DOMContentLoaded', () => {
    const uploadBtn = document.getElementById('upload-btn');
    const imageUpload = document.getElementById('image-upload');
    const canvas = document.getElementById('image-canvas');
    const ctx = canvas.getContext('2d');
    const editSection = document.getElementById('edit-section');
    const historySection = document.getElementById('history-section');
    const projectsSection = document.getElementById('projects-section');
    const historyList = document.getElementById('history-list');
    const projectsList = document.getElementById('projects-list');
    const promptInput = document.getElementById('prompt-input');

    let currentImage = null;
    let history = [];
    let projects = [];

    // Upload Image
    uploadBtn.addEventListener('click', () => {
        const file = imageUpload.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onload = (e) => {
                const img = new Image();
                img.onload = () => {
                    canvas.width = img.width;
                    canvas.height = img.height;
                    ctx.drawImage(img, 0, 0);
                    currentImage = img;
                    editSection.style.display = 'block';
                };
                img.src = e.target.result;
            };
            reader.readAsDataURL(file);
        }
    });

    // Edit Functions (Simulasi)
    document.getElementById('crop-btn').addEventListener('click', () => {
        // Simulasi crop: potong 50% dari kanan
        const cropped = ctx.getImageData(0, 0, canvas.width / 2, canvas.height);
        canvas.width = canvas.width / 2;
        ctx.putImageData(cropped, 0, 0);
        saveToHistory('Cropped');
    });

    document.getElementById('filter-btn').addEventListener('click', () => {
        // Simulasi filter: grayscale
        const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
        const data = imageData.data;
        for (let i = 0; i < data.length; i += 4) {
            const gray = (data[i] + data[i+1] + data[i+2]) / 3;
            data[i] = data[i+1] = data[i+2] = gray;
        }
        ctx.putImageData(imageData, 0, 0);
        saveToHistory('Applied Filter');
    });

    document.getElementById('enhance-btn').addEventListener('click', () => {
        // Simulasi enhance: upscale 2x (sederhana)
        const newWidth = canvas.width * 2;
        const newHeight = canvas.height * 2;
        const tempCanvas = document.createElement('canvas');
        tempCanvas.width = newWidth;
        tempCanvas.height = newHeight;
        const tempCtx = tempCanvas.getContext('2d');
        tempCtx.drawImage(canvas, 0, 0, newWidth, newHeight);
        canvas.width = newWidth;
        canvas.height = newHeight;
        ctx.drawImage(tempCanvas, 0, 0);
        saveToHistory('Enhanced Quality');
    });

    document.getElementById('generate-btn').addEventListener('click', () => {
        const prompt = promptInput.value;
        if (prompt) {
            // Simulasi generate: buat gambar placeholder berdasarkan prompt
            // Ganti dengan API call, e.g., fetch('https://api.openai.com/v1/images/generations', {...})
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.fillStyle = 'lightblue';
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            ctx.fillStyle = 'black';
            ctx.font = '20px Arial';
            ctx.fillText(`Generated: ${prompt}`, 10, 50);
            saveToHistory(`Generated from: ${prompt}`);
        }
    });

    // Menu Navigation
    document.getElementById('history').addEventListener('click', () => {
        editSection.style.display = 'none';
        projectsSection.style.display = 'none';
        historySection.style.display = 'block';
        updateHistoryList();
    });

    document.getElementById('projects').addEventListener('click', () => {
        editSection.style.display = 'none';
        historySection.style.display = 'none';
        projectsSection.style.display = 'block';
        updateProjectsList();
    });

    document.getElementById('create').addEventListener('click', () => {
        const projectName = prompt('Nama Project:');
        if (projectName) {
            projects.push(projectName);
            alert('Project dibuat!');
        }
    });

    function saveToHistory(action) {
        history.push(action);
    }

    function updateHistoryList() {
        historyList.innerHTML = '';
        history.forEach(item => {
            const li = document.createElement('li');
            li.textContent = item;
            historyList.appendChild(li);
        });
    }

    function updateProjectsList() {
        projectsList.innerHTML = '';
        projects.forEach(item => {
            const li = document.createElement('li');
            li.textContent = item;
            projectsList.appendChild(li);
        });
    }
});