class Toolbar extends HTMLElement {
    constructor() {
        super();
        this.attachShadow({ mode: 'open' });
    }

    connectedCallback() {
        this.render();
        this.addEventListeners();
    }

    addEventListeners() {
        const searchBtn = this.shadowRoot.querySelector('.search-btn');
        const resetBtn = this.shadowRoot.querySelector('.reset-btn');
        const addBtn = this.shadowRoot.querySelector('.add-btn');
        const deleteBtn = this.shadowRoot.querySelector('.delete-btn');
        const downloadBtn = this.shadowRoot.querySelector('.download-btn');
        const importBtn = this.shadowRoot.querySelector('.import-btn');

        searchBtn.addEventListener('click', () => {
            const searchInput = this.shadowRoot.querySelector('.search-input');
            this.dispatchEvent(new CustomEvent('search', {
                detail: { keyword: searchInput.value }
            }));
        });

        resetBtn.addEventListener('click', () => {
            const searchInput = this.shadowRoot.querySelector('.search-input');
            searchInput.value = '';
            this.dispatchEvent(new CustomEvent('reset-search'));
        });

        addBtn.addEventListener('click', () => {
            const form = document.querySelector('variable-form');
            if (form) {
                form.setMode('add');
                form.show();
            }
        });

        deleteBtn.addEventListener('click', () => {
            this.dispatchEvent(new CustomEvent('delete-selected'));
        });

        downloadBtn.addEventListener('click', () => {
            this.dispatchEvent(new CustomEvent('download-template'));
        });

        importBtn.addEventListener('click', () => {
            const fileInput = this.shadowRoot.querySelector('.file-input');
            fileInput.click();
        });

        const fileInput = this.shadowRoot.querySelector('.file-input');
        fileInput.addEventListener('change', (e) => {
            const file = e.target.files[0];
            if (file) {
                this.dispatchEvent(new CustomEvent('import-data', {
                    detail: { file }
                }));
            }
        });
    }

    render() {
        this.shadowRoot.innerHTML = `
            <style>
                .toolbar {
                    display: flex;
                    align-items: center;
                    gap: 10px;
                    padding: 10px;
                    background-color: #f5f5f5;
                    border-bottom: 1px solid #ddd;
                }

                .search-container {
                    display: flex;
                    align-items: center;
                    gap: 5px;
                }

                .search-input {
                    padding: 6px 12px;
                    border: 1px solid #ddd;
                    border-radius: 4px;
                    width: 200px;
                }

                button {
                    padding: 6px 12px;
                    border: none;
                    border-radius: 4px;
                    background-color: #4CAF50;
                    color: white;
                    cursor: pointer;
                }

                button:hover {
                    background-color: #45a049;
                }

                .delete-btn {
                    background-color: #f44336;
                }

                .delete-btn:hover {
                    background-color: #da190b;
                }

                .file-input {
                    display: none;
                }
            </style>
            <div class="toolbar">
                <div class="search-container">
                    <input type="text" class="search-input" placeholder="搜索...">
                    <button class="search-btn">搜索</button>
                    <button class="reset-btn">重置</button>
                </div>
                <button class="add-btn">添加变量</button>
                <button class="delete-btn">删除变量</button>
                <button class="download-btn">下载模板</button>
                <button class="import-btn">导入数据</button>
                <input type="file" class="file-input" accept=".xlsx,.xls,.csv">
            </div>
        `;
    }
}

customElements.define('interface-toolbar', Toolbar);