/**
 * CharlieGo Toolbox - 核心互動邏輯
 */

document.addEventListener('DOMContentLoaded', ()=> {

        // --- 區塊 1: 安全性與重導向 (修正版) ---
        const isIframe=window.self !==window.top;
        const targetHostname="toolbox.charliego.life";
        const currentHostname=window.location.hostname;

        // 允許的開發環境清單 (包含空字串是為了支援 file:// 協議直接開啟)
        const allowedDevHosts=["localhost", "127.0.0.1", ""];

        // 簡單判斷：如果是區網 IP (192.168.x.x 或 10.x.x.x) 也視為開發環境
        const isLanIp=currentHostname.startsWith ("192.168.") || currentHostname.startsWith ("10.");

        // 只有在「非開發環境」且「網域不正確」時才重導向
        if ( !isIframe && currentHostname !==targetHostname && !allowedDevHosts.includes(currentHostname) && !isLanIp) {
            window.location.href="https://" + targetHostname + window.location.pathname;
        }

        // --- 區塊 2: 服務資料配置 ---
        const SERVICES= {
            n8n: {
                title: "n8n 工作站",
                icon: "🚀",
                tag: "Workflow Automation",
                desc: "企業級自動化流程引擎。透過直覺的節點式介面，串接 Slack、Google Sheets 及各項內部 API，將繁瑣的行政流程自動化，大幅提升工作效率。",
                link: "https://n8n.charliego.life"
            }

            ,
            nocodb: {
                title: "NocoDB 中心",
                icon: "📚",
                tag: "Database Admin",
                desc: "強大的開源資料庫管理平台。將底層數據轉化為易於操作的試算表模式，讓團隊能以最簡單的方式協作維護教科書數據與專案清單。",
                link: "https://nocodb.charliego.life"
            }
        }

        ;

        /**
     * 更新詳細資訊面板內容
     * @param {string} id - 服務辨識碼
     */
        function selectService(id) {
            const data=SERVICES[id];
            if ( !data) return;

            const detailCard=document.getElementById('detail-card');
            if ( !detailCard) return;

            // 觸發重新動畫
            detailCard.classList.remove('fade-in');
            void detailCard.offsetWidth; // 強制瀏覽器重繪 (Reflow)
            detailCard.classList.add('fade-in');

            // 更新內容 DOM (Helper 函式減少重複代碼)
            const updateText=(elementId, text)=> {
                const el=document.getElementById(elementId);
                if (el) el.innerText=text;
            }

            ;

            updateText('service-icon', data.icon);
            updateText('service-title', data.title);
            updateText('service-desc', data.desc);
            updateText('service-tag', data.tag);

            const linkBtn=document.getElementById('service-link');
            if (linkBtn) linkBtn.href=data.link;

            // 更新按鈕選中狀態
            document.querySelectorAll('.service-card').forEach(btn=> btn.classList.remove('active'));

            const activeBtn=document.getElementById(`btn-$ {
                    id
                }

                `);
            if (activeBtn) activeBtn.classList.add('active');
        }

        // --- 區塊 3: 事件綁定 ---
        // 自動掃描 SERVICES 設定的 key 來綁定按鈕，避免手動寫死
        Object.keys(SERVICES).forEach(serviceId=> {
                const btn=document.getElementById(`btn-$ {
                        serviceId
                    }

                    `);

                if (btn) {
                    btn.addEventListener('click', ()=> selectService(serviceId));
                }
            });

        // --- 區塊 4: 初始載入 ---
        // 預設開啟第一個服務
        selectService('n8n');
    });