<body>
    <h1>Email對比器</h1>
    <p class="description">輸入兩組Email，每行一個，點擊按鈕對比出重複及獨有的Email。</p>

    <div class="textarea-container">
        <div class="textarea-group">
            <label for="group1">第一組Email</label>
            <textarea id="group1" placeholder="第一組Email"></textarea>
        </div>
        <div class="textarea-group">
            <label for="group2">第二組Email</label>
            <textarea id="group2" placeholder="第二組Email"></textarea>
        </div>
    </div>

    <button onclick="compareEmails()">開始對比</button>

    <div class="container">
        <div class="result-block" id="commonEmails">
            <h2>兩組都有的Email</h2>
            <p class="email-count">數量: 0</p>
            <p>等待結果...</p>
            <button class="copy-btn" onclick="copyToClipboard('commonEmails')">複製</button>
        </div>
        <div class="result-block" id="uniqueToGroup1">
            <h2>第一組獨有的Email</h2>
            <p class="email-count">數量: 0</p>
            <p>等待結果...</p>
            <button class="copy-btn" onclick="copyToClipboard('uniqueToGroup1')">複製</button>
        </div>
        <div class="result-block" id="uniqueToGroup2">
            <h2>第二組獨有的Email</h2>
            <p class="email-count">數量: 0</p>
            <p>等待結果...</p>
            <button class="copy-btn" onclick="copyToClipboard('uniqueToGroup2')">複製</button>
        </div>
    </div>

    <div class="additional-container">
        <div class="result-block" id="repeatedInGroup2">
            <h2>第二組重複的Email</h2>
            <p class="email-count">數量: 0</p>
            <p>等待結果...</p>
            <button class="copy-btn" onclick="copyToClipboard('repeatedInGroup2')">複製</button>
        </div>
        <div class="result-block" id="nonRepeatedInGroup2">
            <h2>第二組無重複的Email</h2>
            <p class="email-count">數量: 0</p>
            <p>等待結果...</p>
            <button class="copy-btn" onclick="copyToClipboard('nonRepeatedInGroup2')">複製</button>
        </div>
    </div>

    <footer>Developer: Matt Li<br>Update: 4 Dec 2024</footer>

    <script>
        // 禁用右鍵
        document.addEventListener('contextmenu', function (e) {
            e.preventDefault();
            alert("此網站禁止右鍵操作！");
        });

        // 禁用快捷鍵（包括 Ctrl+C, Ctrl+X, Command+C, Command+X 等）
        document.addEventListener('keydown', function (e) {
            if (
                (e.ctrlKey && (e.key === 'c' || e.key === 'x')) ||
                (e.metaKey && (e.key === 'c' || e.key === 'x')) ||
                (e.key === 'F12') ||
                (e.ctrlKey && e.shiftKey && e.key === 'I')
            ) {
                e.preventDefault();
                alert("此功能已被禁用！");
            }
        });

        function compareEmails() {
            const group1Text = document.getElementById('group1').value.trim();
            const group2Text = document.getElementById('group2').value.trim();

            const group1Emails = group1Text.split('\n').map(email => email.trim()).filter(email => email !== '');
            const group2Emails = group2Text.split('\n').map(email => email.trim()).filter(email => email !== '');

            const commonEmails = group1Emails.filter(email => group2Emails.includes(email));
            const uniqueToGroup1 = group1Emails.filter(email => !group2Emails.includes(email));
            const uniqueToGroup2 = group2Emails.filter(email => !group1Emails.includes(email));

            const emailCount = group2Emails.reduce((acc, email) => {
                acc[email] = (acc[email] || 0) + 1;
                return acc;
            }, {});

            const repeatedInGroup2 = Object.keys(emailCount).filter(email => emailCount[email] > 1);
            const nonRepeatedInGroup2 = Object.keys(emailCount).filter(email => emailCount[email] === 1);

            updateResultBlock('commonEmails', commonEmails);
            updateResultBlock('uniqueToGroup1', uniqueToGroup1);
            updateResultBlock('uniqueToGroup2', uniqueToGroup2);
            updateResultBlock('repeatedInGroup2', repeatedInGroup2);
            updateResultBlock('nonRepeatedInGroup2', nonRepeatedInGroup2);
        }

        function updateResultBlock(blockId, emails) {
            const block = document.getElementById(blockId);
            const count = emails.length;
            const emailList = count > 0 ? emails.join('<br>') : '無';
            block.innerHTML = `
                <h2>${block.querySelector('h2').textContent}</h2>
                <p class="email-count">數量: ${count}</p>
                <p>${emailList}</p>
                <button class="copy-btn" onclick="copyToClipboard('${blockId}')">複製</button>
            `;
        }

        function copyToClipboard(blockId) {
            const block = document.getElementById(blockId);
            const emailList = Array.from(block.querySelectorAll('p'))[1].innerHTML.split('<br>').join('\n');
            navigator.clipboard.writeText(emailList).then(() => {
                alert("內容已成功複製到剪貼板！");
            }).catch(err => {
                alert("複製失敗，請重試！");
            });
        }
    </script>