<script>
(function() {
    window.updateFileName = function(input, index) {
        const fileName = input.files[0] ? input.files[0].name : 'No file selected';
        const fileNameElement = document.getElementById('file_name_' + index);
        if (!fileNameElement) return;
        fileNameElement.innerText = fileName;
        fileNameElement.style.color = '#00f2ff';
    };

    window.file_add = function() {
        const rows = document.querySelectorAll('.file-row:not(.active)');
        if (rows.length > 0) rows[0].classList.add('active');
    };

    function getCurrentDateTimeText() {
        const now = new Date();
        const year = now.getFullYear();
        const month = String(now.getMonth() + 1).padStart(2, '0');
        const day = String(now.getDate()).padStart(2, '0');
        const hour = String(now.getHours()).padStart(2, '0');
        const minute = String(now.getMinutes()).padStart(2, '0');
        const second = String(now.getSeconds()).padStart(2, '0');
        return year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second;
    }

    function createWorkLineRow(contentValue, timeValue) {
        const wrap = document.createElement('div');
        wrap.className = 'work-line-row';

        const timeWrap = document.createElement('div');
        timeWrap.className = 'work-line-time-wrap';

        const caption = document.createElement('span');
        caption.className = 'field-caption no-margin';
        caption.textContent = '기록 시간';

        const timeInput = document.createElement('input');
        timeInput.type = 'text';
        timeInput.className = 'work-line-time';
        timeInput.readOnly = true;
        timeInput.value = timeValue && String(timeValue).trim() !== '' ? timeValue : getCurrentDateTimeText();

        const contentArea = document.createElement('textarea');
        contentArea.className = 'work-line-content';
        contentArea.rows = 4;
        contentArea.placeholder = '작업 내용을 입력하세요';
        contentArea.value = contentValue || '';

        timeWrap.appendChild(caption);
        timeWrap.appendChild(timeInput);
        wrap.appendChild(timeWrap);
        wrap.appendChild(contentArea);

        return wrap;
    }

    function serializeWorkLine() {
        const serializedInput = document.getElementById('x2_line_serialized');
        if (!serializedInput) return;

        const rows = document.querySelectorAll('#workLineRows .work-line-row');
        const chunks = [];

        rows.forEach(function(row) {
            const contentElement = row.querySelector('.work-line-content');
            const timeElement = row.querySelector('.work-line-time');
            const content = contentElement ? contentElement.value.trim() : '';
            const time = timeElement ? timeElement.value.trim() : getCurrentDateTimeText();

            if (!content) return;

            const cleanedContent = content.replace(/[\^@]/g, ' ');
            const cleanedTime = (time || getCurrentDateTimeText()).replace(/[\^@]/g, ' ');
            chunks.push(cleanedContent + '^' + cleanedTime);
        });

        serializedInput.value = chunks.length > 0 ? chunks.join('@') + '@' : '';
    }

    function bindMemoToggle() {
        const memoButton = document.getElementById('memo-toggle-btn');
        const memoArea = document.getElementById('memo-area');
        if (!memoButton || !memoArea) return;

        const syncState = function() {
            memoButton.setAttribute('aria-expanded', memoArea.classList.contains('open') ? 'true' : 'false');
        };

        memoButton.addEventListener('click', function() {
            memoArea.classList.toggle('open');
            syncState();
        });

        syncState();
    }

    function bindPanelToggle(panelId, triggerId, closeSelector) {
        const panel = document.getElementById(panelId);
        const trigger = document.getElementById(triggerId);
        if (!panel || !trigger) return;

        const closeButtons = closeSelector ? document.querySelectorAll(closeSelector) : [];

        const syncState = function() {
            trigger.setAttribute('aria-expanded', panel.classList.contains('is-open') ? 'true' : 'false');
        };

        const togglePanel = function() {
            panel.classList.toggle('is-open');
            syncState();
        };

        const closePanel = function() {
            panel.classList.remove('is-open');
            syncState();
        };

        trigger.addEventListener('click', togglePanel);
        closeButtons.forEach(function(button) {
            button.addEventListener('click', closePanel);
        });

        syncState();
    }

    function bindWorkLineAdd() {
        const addButton = document.getElementById('btn-add-work-line');
        const rowsContainer = document.getElementById('workLineRows');
        if (!addButton || !rowsContainer) return;

        addButton.addEventListener('click', function() {
            rowsContainer.appendChild(createWorkLineRow('', getCurrentDateTimeText()));
        });
    }

    function createRelayRow(contentValue, timeValue) {
        const wrap = document.createElement('div');
        wrap.className = 'work-line-row relay-row';

        const timeWrap = document.createElement('div');
        timeWrap.className = 'work-line-time-wrap';

        const caption = document.createElement('span');
        caption.className = 'field-caption no-margin';
        caption.textContent = '기록 시간';

        const timeInput = document.createElement('input');
        timeInput.type = 'text';
        timeInput.className = 'work-line-time relay-line-time';
        timeInput.readOnly = true;
        timeInput.value = timeValue && String(timeValue).trim() !== '' ? timeValue : getCurrentDateTimeText();

        const contentArea = document.createElement('textarea');
        contentArea.className = 'work-line-content relay-line-content';
        contentArea.rows = 4;
        contentArea.placeholder = '릴레이 내용을 입력하세요';
        contentArea.value = contentValue || '';

        timeWrap.appendChild(caption);
        timeWrap.appendChild(timeInput);
        wrap.appendChild(timeWrap);
        wrap.appendChild(contentArea);

        return wrap;
    }

    function serializeRelay() {
        const serializedInput = document.getElementById('x2_relay_serialized');
        if (!serializedInput) return;

        const rows = document.querySelectorAll('#relayRows .relay-row');
        const chunks = [];

        rows.forEach(function(row) {
            const contentElement = row.querySelector('.relay-line-content');
            const timeElement = row.querySelector('.relay-line-time');
            const content = contentElement ? contentElement.value.trim() : '';
            const time = timeElement ? timeElement.value.trim() : getCurrentDateTimeText();

            if (!content) return;

            const cleanedContent = content.replace(/[\^@]/g, ' ');
            const cleanedTime = (time || getCurrentDateTimeText()).replace(/[\^@]/g, ' ');
            chunks.push(cleanedContent + '^' + cleanedTime);
        });

        serializedInput.value = chunks.length > 0 ? chunks.join('@') + '@' : '';
    }

    function bindRelayAdd() {
        const addButton = document.getElementById('btn-add-relay-line');
        const rowsContainer = document.getElementById('relayRows');
        if (!addButton || !rowsContainer) return;

        addButton.addEventListener('click', function() {
            const newRow = createRelayRow('', getCurrentDateTimeText());
            rowsContainer.insertBefore(newRow, rowsContainer.firstChild);
        });
    }

    function bindDateTimePicker() {
        ['wr_date_custom', 'wr_time_custom'].forEach(function(id) {
            const field = document.getElementById(id);
            if (!field) return;

            const openPicker = function() {
                if (typeof field.showPicker === 'function') {
                    field.showPicker();
                }
            };

            field.addEventListener('click', openPicker);
            field.addEventListener('focus', openPicker);
        });
    }

    window.fwrite_submit = function(f) {
        <?php echo $editor_js; ?>

        if (!f.x2_ca2.value || !f.x2_ca3.value || !f.x2_ca4.value) {
            alert('종류, 형태, 상태는 필수 입력입니다.');
            return false;
        }

        serializeRelay();
        serializeWorkLine();
        return true;
    };

    bindMemoToggle();
    bindPanelToggle('note-side-menu', 'note-toggle-btn', '.btn-note-close');
    bindPanelToggle('relay-side-menu', 'relay-toggle-btn', '.btn-relay-close');
    bindWorkLineAdd();
    bindRelayAdd();
    bindDateTimePicker();
})();
</script>