editor.js

// 編集モードの状態管理
let isEditMode = false;
let contentData = {};

// ページ読み込み時にローカルストレージからデータを復元
window.addEventListener('DOMContentLoaded', () => {
    loadContent();
});

// 編集モード切替
document.getElementById('editToggle').addEventListener('click', function() {
    isEditMode = !isEditMode;
    const editables = document.querySelectorAll('.editable');
    const saveBtn = document.getElementById('saveBtn');
    const imageEdit = document.querySelector('.image-edit');
    
    if (isEditMode) {
        // 編集モードON
        this.textContent = '👁️ プレビュー';
        this.classList.add('active');
        saveBtn.style.display = 'block';
        if (imageEdit) imageEdit.style.display = 'block';
        
        editables.forEach(el => {
            el.setAttribute('contenteditable', 'true');
        });
    } else {
        // 編集モードOFF
        this.textContent = '✏️ 編集モード';
        this.classList.remove('active');
        saveBtn.style.display = 'none';
        if (imageEdit) imageEdit.style.display = 'none';
        
        editables.forEach(el => {
            el.setAttribute('contenteditable', 'false');
        });
    }
});

// 保存ボタン
document.getElementById('saveBtn').addEventListener('click', function() {
    saveContent();
    showMessage('保存しました！ブラウザのローカルストレージに保存されています。', 'success');
});

// コンテンツを保存
function saveContent() {
    const editables = document.querySelectorAll('.editable');
    editables.forEach(el => {
        const key = el.getAttribute('data-key');
        if (key) {
            contentData[key] = el.textContent || el.innerText;
        }
    });
    
    // プロフィール画像のURLも保存
    const profileImg = document.getElementById('profileImg');
    if (profileImg) {
        contentData['profileImage'] = profileImg.src;
    }
    
    // ローカルストレージに保存
    localStorage.setItem('portfolioContent', JSON.stringify(contentData));
}

// コンテンツを読み込み
function loadContent() {
    const saved = localStorage.getItem('portfolioContent');
    if (saved) {
        contentData = JSON.parse(saved);
        
        // 保存されたコンテンツを復元
        Object.keys(contentData).forEach(key => {
            if (key === 'profileImage') {
                const profileImg = document.getElementById('profileImg');
                if (profileImg && contentData[key]) {
                    profileImg.src = contentData[key];
                }
            } else {
                const el = document.querySelector(`[data-key="${key}"]`);
                if (el) {
                    el.textContent = contentData[key];
                }
            }
        });
    }
}

// プロフィール画像を更新
function updateImage() {
    const imageUrl = document.getElementById('imageUrl').value;
    const profileImg = document.getElementById('profileImg');
    
    if (imageUrl && profileImg) {
        profileImg.src = imageUrl;
        showMessage('画像を更新しました！「保存」ボタンを押して保存してください。', 'success');
    } else {
        showMessage('画像URLを入力してください。', 'error');
    }
}

// メッセージを表示
function showMessage(text, type) {
    const messageEl = document.getElementById('saveMessage');
    messageEl.textContent = text;
    messageEl.className = `save-message ${type} show`;
    
    setTimeout(() => {
        messageEl.classList.remove('show');
    }, 3000);
}

// データをリセット（デバッグ用）
function resetContent() {
    if (confirm('すべての変更をリセットしますか？')) {
        localStorage.removeItem('portfolioContent');
        location.reload();
    }
}