content.js

(function() {
    'use strict';
    // 支援格式判斷，包含本地檔案路徑
    const isImageUrl = /\.(jpg|jpeg|png|gif|webp|bmp|svg)($|\?)/i.test(window.location.href) || window.location.protocol === 'file:';
    if (!isImageUrl) return;

    // --- 1. 英雄核心：底層解碼引擎 (WebCodecs API) ---
    const HeroDecoder = {
        async decodeAll(url) {
            const response = await fetch(url);
            const decoder = new ImageDecoder({ data: response.body, type: 'image/gif' });
            await decoder.tracks.ready;
            const track = decoder.tracks.selectedTrack;
            const frames = [];
            for (let i = 0; i < track.frameCount; i++) {
                const result = await decoder.decode({ frameIndex: i });
                const canvas = document.createElement('canvas');
                canvas.width = result.image.displayWidth;
                canvas.height = result.image.displayHeight;
                const ctx = canvas.getContext('2d');
                ctx.drawImage(result.image, 0, 0);
                frames.push({
                    url: canvas.toDataURL(),
                    index: i,
                    aspect: canvas.width / canvas.height
                });
                result.image.close();
            }
            return frames;
        }
    };

    // --- 2. 英雄核心：全環境向量化引擎 (支援 CORS 與 Local file) ---
    const HeroVectorEngine = {
        async traceToSvg(imgElement, imgSrc) {
            const isLocal = window.location.protocol === 'file:';
            let targetImg = imgElement;

            // 網頁圖片需洗白數據以防 Tainted Canvas 報錯
            if (!isLocal) {
                const response = await fetch(imgSrc);
                const blob = await response.blob();
                const blobUrl = URL.createObjectURL(blob);
                targetImg = await new Promise((resolve, reject) => {
                    const tempImg = new Image();
                    tempImg.crossOrigin = "anonymous";
                    tempImg.onload = () => resolve(tempImg);
                    tempImg.onerror = reject;
                    tempImg.src = blobUrl;
                });
            }

            return new Promise((resolve) => {
                const canvas = document.createElement('canvas');
                const ctx = canvas.getContext('2d');
                const w = targetImg.naturalWidth || targetImg.width;
                const h = targetImg.naturalHeight || targetImg.height;
                canvas.width = w;
                canvas.height = h;
                ctx.drawImage(targetImg, 0, 0);
                
                const imgData = ctx.getImageData(0, 0, w, h).data;
                let svgContent = `<svg xmlns="http://www.w3.org/2000/svg" width="${w}" height="${h}" viewBox="0 0 ${w} ${h}">`;
                for (let y = 0; y < h; y++) {
                    for (let x = 0; x < w; x++) {
                        const i = (y * w + x) * 4;
                        const r = imgData[i], g = imgData[i+1], b = imgData[i+2], a = imgData[i+3] / 255;
                        if (a > 0.1) {
                            svgContent += `<rect x="${x}" y="${y}" width="1" height="1" fill="rgba(${r},${g},${b},${a})"/>`;
                        }
                    }
                }
                svgContent += `</svg>`;
                resolve('data:image/svg+xml;base64,' + btoa(unescape(encodeURIComponent(svgContent))));
            });
        }
    };

    function init() {
        if (document.getElementById('hero-view-root')) return;
        const imgSrc = window.location.href;
        const isGif = /\.gif($|\?)/i.test(imgSrc);

        const root = document.createElement('div');
        root.id = 'hero-view-root';
        root.style.cssText = `position:fixed;top:0;left:0;width:100vw;height:100vh;background:#121212;z-index:2147483647;display:flex;overflow:hidden;color:white;font-family:sans-serif;`;
        
        root.innerHTML = `
            <div id="side-bar" style="width:65px; background:#1e1e1e; border-right:1px solid #333; display:flex; flex-direction:column; align-items:center; padding-top:20px; gap:12px; flex-shrink:0;">
                <button class="h-btn" id="h-in" title="放大">＋</button>
                <button class="h-btn" id="h-out" title="縮小">－</button>
                <button class="h-btn" id="h-fit" title="自動適應">⛶</button>
                <button class="h-btn" id="h-11" title="1:1視角">1:1</button>
                <button class="h-btn" id="h-rev" title="反相">🌓</button>
                <div style="width:30px; height:1px; background:#444; margin:5px 0;"></div>
                <button class="h-btn" id="h-dl-trigger" style="background:#007aff; border:none; font-size:22px;" title="下載選單">↓</button>
                <div id="dl-menu" style="display:none; position:absolute; left:70px; background:#222; border:1px solid #444; border-radius:8px; padding:5px; flex-direction:column; z-index:1001; box-shadow: 0 4px 15px rgba(0,0,0,0.5);">
                    <button class="dl-opt" id="dl-original">直接下載原本檔案</button>
                    ${isGif ? '<button class="dl-opt" id="run-decoder" style="color:#007aff; font-weight:bold;">GIF 選擇幀分解</button>' : ''}
                    <button class="dl-opt" id="dl-to-svg" style="color:#ffcc00;">✨ 轉存為向量 SVG</button>
                    <button class="dl-opt" data-fmt="image/jpeg">轉存為 JPG</button>
                    <button class="dl-opt" data-fmt="image/png">轉存為 PNG</button>
                </div>
            </div>
            <div id="h-port" style="flex-grow:1; display:flex; align-items:center; justify-content:center; overflow:auto; background:#000;">
                <img id="h-img" src="${imgSrc}" style="max-width:none !important; transition: transform 0.1s; transform-origin: center;">
            </div>
            <div id="frame-picker" style="display:none; position:fixed; top:50%; left:50%; transform:translate(-50%, -50%); width:96vw; height:92vh; background:#1e1e1e; border:1px solid #444; border-radius:12px; flex-direction:column; z-index:2001; overflow:hidden; box-shadow: 0 0 50px rgba(0,0,0,0.9);">
                <div style="padding:15px 25px; border-bottom:1px solid #333; display:flex; justify-content:space-between; align-items:center; flex-shrink:0;">
                    <div style="display:flex; align-items:center; gap:15px;">
                        <h3 style="margin:0; font-size:16px;">英雄比例守護者：幀分解</h3>
                        <button id="toggle-all" style="background:#333; color:#aaa; border:1px solid #555; padding:4px 12px; border-radius:4px; cursor:pointer; font-size:12px;">反選</button>
                    </div>
                    <button id="close-picker" style="background:#444; color:white; border:none; padding:8px 20px; border-radius:6px; cursor:pointer;">關閉</button>
                </div>
                <div id="frame-grid" style="flex-grow:1; overflow-y:auto; display:grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap:20px; padding:25px; background:#121212; align-content: flex-start;"></div>
                <div style="padding:15px; border-top:1px solid #333; text-align:right; flex-shrink:0;">
                    <button id="dl-selected" style="background:#007aff; color:white; border:none; padding:10px 30px; border-radius:8px; font-weight:bold; cursor:pointer;">下載選中幀</button>
                </div>
            </div>
            <style>
                .h-btn { width:45px; height:45px; background:#333; color:white; border:1px solid #555; cursor:pointer; border-radius:8px; font-size:20px; transition: 0.2s; }
                .h-btn:hover { background: #444; border-color: #007aff; }
                .dl-opt { background:none; border:none; color:white; padding:12px 20px; cursor:pointer; text-align:left; font-size:14px; border-radius:4px; white-space:nowrap; }
                .dl-opt:hover { background: #007aff; }
                .frame-item { border: 2px solid #333; border-radius: 10px; background: #222; position: relative; display: flex; flex-direction: column; align-items: center; padding: 10px; transition: 0.2s; min-height: 150px; }
                .frame-item.selected { border-color: #007aff; box-shadow: 0 0 15px rgba(0, 122, 255, 0.3); }
                .frame-item img { width: 100%; height: auto; object-fit: contain; pointer-events: none; margin-top: 25px; }
                .frame-label { position: absolute; top: 10px; left: 10px; background: #007aff; color: white; padding: 2px 8px; font-size: 11px; border-radius: 4px; font-weight: bold; }
                #frame-grid::-webkit-scrollbar { width:8px; }
                #frame-grid::-webkit-scrollbar-thumb { background:#444; border-radius:4px; }
            </style>
        `;

        document.documentElement.appendChild(root);
        const img = document.getElementById('h-img');
        const picker = document.getElementById('frame-picker');
        const grid = document.getElementById('frame-grid');
        const dlMenu = document.getElementById('dl-menu');

        // GIF 拆解邏輯
        async function runExtraction() {
            dlMenu.style.display = 'none';
            grid.innerHTML = "<div style='grid-column:1/-1;text-align:center;padding:50px;'>🚀 英雄正在解碼...</div>";
            picker.style.display = "flex";
            try {
                const frames = await HeroDecoder.decodeAll(imgSrc);
                grid.innerHTML = "";
                frames.forEach(f => {
                    const div = document.createElement('div');
                    div.className = "frame-item selected";
                    div.innerHTML = `<span class="frame-label">#${f.index}</span><img src="${f.url}">`;
                    div.onclick = () => div.classList.toggle('selected');
                    grid.appendChild(div);
                });
            } catch (e) { grid.innerHTML = `錯誤：${e.message}`; }
        }

        const runBtn = document.getElementById('run-decoder');
        if (runBtn) runBtn.onclick = runExtraction;

        // SVG 轉換按鈕
        document.getElementById('dl-to-svg').onclick = async () => {
            const btn = document.getElementById('dl-to-svg');
            const oldTxt = btn.innerText;
            btn.innerText = "⚡ 向量化中...";
            try {
                const svgData = await HeroVectorEngine.traceToSvg(img, imgSrc);
                const a = document.createElement('a');
                a.href = svgData;
                a.download = `hero_vector.svg`;
                a.click();
            } catch (e) { alert("失敗: " + e.message); }
            btn.innerText = oldTxt;
            dlMenu.style.display = 'none';
        };

        // 基本控制
        document.getElementById('dl-original').onclick = () => {
            const a = document.createElement('a');
            a.href = imgSrc;
            a.download = imgSrc.split('/').pop().split('?')[0] || 'hero_img';
            a.click();
        };

        document.getElementById('h-dl-trigger').onclick = (e) => {
            e.stopPropagation();
            dlMenu.style.display = dlMenu.style.display === 'flex' ? 'none' : 'flex';
            dlMenu.style.top = `${e.target.offsetTop}px`;
        };
        document.addEventListener('click', () => dlMenu.style.display = 'none');
        document.getElementById('close-picker').onclick = () => picker.style.display = "none";
        document.getElementById('toggle-all').onclick = () => {
            grid.querySelectorAll('.frame-item').forEach(i => i.classList.toggle('selected'));
        };

        document.getElementById('dl-selected').onclick = () => {
            grid.querySelectorAll('.frame-item.selected img').forEach((el, i) => {
                const a = document.createElement('a');
                a.href = el.src; a.download = `frame_${i}.png`; a.click();
            });
        };

        let scale = 1.0;
        const up = () => img.style.transform = `scale(${scale})`;
        document.getElementById('h-in').onclick = () => { scale *= 1.25; up(); };
        document.getElementById('h-out').onclick = () => { scale *= 0.8; up(); };
        document.getElementById('h-fit').onclick = () => { 
            scale = Math.min(window.innerWidth/img.naturalWidth, window.innerHeight/img.naturalHeight); 
            if(scale > 1) scale = 1; up(); 
        };
        document.getElementById('h-11').onclick = () => { scale = 1.0; up(); };
        document.getElementById('h-rev').onclick = () => img.style.filter = img.style.filter === 'invert(1)' ? 'none' : 'invert(1)';
        img.onload = () => document.getElementById('h-fit').click();
    }

    if(document.readyState !== 'loading') init();
    else document.addEventListener('DOMContentLoaded', init);
})();