document.addEventListener('DOMContentLoaded', () => {
    const addBtn = document.getElementById('add-btn');
    const addForm = document.getElementById('add-form');
    const cancelBtn = document.getElementById('cancel-btn');
    const saveBtn = document.getElementById('save-btn');

    const envSelect = document.getElementById('env-select');
    const clientInput = document.getElementById('client-input');
    const usernameInput = document.getElementById('username-input');
    const passwordInput = document.getElementById('password-input');
    const rulesList = document.getElementById('rules-list');

    const ENV_CONFIG = {
        PP: {
            domain: 'app135148.dingtalkoxm.com',
            url: 'https://app135148.dingtalkoxm.com/user/login'
        },
        ATS: {
            domain: 'app135149.dingtalkoxm.com',
            url: 'https://app135149.dingtalkoxm.com/login'
        }
    };

    let rules = [];
    let dragStartIndex = -1;

    // Load rules from chrome.storage
    function loadRules() {
        if (typeof chrome !== 'undefined' && chrome.storage) {
            chrome.storage.local.get(['quickPurgeAccounts'], (result) => {
                rules = result.quickPurgeAccounts || [];
                renderRules();
            });
        } else {
            renderRules();
        }
    }

    function saveRules() {
        if (typeof chrome !== 'undefined' && chrome.storage) {
            chrome.storage.local.set({ quickPurgeAccounts: rules }, () => {
                renderRules();
            });
        } else {
            renderRules();
        }
    }

    function toggleAddForm() {
        addForm.classList.toggle('hidden');
        if (!addForm.classList.contains('hidden')) {
            clientInput.focus();
        }
    }

    addBtn.addEventListener('click', toggleAddForm);

    cancelBtn.addEventListener('click', () => {
        addForm.classList.add('hidden');
        resetForm();
    });

    function resetForm() {
        envSelect.value = 'PP';
        clientInput.value = '';
        usernameInput.value = '';
        passwordInput.value = '';
    }

    saveBtn.addEventListener('click', () => {
        const env = envSelect.value;
        const clientName = clientInput.value.trim();
        const username = usernameInput.value.trim();
        const password = passwordInput.value;

        if (!clientName || !username || !password) {
            alert('请填写完整的客户名称、账号和密码！');
            return;
        }

        rules.push({
            id: Date.now().toString(),
            env: env,
            clientName: clientName,
            username: username,
            password: password
        });

        saveRules();
        addForm.classList.add('hidden');
        resetForm();
    });

    function renderRules() {
        rulesList.innerHTML = '';

        if (rules.length === 0) {
            rulesList.innerHTML = `
        <div class="empty-state">
          <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
            <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
            <line x1="9" y1="9" x2="15" y2="15"></line>
            <line x1="15" y1="9" x2="9" y2="15"></line>
          </svg>
          <span>暂无账号配置，点击上方 "+" 添加</span>
        </div>`;
            return;
        }

        rules.forEach((rule, index) => {
            const li = document.createElement('li');
            li.className = 'rule-item';
            li.setAttribute('draggable', 'true');
            li.setAttribute('data-index', index.toString());

            li.innerHTML = `
        <div class="drag-handle" title="拖拽排序">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M8 9h8M8 15h8" /></svg>
        </div>
        <div class="rule-info">
          <div class="rule-domain" title="${rule.clientName}">
            ${rule.clientName}
            <span class="rule-env">${rule.env}</span>
          </div>
          <div class="rule-acc" title="${rule.username}">帐号: ${rule.username}</div>
        </div>
        <div class="rule-actions">
          <button class="icon-btn btn-execute" data-id="${rule.id}" title="清理数据并自动登录">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
          </button>
          <button class="icon-btn btn-delete" data-id="${rule.id}" title="删除此配置">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
          </button>
        </div>
      `;

            addDragEvents(li);
            rulesList.appendChild(li);
        });

        document.querySelectorAll('.btn-delete').forEach(btn => {
            btn.addEventListener('click', (e) => {
                const id = e.currentTarget.getAttribute('data-id');
                rules = rules.filter(r => r.id !== id);
                saveRules();
            });
        });

        document.querySelectorAll('.btn-execute').forEach(btn => {
            btn.addEventListener('click', (e) => {
                const button = e.currentTarget;
                const id = button.getAttribute('data-id');
                const rule = rules.find(r => r.id === id);
                if (rule) {
                    executePurgeAndLogin(rule, button);
                }
            });
        });
    }

    // --- Drag and Drop functionality ---
    function addDragEvents(item) {
        item.addEventListener('dragstart', (e) => {
            dragStartIndex = parseInt(e.currentTarget.getAttribute('data-index'));
            e.currentTarget.classList.add('dragging');
            // Set empty ghost image
            if (e.dataTransfer) {
                e.dataTransfer.effectAllowed = 'move';
                // Need to set data to allow dragging in Firefox
                e.dataTransfer.setData('text/plain', dragStartIndex);
            }
        });

        item.addEventListener('dragend', (e) => {
            e.currentTarget.classList.remove('dragging');
        });

        item.addEventListener('dragover', (e) => {
            e.preventDefault();
            // Allow drop
            return false;
        });

        item.addEventListener('dragenter', (e) => {
            e.preventDefault();
        });

        item.addEventListener('drop', (e) => {
            e.stopPropagation();
            const dragEndIndex = parseInt(e.currentTarget.closest('.rule-item').getAttribute('data-index'));

            if (dragStartIndex !== dragEndIndex) {
                swapItems(dragStartIndex, dragEndIndex);
            }
            return false;
        });
    }

    function swapItems(fromIndex, toIndex) {
        // Array manipulation for drag sorting
        const itemOne = rules[fromIndex];
        rules.splice(fromIndex, 1);
        rules.splice(toIndex, 0, itemOne);
        saveRules();
    }

    function executePurgeAndLogin(rule, buttonElement) {
        const svg = buttonElement.querySelector('svg');
        const originalSvg = svg.outerHTML;
        buttonElement.innerHTML = `<svg class="loading" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 2v4m0 12v4M4.93 4.93l2.83 2.83m8.48 8.48l2.83 2.83M2 12h4m12 0h4M4.93 19.07l2.83-2.83m8.48-8.48l2.83-2.83"/></svg>`;

        if (typeof chrome !== 'undefined' && chrome.runtime) {
            const config = ENV_CONFIG[rule.env];
            chrome.runtime.sendMessage({
                action: "purgeAndRedirect",
                domain: config.domain,
                targetUrl: config.url,
                username: rule.username,
                password: rule.password
            }, (response) => {
                // Will visually reset only if popup is somehow still open after redirect (unlikely as active tab changes)
                buttonElement.innerHTML = originalSvg;
            });
        } else {
            setTimeout(() => {
                console.log(`Mock: Purging ${rule.env} and filling ${rule.username}`);
                buttonElement.innerHTML = originalSvg;
            }, 1000);
        }
    }

    loadRules();
});