// /aiwk/assets/aiwk/aiwk_skin_loader.js
(function() {
    const STORAGE_KEY = 'aiwk_skin';
    const DEFAULT_SKIN = 'light';
    const SKIN_BASE = '/aiwk/skins/';

    // 사용 가능한 스킨 목록 (추후 확장)
    const AVAILABLE = ['light', 'purple', 'dark', 'ocean', 'forest'];

    function getCurrentSkin() {
        const saved = localStorage.getItem(STORAGE_KEY);
        if (saved && AVAILABLE.includes(saved)) return saved;
        return DEFAULT_SKIN;
    }

    function loadSkin(skinId) {
        // 이전에 로드된 스킨 CSS 제거
        const old = document.getElementById('aiwk-skin-css');
        if (old) old.remove();

        const link = document.createElement('link');
        link.id = 'aiwk-skin-css';
        link.rel = 'stylesheet';
        link.href = SKIN_BASE + skinId + '/skin.css';
        document.head.appendChild(link);

        // 루트 요소에 data-aiwk-skin 속성 설정 (CSS 선택자용)
        const root = document.documentElement;
        root.setAttribute('data-aiwk-skin', skinId);
    }

    // 전역 함수: 스킨 변경
    window.aiwkSetSkin = function(skinId) {
        if (!AVAILABLE.includes(skinId)) {
            console.warn('Unknown skin:', skinId);
            return;
        }
        localStorage.setItem(STORAGE_KEY, skinId);
        loadSkin(skinId);
        // 스킨 변경 이벤트 (다른 컴포넌트에서 감지 가능)
        document.dispatchEvent(new CustomEvent('aiwk-skin-change', { detail: { skin: skinId } }));
    };

    // 초기 로드
    const initial = getCurrentSkin();
    loadSkin(initial);

    // 선택 UI에서 사용할 목록 노출
    window.aiwkGetAvailableSkins = function() { return AVAILABLE.slice(); };
})();