import BaseTool from '../baseTool.js';

export default class UrlTool extends BaseTool {
    constructor() {
        super('url-tool', 'URL 编码/解码');
    }

    render() {
        return `
            <div class="page-container" style="padding: 20px; display:flex; flex-direction:column; gap:15px; height:100%;">
                <div class="section-header"><button class="back-btn ripple" id="back-btn"><i class="fas fa-arrow-left"></i></button><h1>${this.name}</h1></div>
                <div style="flex:1; display:flex; flex-direction:column; gap:10px;">
                    <textarea id="url-input" class="common-textarea" placeholder="输入 URL..." style="flex:1;"></textarea>
                    <div style="display:flex; gap:10px; justify-content:center;">
                        <button id="btn-encode" class="action-btn ripple"><i class="fas fa-arrow-down"></i> 编码 (Encode)</button>
                        <button id="btn-decode" class="action-btn ripple"><i class="fas fa-arrow-up"></i> 解码 (Decode)</button>
                    </div>
                    <textarea id="url-output" class="common-textarea" placeholder="结果..." style="flex:1;"></textarea>
                </div>
            </div>
        `;
    }

    init() {
        document.getElementById('back-btn').addEventListener('click', () => window.mainPage.navigateTo('toolbox'));
        const input = document.getElementById('url-input');
        const output = document.getElementById('url-output');

        document.getElementById('btn-encode').addEventListener('click', () => {
            output.value = encodeURIComponent(input.value);
        });
        document.getElementById('btn-decode').addEventListener('click', () => {
            try {
                output.value = decodeURIComponent(input.value);
            } catch (e) {
                this._notify('错误', '无效的 URL 编码', 'error');
            }
        });
    }
}