/**
 * 글벗 Light - 편집 바 모듈
 * editor.js
 */

// ===== 전역 변수 =====
let isEditing = false;
let activeBlock = null;
let historyStack = [];
let redoStack = [];
const MAX_HISTORY = 50;
let isApplyingFormat = false;

// ===== 편집 바 HTML 생성 =====
function createFormatBar() {
    const formatBarHTML = `
        <div class="format-bar" id="formatBar">
            <select class="format-select" id="fontFamily" onchange="applyFontFamily(this.value)">
                <option value="Noto Sans KR">Noto Sans KR</option>
                <option value="맑은 고딕">맑은 고딕</option>
                <option value="나눔고딕">나눔고딕</option>
                <option value="돋움">돋움</option>
            </select>
            <input type="number" class="format-select" id="fontSizeInput" value="12" min="8" max="72" 
                style="width:55px;" onchange="applyFontSizeInput(this.value)">
            <div class="format-divider"></div>
            <button class="format-btn" id="btnBold" onclick="formatText('bold')"><b>B</b><span class="tooltip">굵게 (Ctrl+B)</span></button>
            <button class="format-btn" id="btnItalic" onclick="formatText('italic')"><i>I</i><span class="tooltip">기울임 (Ctrl+I)</span></button>
            <button class="format-btn" id="btnUnderline" onclick="formatText('underline')"><u>U</u><span class="tooltip">밑줄 (Ctrl+U)</span></button>
            <button class="format-btn" id="btnStrike" onclick="formatText('strikeThrough')"><s>S</s><span class="tooltip">취소선</span></button>
            <div class="format-divider"></div>
            <button class="format-btn" onclick="adjustLetterSpacing(-0.5)">A⇠<span class="tooltip">자간 줄이기</span></button>
            <button class="format-btn" onclick="adjustLetterSpacing(0.5)">A⇢<span class="tooltip">자간 늘리기</span></button>
            <div class="format-divider"></div>
            <div class="color-picker-btn format-btn">
                <span style="border-bottom:3px solid #000;">A</span>
                <input type="color" id="textColor" value="#000000" onchange="applyTextColor(this.value)">
                <span class="tooltip">글자 색상</span>
            </div>
            <div class="color-picker-btn format-btn">
                <span style="background:#ff0;padding:0 4px;">A</span>
                <input type="color" id="bgColor" value="#ffff00" onchange="applyBgColor(this.value)">
                <span class="tooltip">배경 색상</span>
            </div>
            <div class="format-divider"></div>
            <button class="format-btn" onclick="formatText('justifyLeft')">⫷<span class="tooltip">왼쪽 정렬</span></button>
            <button class="format-btn" onclick="formatText('justifyCenter')">☰<span class="tooltip">가운데 정렬</span></button>
            <button class="format-btn" onclick="formatText('justifyRight')">⫸<span class="tooltip">오른쪽 정렬</span></button>
            <div class="format-divider"></div>
            <button class="format-btn" onclick="toggleBulletList()">•≡<span class="tooltip">글머리 기호</span></button>
            <button class="format-btn" onclick="toggleNumberList()">1.<span class="tooltip">번호 목록</span></button>
            <button class="format-btn" onclick="adjustIndent(-1)">⇤<span class="tooltip">내어쓰기</span></button>
            <button class="format-btn" onclick="adjustIndent(1)">⇥<span class="tooltip">들여쓰기</span></button>
            <div class="format-divider"></div>
            <button class="format-btn" onclick="openTableModal()">▦<span class="tooltip">표 삽입</span></button>
            <button class="format-btn" onclick="insertImage()">🖼️<span class="tooltip">그림 삽입</span></button>
            <button class="format-btn" onclick="insertHR()">―<span class="tooltip">구분선</span></button>
            <div class="format-divider"></div>
            <select class="format-select" onchange="applyHeading(this.value)" style="min-width:100px;">
                <option value="">본문</option>
                <option value="h1">제목 1</option>
                <option value="h2">제목 2</option>
                <option value="h3">제목 3</option>
            </select>
        </div>
    `;
    return formatBarHTML;
}

// ===== 표 삽입 모달 HTML 생성 =====
function createTableModal() {
    const modalHTML = `
        <div class="table-modal" id="tableModal">
            <div class="table-modal-content">
                <div class="table-modal-title">▦ 표 삽입</div>
                <div class="table-modal-row">
                    <label>행 수</label>
                    <input type="number" id="tableRows" value="3" min="1" max="20">
                </div>
                <div class="table-modal-row">
                    <label>열 수</label>
                    <input type="number" id="tableCols" value="3" min="1" max="10">
                </div>
                <div class="table-modal-row">
                    <label>헤더 행 포함</label>
                    <input type="checkbox" id="tableHeader" checked>
                </div>
                <div class="table-modal-buttons">
                    <button class="table-modal-btn secondary" onclick="closeTableModal()">취소</button>
                    <button class="table-modal-btn primary" onclick="insertTable()">삽입</button>
                </div>
            </div>
        </div>
    `;
    return modalHTML;
}

// ===== 토스트 컨테이너 생성 =====
function createToastContainer() {
    if (!document.getElementById('toastContainer')) {
        const container = document.createElement('div');
        container.id = 'toastContainer';
        container.className = 'toast-container';
        document.body.appendChild(container);
    }
}

// ===== 토스트 메시지 =====
function toast(message) {
    createToastContainer();
    const container = document.getElementById('toastContainer');
    const toastEl = document.createElement('div');
    toastEl.className = 'toast';
    toastEl.textContent = message;
    container.appendChild(toastEl);
    setTimeout(() => toastEl.remove(), 3000);
}

// ===== iframe 참조 가져오기 =====
function getPreviewIframe() {
    return document.getElementById('previewFrame');
}

function getIframeDoc() {
    const iframe = getPreviewIframe();
    if (!iframe) return null;
    return iframe.contentDocument || iframe.contentWindow.document;
}

// ===== 기본 포맷 명령 =====
function formatText(command, value = null) {
    const doc = getIframeDoc();
    if (!doc || !isEditing) return;
    saveState();
    doc.execCommand(command, false, value);
}

// ===== 자간 조절 =====
function adjustLetterSpacing(delta) {
    const doc = getIframeDoc();
    if (!doc || !isEditing) return;
    
    isApplyingFormat = true;
    const selection = doc.getSelection();
    if (!selection || selection.rangeCount === 0 || selection.isCollapsed) {
        toast('텍스트를 선택해주세요');
        return;
    }
    
    saveState();
    const range = selection.getRangeAt(0);
    let targetNode = range.commonAncestorContainer;
    if (targetNode.nodeType === Node.TEXT_NODE) targetNode = targetNode.parentNode;
    
    const computed = doc.defaultView.getComputedStyle(targetNode);
    const currentSpacing = parseFloat(computed.letterSpacing) || 0;
    const newSpacing = currentSpacing + delta;
    
    if (targetNode.tagName === 'SPAN' && range.toString() === targetNode.textContent) {
        targetNode.style.letterSpacing = newSpacing + 'px';
    } else {
        try {
            const span = doc.createElement('span');
            span.style.letterSpacing = newSpacing + 'px';
            range.surroundContents(span);
        } catch (e) {
            const fragment = range.extractContents();
            const span = doc.createElement('span');
            span.style.letterSpacing = newSpacing + 'px';
            span.appendChild(fragment);
            range.insertNode(span);
        }
    }
    toast('자간: ' + newSpacing.toFixed(1) + 'px');
    setTimeout(() => { isApplyingFormat = false; }, 100);
}

// ===== 색상 적용 =====
function applyTextColor(color) { formatText('foreColor', color); }
function applyBgColor(color) { formatText('hiliteColor', color); }

// ===== 목록 =====
function toggleBulletList() { formatText('insertUnorderedList'); }
function toggleNumberList() { formatText('insertOrderedList'); }

// ===== 들여쓰기 =====
function adjustIndent(direction) {
    const doc = getIframeDoc();
    if (!doc || !isEditing) return;
    
    if (activeBlock) {
        saveState();
        const current = parseInt(activeBlock.style.marginLeft) || 0;
        activeBlock.style.marginLeft = Math.max(0, current + (direction * 20)) + 'px';
        toast(direction > 0 ? '→ 들여쓰기' : '← 내어쓰기');
    } else {
        formatText(direction > 0 ? 'indent' : 'outdent');
    }
}

// ===== 제목 스타일 =====
function applyHeading(tag) {
    const doc = getIframeDoc();
    if (!doc || !isEditing || !activeBlock) return;
    
    saveState();
    const content = activeBlock.innerHTML;
    let newEl;
    
    if (tag === '') {
        newEl = doc.createElement('p');
        newEl.innerHTML = content;
        newEl.style.fontSize = '12pt';
        newEl.style.lineHeight = '1.6';
    } else {
        newEl = doc.createElement(tag);
        newEl.innerHTML = content;
        if (tag === 'h1') {
            newEl.style.cssText = 'font-size:20pt; font-weight:900; color:#1a365d; border-bottom:2px solid #1a365d; margin-bottom:20px;';
        } else if (tag === 'h2') {
            newEl.style.cssText = 'font-size:18pt; border-left:5px solid #2c5282; padding-left:10px; color:#1a365d;';
        } else if (tag === 'h3') {
            newEl.style.cssText = 'font-size:14pt; color:#2c5282;';
        }
    }
    
    newEl.setAttribute('contenteditable', 'true');
    activeBlock.replaceWith(newEl);
    setActiveBlock(newEl);
}

// ===== 폰트 =====
function applyFontFamily(fontName) {
    if (!isEditing) return;
    formatText('fontName', fontName);
}

function applyFontSizeInput(size) {
    const doc = getIframeDoc();
    if (!doc || !isEditing) return;
    
    const selection = doc.getSelection();
    if (!selection || selection.rangeCount === 0 || selection.isCollapsed) return;
    
    saveState();
    const range = selection.getRangeAt(0);
    try {
        const span = doc.createElement('span');
        span.style.fontSize = size + 'pt';
        range.surroundContents(span);
    } catch (e) {
        const fragment = range.extractContents();
        const span = doc.createElement('span');
        span.style.fontSize = size + 'pt';
        span.appendChild(fragment);
        range.insertNode(span);
    }
    toast('글씨 크기: ' + size + 'pt');
}

// ===== 표 삽입 =====
function openTableModal() {
    document.getElementById('tableModal').classList.add('active');
}

function closeTableModal() {
    document.getElementById('tableModal').classList.remove('active');
}

function insertTable() {
    const doc = getIframeDoc();
    if (!doc || !isEditing) return;
    
    const rows = parseInt(document.getElementById('tableRows').value) || 3;
    const cols = parseInt(document.getElementById('tableCols').value) || 3;
    const hasHeader = document.getElementById('tableHeader').checked;
    
    saveState();
    
    let tableHTML = '<table style="width:100%; border-collapse:collapse; margin:15px 0; font-size:9.5pt; border-top:2px solid #1a365d;"><tbody>';
    for (let i = 0; i < rows; i++) {
        tableHTML += '<tr>';
        for (let j = 0; j < cols; j++) {
            if (i === 0 && hasHeader) {
                tableHTML += '<th style="border:1px solid #ddd; padding:8px; background:#1a365d; color:#fff; font-weight:700;">헤더</th>';
            } else {
                tableHTML += '<td style="border:1px solid #ddd; padding:8px;">내용</td>';
            }
        }
        tableHTML += '</tr>';
    }
    tableHTML += '</tbody></table>';
    
    insertAtCursor(tableHTML);
    closeTableModal();
    toast('▦ 표가 삽입되었습니다');
}

// ===== 이미지 삽입 =====
function insertImage() {
    const doc = getIframeDoc();
    if (!doc || !isEditing) return;
    
    const input = document.createElement('input');
    input.type = 'file';
    input.accept = 'image/*';
    input.onchange = e => {
        const file = e.target.files[0];
        if (!file) return;
        const reader = new FileReader();
        reader.onload = ev => {
            saveState();
            const html = `<figure style="margin:15px 0; text-align:center;">
                <img src="${ev.target.result}" style="max-width:100%; height:auto; cursor:pointer;" onclick="selectImageForResize(this)">
                <figcaption style="font-size:9pt; color:#666; margin-top:5px;">그림 설명</figcaption>
            </figure>`;
            insertAtCursor(html);
            toast('🖼️ 이미지가 삽입되었습니다');
        };
        reader.readAsDataURL(file);
    };
    input.click();
}

// ===== 이미지 리사이즈 =====
function selectImageForResize(img) {
    if (!isEditing) return;
    
    // 기존 선택 해제
    const doc = getIframeDoc();
    doc.querySelectorAll('img.selected-image').forEach(i => {
        i.classList.remove('selected-image');
        i.style.outline = '';
    });
    
    // 새 선택
    img.classList.add('selected-image');
    img.style.outline = '3px solid #00c853';
    
    // 크기 조절 핸들러
    img.onmousedown = function(e) {
        if (!isEditing) return;
        e.preventDefault();
        const startX = e.clientX;
        const startWidth = img.offsetWidth;
        
        function onMouseMove(e) {
            const diff = e.clientX - startX;
            const newWidth = Math.max(50, startWidth + diff);
            img.style.width = newWidth + 'px';
            img.style.height = 'auto';
        }
        
        function onMouseUp() {
            document.removeEventListener('mousemove', onMouseMove);
            document.removeEventListener('mouseup', onMouseUp);
            saveState();
            toast('이미지 크기 조절됨');
        }
        
        document.addEventListener('mousemove', onMouseMove);
        document.addEventListener('mouseup', onMouseUp);
    };
}

// ===== 구분선 삽입 =====
function insertHR() {
    const doc = getIframeDoc();
    if (!doc || !isEditing) return;
    saveState();
    insertAtCursor('<hr style="border:none; border-top:1px solid #ddd; margin:20px 0;">');
    toast('― 구분선 삽입');
}

// ===== 커서 위치에 HTML 삽입 =====
function insertAtCursor(html) {
    const doc = getIframeDoc();
    if (!doc) return;
    
    const selection = doc.getSelection();
    if (selection && selection.rangeCount > 0) {
        const range = selection.getRangeAt(0);
        range.deleteContents();
        const temp = doc.createElement('div');
        temp.innerHTML = html;
        const frag = doc.createDocumentFragment();
        while (temp.firstChild) frag.appendChild(temp.firstChild);
        range.insertNode(frag);
    } else if (activeBlock) {
        activeBlock.insertAdjacentHTML('afterend', html);
    }
}

// ===== 블록 선택/관리 =====
function setActiveBlock(el) {
    clearActiveBlock();
    activeBlock = el;
    if (activeBlock) activeBlock.classList.add('active-block');
}

function clearActiveBlock() {
    if (activeBlock) activeBlock.classList.remove('active-block');
    activeBlock = null;
}

// ===== Undo/Redo =====
function saveState() {
    const doc = getIframeDoc();
    if (!doc) return;
    
    if (redoStack.length > 0) redoStack.length = 0;
    historyStack.push(doc.body.innerHTML);
    if (historyStack.length > MAX_HISTORY) historyStack.shift();
}

function performUndo() {
    const doc = getIframeDoc();
    if (!doc || historyStack.length <= 1) return;
    
    redoStack.push(doc.body.innerHTML);
    historyStack.pop();
    doc.body.innerHTML = historyStack[historyStack.length - 1];
    bindIframeEditEvents();
    toast('↩️ 실행 취소');
}

function performRedo() {
    const doc = getIframeDoc();
    if (!doc || redoStack.length === 0) return;
    
    const nextState = redoStack.pop();
    historyStack.push(nextState);
    doc.body.innerHTML = nextState;
    bindIframeEditEvents();
    toast('↪️ 다시 실행');
}

// ===== 키보드 단축키 =====
function handleEditorKeydown(e) {
    if (!isEditing) return;
    
    if (e.ctrlKey || e.metaKey) {
        switch (e.key.toLowerCase()) {
            case 'b': e.preventDefault(); formatText('bold'); break;
            case 'i': e.preventDefault(); formatText('italic'); break;
            case 'u': e.preventDefault(); formatText('underline'); break;
            case 'z': e.preventDefault(); e.shiftKey ? performRedo() : performUndo(); break;
            case 'y': e.preventDefault(); performRedo(); break;
            case '=':
            case '+': e.preventDefault(); adjustLetterSpacing(0.5); break;
            case '-': e.preventDefault(); adjustLetterSpacing(-0.5); break;
        }
    }
    if (e.key === 'Tab') {
        e.preventDefault();
        adjustIndent(e.shiftKey ? -1 : 1);
    }
}

// ===== iframe 편집 이벤트 바인딩 =====
function bindIframeEditEvents() {
    const doc = getIframeDoc();
    if (!doc) return;
    
    // 키보드 이벤트
    doc.removeEventListener('keydown', handleEditorKeydown);
    doc.addEventListener('keydown', handleEditorKeydown);
    
    // 블록 클릭 이벤트
    doc.body.addEventListener('click', function(e) {
        if (!isEditing) return;
        let target = e.target;
        while (target && target !== doc.body) {
            if (['DIV', 'P', 'H1', 'H2', 'H3', 'LI', 'TD', 'TH', 'FIGCAPTION'].includes(target.tagName)) {
                setActiveBlock(target);
                return;
            }
            target = target.parentElement;
        }
        clearActiveBlock();
    });
}

// ===== 편집 모드 토글 =====
function toggleEditMode() {
    const doc = getIframeDoc();
    if (!doc) return;
    
    isEditing = !isEditing;
    
    const formatBar = document.getElementById('formatBar');
    const editBtn = document.getElementById('editModeBtn');
    
    if (isEditing) {
        // 편집 모드 ON
        doc.designMode = 'on';
        if (formatBar) formatBar.classList.add('active');
        if (editBtn) {
            editBtn.textContent = '✏️ 편집 중';
            editBtn.classList.add('active');
        }
        
        // contenteditable 설정
        doc.querySelectorAll('.sheet *').forEach(el => {
            if (['DIV', 'P', 'H1', 'H2', 'H3', 'SPAN', 'LI', 'TD', 'TH', 'FIGCAPTION'].includes(el.tagName)) {
                el.setAttribute('contenteditable', 'true');
            }
        });
        
        bindIframeEditEvents();
        saveState();
        toast('✏️ 편집 모드 시작');
    } else {
        // 편집 모드 OFF
        doc.designMode = 'off';
        if (formatBar) formatBar.classList.remove('active');
        if (editBtn) {
            editBtn.textContent = '✏️ 편집하기';
            editBtn.classList.remove('active');
        }
        
        // contenteditable 제거
        doc.querySelectorAll('[contenteditable]').forEach(el => {
            el.removeAttribute('contenteditable');
        });
        
        clearActiveBlock();
        toast('✏️ 편집 모드 종료');
    }
}

// ===== 편집기 초기화 =====
function initEditor() {
    // 편집 바가 없으면 생성
    if (!document.getElementById('formatBar')) {
        const previewContainer = document.querySelector('.preview-container');
        if (previewContainer) {
            previewContainer.insertAdjacentHTML('afterbegin', createFormatBar());
        }
    }
    
    // 표 모달이 없으면 생성
    if (!document.getElementById('tableModal')) {
        document.body.insertAdjacentHTML('beforeend', createTableModal());
    }
    
    // 토스트 컨테이너 생성
    createToastContainer();
    
    console.log('Editor initialized');
}

// DOM 로드 시 초기화
document.addEventListener('DOMContentLoaded', initEditor);