<!DOCTYPE html>
        <html>
        <head>
            <title>Card List Parser</title>
        </head>
            <textarea id="textInput" rows="10" cols="50"></textarea><br>
            <button id="applyButton">Apply</button>
            <button id="resetButton">Reset</button>

            <input type="file" id="fileInput" />
            <label><input type="checkbox" id="toggleInfo"> Show card names only</label>
            <div id="cardListOutput"></div>

            <script>

            document.getElementById('fileInput').addEventListener('change', handleFileSelect, false);
            document.getElementById('toggleInfo').addEventListener('change', handleToggleChange, false);

            document.getElementById('applyButton').addEventListener('click', function() {
                const textInput = document.getElementById('textInput').value;
                const cards = parseCardList(textInput);
                displayCards(cards, false);
            });

            document.getElementById('resetButton').addEventListener('click', function() {
                document.getElementById('textInput').value = '';
                document.getElementById('cardListOutput').innerHTML = '';
            });

            let cards = [];

            function handleFileSelect(event) {
                const file = event.target.files[0];
                if (!file) {
                    return;
                }

                const reader = new FileReader();
                reader.onload = function(fileEvent) {
                    const text = fileEvent.target.result;
                    cards = parseCardList(text);

                    const sortedCards = sortCards(cards);
                    displayCards(sortedCards, false);
                };
                reader.readAsText(file);
            }

            function handleToggleChange() {
                const isChecked = document.getElementById('toggleInfo').checked;
                displayCards(cards, isChecked);
            }

            function displayCards(cards, showNamesOnly) {
                const outputDiv = document.getElementById('cardListOutput');
                outputDiv.innerHTML = '';

                // 장수별 컬러
                const quantityColorMap = {
                        2: 'blue',
                        3: 'green',
                        4: 'orange',
                        5: 'red'
                };

                cards.forEach(card => {

                    let color = quantityColorMap[card.quantity] || 'black'; 

                    // 카드 정보 표시
                    const cardElement = document.createElement('div');

                    if (showNamesOnly) {
                        cardElement.innerHTML = `<strong style="color: ${color};">${card.name}</strong><hr>`;
                    } else {
                        cardElement.innerHTML = `<br>${card.edition} (${card.condition}, Quantity: ${card.quantity}, Price: $${card.price.toFixed(2)}, Total: $${card.total.toFixed(2)})</br><strong style="color: ${color};">${card.name}</strong><hr>`;
                    }

                     // 클릭 시, 바뀌는 배경 컬러
                     const bgColors = ['white', '#add8e6', '#90ee90'];
                     let currentColorIndex = 0;

                    // 클릭시 배경 변경
                    cardElement.style.cursor = 'pointer';
                    cardElement.onclick = function() {
                        currentColorIndex = (currentColorIndex + 1) % bgColors.length;
                        this.style.backgroundColor = bgColors[currentColorIndex];
                    };

                    outputDiv.appendChild(cardElement);
                });
            }

            function parseCardList(cardListText) 
            {
                const lines = cardListText.split('\\n');

                let currentCondition = '';

                lines.forEach(line => {

                    if ((/^\\s*$/.test(line)) || (/SINGLES\\s*$/.test(line)) || (/Description\\s*/.test(line))) {
                        return;
                    }

                    const firstColonIndex = line.indexOf(':');
                    if (firstColonIndex === -1) return; // 카드명, 판본 분리, ':'가 없으면 유효 X

                    const name = line.substring(0, firstColonIndex).trim();
                    const restLine = line.substring(firstColonIndex + 1).trim();

                    const parts = restLine.split('\\t'); // 나머지 분리

                    if (parts.length >= 4) {

                        const edition = parts[0].trim();
                        const condition = parts[1].trim();
                        const quantity = parseInt(parts[2]);
                        const price = parseFloat(parts[3].substring(1));
                        const total = parseFloat(parts[4].substring(1));

                        cards.push({
                            name,
                            edition,
                            condition,
                            quantity,
                            price,
                            total
                        });
                    }
                });

                return cards;
            }

            function sortCards(cards) {

                const conditionOrder = {
                    'NM': 1,
                    'EX': 2,
                    'G': 3,
                    'VG': 4
                };

                // 상태 / 판본 / 이름 순 정렬
                return cards.sort((a, b) => {

                    const conditionCompare = (conditionOrder[a.condition] || 5) - (conditionOrder[b.condition] || 5);
                    if (conditionCompare !== 0) return conditionCompare;

                    const editionCompare = a.edition.localeCompare(b.edition);
                    if (editionCompare !== 0) return editionCompare;

                    return a.name.localeCompare(b.name);
                });
            }

            </script>
        </body>
        </html>