<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <title>Gerador de JSON de Itens</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f9;
            margin: 0;
            padding: 0;
            font-size: 14px; /* Reduzido para otimizar espaço */
        }

        h1, h2, h3, h4 {
            color: #333;
            margin: 10px 0;
            font-size: 18px; /* Reduzido */
        }

        label {
            font-weight: bold;
            margin-bottom: 5px;
            display: block;
            flex: 1 0 100px;
            font-size: 13px; /* Reduzido */
        }

        .input-group {
            display: flex;
            align-items: center;
            margin-bottom: 8px; /* Reduzido */
            flex-wrap: wrap;
        }

        .input-group label {
            margin-right: 5px;
            min-width: 80px; /* Ajustado para otimizar espaço */
            font-size: 13px; /* Reduzido */
        }

        .input-group input[type="number"] {
            margin-right: 5px;
            padding: 4px;
            border: 1px solid #ccc;
            border-radius: 5px;
            font-size: 13px; /* Reduzido */
            width: 60px; /* Ajustado para otimizar espaço */
            box-sizing: border-box;
        }

        select, button {
            margin: 5px 0 10px; /* Reduzido */
            padding: 6px;
            border: 1px solid #ccc;
            border-radius: 5px;
            font-size: 14px; /* Mantido */
            width: 100%;
            box-sizing: border-box;
        }

        button {
            background-color: #007bff;
            color: white;
            cursor: pointer;
            transition: background-color 0.3s;
            border: none;
            flex: 1;
            height: 34px; /* Uniformização */
        }

        button:hover {
            background-color: #0056b3;
        }

        .button-small {
            padding: 4px 8px;
            font-size: 12px;
            margin-left: 5px;
            background-color: #6c757d;
            border: none;
            border-radius: 3px;
            cursor: pointer;
        }

        .button-small:hover {
            background-color: #5a6268;
        }

        .container {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            max-width: 1400px;
            margin: auto;
            padding: 20px;
            background-color: #fff;
            height: 100vh;
            box-sizing: border-box;
            
        }

        .form-container, .list-container {
            flex: 1;
            min-width: 300px;
            max-width: 700px; /* Ajustado para otimizar espaço */
            background-color: #fff;
            padding: 15px; /* Reduzido */
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            overflow: hidden;
        }

        .list-container {
            max-height: calc(100vh - 60px);
            display: flex;
            flex-direction: column;
        }

        .item-list {
            margin-bottom: 15px; /* Reduzido */
            flex: 1;
            overflow-y: auto;
        }

        .item {
            display: flex;
            justify-content: space-between;
            padding: 8px; /* Reduzido */
            margin-bottom: 5px;
            background-color: #fff;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 13px; /* Reduzido */
        }

        .item:hover {
            background-color: #f1f1f1;
        }

        .percentages {
            display: flex;
            flex-wrap: wrap;
            gap: 3px; /* Reduzido */
            margin-top: 3px;
        }

        .percentage-value {
            font-size: 11px; /* Reduzido */
            padding: 2px 4px;
            border-radius: 4px;
            background-color: #e9ecef;
        }

        #output {
            padding: 8px; /* Reduzido */
            background-color: #f8f9fa;
            border: 1px solid #ddd;
            border-radius: 5px;
            white-space: pre-wrap;
            overflow-x: auto;
            max-height: 180px; /* Ajustado para otimizar espaço */
            font-size: 13px; /* Reduzido */
        }

        .button-group {
            display: flex;
            gap: 10px;
            margin-top: 10px;
            flex-wrap: wrap;
        }

        .copy-button-group {
            display: flex;
            justify-content: flex-end;
            margin-bottom: 10px;
        }

        .copy-button-group button {
            width: auto;
            padding: 6px 12px;
            background-color: #28a745;
            height: 34px; /* Uniformização */
        }

        .copy-button-group button:hover {
            background-color: #218838;
        }

        .mode-indicator {
            font-weight: bold;
            margin-bottom: 10px; /* Reduzido */
            color: #007bff;
            font-size: 14px; /* Reduzido */
        }

        .nested-section {
            width: 100%;
            display: flex;
            gap: 20px;
            flex-wrap: wrap;
        }

        .exc-section, .socket-section {
            flex: 1;
            min-width: 280px; /* Ajustado para otimizar espaço */
        }

        @media (max-width: 768px) {
            .input-group {
                flex-direction: column;
                align-items: flex-start;
            }

            .input-group label, .input-group input[type="number"] {
                width: 100%;
                margin-right: 0;
            }

            .button-group {
                flex-direction: column;
            }

            .button-group button {
                width: 100%;
            }

            .copy-button-group {
                justify-content: center;
            }

            .nested-section {
                flex-direction: column;
            }

            .exc-section, .socket-section {
                min-width: 100%;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- Formulário -->
        <div class="form-container">
            <h1>Gerador de JSON de Itens</h1>

            <!-- Modo de Operação -->
            <div id="mode-indicator" class="mode-indicator">Modo: Adicionar Novo Item</div>

            <!-- Seção de configuração: Categoria e Item lado a lado -->
            <div class="input-group">
                <label for="category">Categoria:</label>
                <select id="category" disabled>
                    <option value="">Selecione...</option>
                </select>

                <label for="item">Item:</label>
                <select id="item" disabled>
                    <option value="">Selecione...</option>
                </select>
            </div>

            <!-- Campos dinâmicos -->
            <h3>Configurações</h3>
            <div class="input-group">
                <label for="level-min">Level Min:</label>
                <input type="number" id="level-min" value="0" min="0">
                <label for="level-max">Level Max:</label>
                <input type="number" id="level-max" value="15" min="0">
            </div>

            <div class="input-group">
                <label>Skill:</label>
                <input type="number" id="skill-0" value="50" min="0" step="0.01">
                <input type="number" id="skill-1" value="50" min="0" step="0.01">
                <input type="number" id="skill-2" value="50" min="0" step="0.01">
            </div>

            <div class="input-group">
                <label>Luck:</label>
                <input type="number" id="luck-0" value="50" min="0" step="0.01">
                <input type="number" id="luck-1" value="50" min="0" step="0.01">
                <input type="number" id="luck-2" value="50" min="0" step="0.01">
            </div>

            <!-- Novos Campos: Opções Adicionais -->
            <h3>Opções Adicionais</h3>
            <div class="input-group">
                <label for="opt-min">Opt Min:</label>
                <input type="number" id="opt-min" value="0" min="0">
                <label for="opt-max">Opt Max:</label>
                <input type="number" id="opt-max" value="7" min="0">
            </div>

            <div class="nested-section">
                <!-- Exc à esquerda -->
                <div class="exc-section">
                    <h4>Exc</h4>
                    <!-- Exc de 1 a 6 -->
                    <div class="input-group">
                        <label for="exc-1-0">Exc 1:</label>
                        <input type="number" id="exc-1-0" value="50" min="0" step="0.01">
                        <input type="number" id="exc-1-1" value="50" min="0" step="0.01">
                        <input type="number" id="exc-1-2" value="50" min="0" step="0.01">
                    </div>
                    <div class="input-group">
                        <label for="exc-2-0">Exc 2:</label>
                        <input type="number" id="exc-2-0" value="50" min="0" step="0.01">
                        <input type="number" id="exc-2-1" value="50" min="0" step="0.01">
                        <input type="number" id="exc-2-2" value="50" min="0" step="0.01">
                    </div>
                    <div class="input-group">
                        <label for="exc-3-0">Exc 3:</label>
                        <input type="number" id="exc-3-0" value="50" min="0" step="0.01">
                        <input type="number" id="exc-3-1" value="50" min="0" step="0.01">
                        <input type="number" id="exc-3-2" value="50" min="0" step="0.01">
                    </div>
                    <div class="input-group">
                        <label for="exc-4-0">Exc 4:</label>
                        <input type="number" id="exc-4-0" value="50" min="0" step="0.01">
                        <input type="number" id="exc-4-1" value="50" min="0" step="0.01">
                        <input type="number" id="exc-4-2" value="50" min="0" step="0.01">
                    </div>
                    <div class="input-group">
                        <label for="exc-5-0">Exc 5:</label>
                        <input type="number" id="exc-5-0" value="50" min="0" step="0.01">
                        <input type="number" id="exc-5-1" value="50" min="0" step="0.01">
                        <input type="number" id="exc-5-2" value="50" min="0" step="0.01">
                    </div>
                    <div class="input-group">
                        <label for="exc-6-0">Exc 6:</label>
                        <input type="number" id="exc-6-0" value="50" min="0" step="0.01">
                        <input type="number" id="exc-6-1" value="50" min="0" step="0.01">
                        <input type="number" id="exc-6-2" value="50" min="0" step="0.01">
                    </div>
                </div>

                <!-- Socket à direita -->
                <div class="socket-section">
                    <h4>Socket</h4>
                    <!-- Socket de 1 a 3 -->
                    <div class="input-group">
                        <label for="socket-1-0">Socket 1:</label>
                        <input type="number" id="socket-1-0" value="50" min="0" step="0.01">
                        <input type="number" id="socket-1-1" value="50" min="0" step="0.01">
                        <input type="number" id="socket-1-2" value="50" min="0" step="0.01">
                    </div>
                    <div class="input-group">
                        <label for="socket-2-0">Socket 2:</label>
                        <input type="number" id="socket-2-0" value="50" min="0" step="0.01">
                        <input type="number" id="socket-2-1" value="50" min="0" step="0.01">
                        <input type="number" id="socket-2-2" value="50" min="0" step="0.01">
                    </div>
                    <div class="input-group">
                        <label for="socket-3-0">Socket 3:</label>
                        <input type="number" id="socket-3-0" value="50" min="0" step="0.01">
                        <input type="number" id="socket-3-1" value="50" min="0" step="0.01">
                        <input type="number" id="socket-3-2" value="50" min="0" step="0.01">
                    </div>
                </div>
            </div>

            <div class="input-group">
                <label>Ancient:</label>
                <input type="number" id="ancient-0" value="50" min="0" step="0.01">
                <input type="number" id="ancient-1" value="50" min="0" step="0.01">
                <input type="number" id="ancient-2" value="50" min="0" step="0.01">
            </div>

            <div class="input-group">
                <label for="item-time">ItemTime:</label>
                <input type="number" id="item-time" value="0" min="0">
                <label for="chance">Chance:</label>
                <input type="number" id="chance" value="0.5" step="0.01" min="0">
            </div>

            <div class="input-group">
                <label>Rate:</label>
                <input type="number" id="rate-0" value="50" min="0" step="0.01">
                <input type="number" id="rate-1" value="50" min="0" step="0.01">
                <input type="number" id="rate-2" value="50" min="0" step="0.01">
            </div>

            <!-- Botões de ação -->
            <div class="button-group">
                <button id="generate" disabled>Adicionar Item</button>
                <button id="clear-list" style="background-color: #dc3545;">Limpar Lista</button>
            </div>
        </div>

        <!-- Lista de itens e JSON -->
        <div class="list-container">
            <h2>Itens Adicionados</h2>
            <div id="item-list" class="item-list"></div>

            <h2>JSON Gerado</h2>
            <div class="copy-button-group">
                <button id="copy-json">Copiar JSON</button>
            </div>
            <pre id="output"></pre>
        </div>
    </div>

    <script>
        const categories = {
            0: 'Swords',
            1: 'Axes',
            2: 'Maces',
            3: 'Spears',
            4: 'Bows',
            5: 'Staffs',
            6: 'Shields',
            7: 'Helms',
            8: 'Armors',
            9: 'Pants',
            10: 'Gloves',
            11: 'Boots',
            12: 'Wings',
            13: 'Outros',
            15: 'Powers'
        };

        const colors = ['#ff6666', '#ffcc66', '#66ff66'];

        const itemList = document.getElementById('item-list');
        const output = document.getElementById('output');
        const categorySelect = document.getElementById('category');
        const itemSelect = document.getElementById('item');
        const generateButton = document.getElementById('generate');
        const clearListButton = document.getElementById('clear-list');
        const copyJsonButton = document.getElementById('copy-json');
        const modeIndicator = document.getElementById('mode-indicator');

        let itemData = {};
        let addedItems = [];
        let currentItemIndex = null;

        // Função para carregar o arquivo item.txt automaticamente
        window.onload = () => {
            fetch('./item.txt')
                .then(response => response.text())
                .then(data => processFile(data))
                .catch(error => console.error('Erro ao carregar o arquivo item.txt:', error));
        };

        function processFile(fileContent) {
            const lines = fileContent.split('\n');
            let currentCategory = null;

            lines.forEach(line => {
                line = line.trim();
                if (!isNaN(line) && line !== '') {
                    currentCategory = line;
                    itemData[currentCategory] = [];
                } else if (currentCategory && line.match(/^\d+/)) {
                    const columns = line.split(/\s+/);
                    const index = columns[1];
                    const name = line.match(/"(.*?)"/)?.[1] || `Item ${index}`;
                    itemData[currentCategory].push({ Index: index, Name: name });
                }
            });

            populateCategories();
        }

        function populateCategories() {
            categorySelect.innerHTML = '<option value="">Selecione...</option>';
            Object.keys(itemData).forEach(category => {
                const option = document.createElement('option');
                option.value = category;
                option.textContent = categories[category] || `Categoria ${category}`;
                categorySelect.appendChild(option);
            });
            categorySelect.disabled = false;
        }

        categorySelect.addEventListener('change', () => {
            const selectedCategory = categorySelect.value;

            itemSelect.innerHTML = '<option value="">Selecione...</option>';
            if (selectedCategory && itemData[selectedCategory]) {
                itemData[selectedCategory].forEach(item => {
                    const option = document.createElement('option');
                    option.value = item.Index;
                    option.textContent = item.Name;
                    itemSelect.appendChild(option);
                });
                itemSelect.disabled = false;
                generateButton.disabled = true;
            } else {
                itemSelect.disabled = true;
                generateButton.disabled = true;
            }
        });

        itemSelect.addEventListener('change', () => {
            generateButton.disabled = !itemSelect.value;
        });

        generateButton.addEventListener('click', () => {
            const isEditMode = currentItemIndex !== null;
            const item = {
                Section: parseInt(categorySelect.value),
                Index: parseInt(itemSelect.value),
                Level: {
                    Min: parseInt(document.getElementById('level-min').value),
                    Max: parseInt(document.getElementById('level-max').value)
                },
                Skill: [
                    parseFloat(document.getElementById('skill-0').value),
                    parseFloat(document.getElementById('skill-1').value),
                    parseFloat(document.getElementById('skill-2').value)
                ],
                Luck: [
                    parseFloat(document.getElementById('luck-0').value),
                    parseFloat(document.getElementById('luck-1').value),
                    parseFloat(document.getElementById('luck-2').value)
                ],
                Opt: {
                    Min: parseInt(document.getElementById('opt-min').value),
                    Max: parseInt(document.getElementById('opt-max').value)
                },
                Exc: {},
                Ancient: [
                    parseFloat(document.getElementById('ancient-0').value),
                    parseFloat(document.getElementById('ancient-1').value),
                    parseFloat(document.getElementById('ancient-2').value)
                ],
                Socket: {},
                ItemTime: parseInt(document.getElementById('item-time').value),
                Chance: parseFloat(document.getElementById('chance').value),
                Rate: [
                    parseFloat(document.getElementById('rate-0').value),
                    parseFloat(document.getElementById('rate-1').value),
                    parseFloat(document.getElementById('rate-2').value)
                ]
            };

            // Process Exc fields (1 to 6)
            for (let i = 1; i <= 6; i++) {
                item.Exc[i] = [
                    parseFloat(document.getElementById(`exc-${i}-0`).value),
                    parseFloat(document.getElementById(`exc-${i}-1`).value),
                    parseFloat(document.getElementById(`exc-${i}-2`).value)
                ];
            }

            // Process Socket fields (1 to 3)
            for (let i = 1; i <= 3; i++) {
                item.Socket[i] = [
                    parseFloat(document.getElementById(`socket-${i}-0`).value),
                    parseFloat(document.getElementById(`socket-${i}-1`).value),
                    parseFloat(document.getElementById(`socket-${i}-2`).value)
                ];
            }

            if (isEditMode) {
                addedItems[currentItemIndex] = item;
                currentItemIndex = null;
                modeIndicator.textContent = 'Modo: Adicionar Novo Item';
                generateButton.textContent = 'Adicionar Item';
            } else {
                addedItems.push(item);
            }

            refreshItemList();
            resetForm();
        });

        function refreshItemList() {
            itemList.innerHTML = '';
            addedItems.forEach((item, index) => {
                const div = document.createElement('div');
                div.className = 'item';
                div.innerHTML = `
                    <div>
                        <strong>${categories[item.Section]} - ${itemData[item.Section].find(i => i.Index == item.Index).Name}</strong>
                        <div class="percentages">
                            <span class="percentage-value" style="background-color: ${colors[0]};">Skill: ${item.Skill.join('%, ')}%</span>
                            <span class="percentage-value" style="background-color: ${colors[1]};">Luck: ${item.Luck.join('%, ')}%</span>
                            <span class="percentage-value" style="background-color: ${colors[2]};">Opt: Min ${item.Opt.Min}, Max ${item.Opt.Max}</span>
                        </div>
                    </div>
                    <div>
                        <button class="button-small" onclick="editItem(${index})">Editar</button>
                        <button class="button-small" onclick="deleteItem(${index})">Excluir</button>
                    </div>
                `;
                itemList.appendChild(div);
            });

            output.textContent = generateJsonOutput();
        }

        function editItem(index) {
            currentItemIndex = index;
            const item = addedItems[index];

            categorySelect.value = item.Section;
            categorySelect.dispatchEvent(new Event('change'));

            setTimeout(() => {
                itemSelect.value = item.Index;

                document.getElementById('level-min').value = item.Level.Min;
                document.getElementById('level-max').value = item.Level.Max;

                document.getElementById('skill-0').value = item.Skill[0];
                document.getElementById('skill-1').value = item.Skill[1];
                document.getElementById('skill-2').value = item.Skill[2];

                document.getElementById('luck-0').value = item.Luck[0];
                document.getElementById('luck-1').value = item.Luck[1];
                document.getElementById('luck-2').value = item.Luck[2];

                document.getElementById('opt-min').value = item.Opt.Min;
                document.getElementById('opt-max').value = item.Opt.Max;

                // Exc fields
                for (let i = 1; i <= 6; i++) {
                    document.getElementById(`exc-${i}-0`).value = item.Exc[i][0];
                    document.getElementById(`exc-${i}-1`).value = item.Exc[i][1];
                    document.getElementById(`exc-${i}-2`).value = item.Exc[i][2];
                }

                // Ancient fields
                document.getElementById('ancient-0').value = item.Ancient[0];
                document.getElementById('ancient-1').value = item.Ancient[1];
                document.getElementById('ancient-2').value = item.Ancient[2];

                // Socket fields
                for (let i = 1; i <= 3; i++) {
                    document.getElementById(`socket-${i}-0`).value = item.Socket[i][0];
                    document.getElementById(`socket-${i}-1`).value = item.Socket[i][1];
                    document.getElementById(`socket-${i}-2`).value = item.Socket[i][2];
                }

                document.getElementById('item-time').value = item.ItemTime;
                document.getElementById('chance').value = item.Chance;

                document.getElementById('rate-0').value = item.Rate[0];
                document.getElementById('rate-1').value = item.Rate[1];
                document.getElementById('rate-2').value = item.Rate[2];

                // Atualizar o modo e o texto do botão
                modeIndicator.textContent = 'Modo: Editar Item';
                generateButton.textContent = 'Salvar Alterações';
                generateButton.disabled = false;
            }, 100);
        }

        function deleteItem(index) {
            if (confirm('Tem certeza que deseja excluir este item?')) {
                addedItems.splice(index, 1);
                refreshItemList();
            }
        }

        function generateJsonOutput() {
            return addedItems.map(item => {
                const excEntries = Object.entries(item.Exc).map(([key, value]) => `[${key}] = {[0] = ${value[0]}, [1] = ${value[1]}, [2] = ${value[2]}}}`).join(', ');
                const socketEntries = Object.entries(item.Socket).map(([key, value]) => `[${key}] = {[0] = ${value[0]}, [1] = ${value[1]}, [2] = ${value[2]}}}`).join(', ');
                return `{
    Section = ${item.Section},
    Index = ${item.Index},
    Level = {Min = ${item.Level.Min}, Max = ${item.Level.Max}},
    Skill = {[0] = ${item.Skill[0]}, [1] = ${item.Skill[1]}, [2] = ${item.Skill[2]}},
    Luck = {[0] = ${item.Luck[0]}, [1] = ${item.Luck[1]}, [2] = ${item.Luck[2]}},
    Opt = {Min = ${item.Opt.Min}, Max = ${item.Opt.Max}},
    Exc = {${excEntries}},
    Ancient = {[0] = ${item.Ancient[0]}, [1] = ${item.Ancient[1]}, [2] = ${item.Ancient[2]}},
    Socket = {${socketEntries}},
    ItemTime = ${item.ItemTime},
    Chance = ${item.Chance},
    Rate = {[0] = ${item.Rate[0]}, [1] = ${item.Rate[1]}, [2] = ${item.Rate[2]}}
}`;
            }).join(',\n\n');
        }

        function resetForm() {
            if (currentItemIndex === null) {
                // Resetar para valores padrão apenas se não estiver editando
                document.getElementById('level-min').value = 0;
                document.getElementById('level-max').value = 15;

                document.getElementById('skill-0').value = 50;
                document.getElementById('skill-1').value = 50;
                document.getElementById('skill-2').value = 50;

                document.getElementById('luck-0').value = 50;
                document.getElementById('luck-1').value = 50;
                document.getElementById('luck-2').value = 50;

                document.getElementById('opt-min').value = 0;
                document.getElementById('opt-max').value = 7;

                for (let i = 1; i <= 6; i++) {
                    document.getElementById(`exc-${i}-0`).value = 50;
                    document.getElementById(`exc-${i}-1`).value = 50;
                    document.getElementById(`exc-${i}-2`).value = 50;
                }

                document.getElementById('ancient-0').value = 50;
                document.getElementById('ancient-1').value = 50;
                document.getElementById('ancient-2').value = 50;

                for (let i = 1; i <= 3; i++) {
                    document.getElementById(`socket-${i}-0`).value = 50;
                    document.getElementById(`socket-${i}-1`).value = 50;
                    document.getElementById(`socket-${i}-2`).value = 50;
                }

                document.getElementById('item-time').value = 0;
                document.getElementById('chance').value = 0.5;

                document.getElementById('rate-0').value = 50;
                document.getElementById('rate-1').value = 50;
                document.getElementById('rate-2').value = 50;
            }
        }

        // Botão para limpar a lista de itens
        clearListButton.addEventListener('click', () => {
            if (confirm('Tem certeza que deseja limpar toda a lista de itens?')) {
                addedItems = [];
                refreshItemList();
            }
        });

        // Botão para copiar o JSON gerado
        copyJsonButton.addEventListener('click', () => {
            const jsonText = output.textContent;
            navigator.clipboard.writeText(jsonText).then(() => {
                alert('JSON copiado para a área de transferência!');
            }).catch(err => {
                alert('Falha ao copiar o JSON: ' + err);
            });
        });

        // Função global para editar e deletar itens
        window.editItem = editItem;
        window.deleteItem = deleteItem;
    </script>
</body>
</html>
