<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Weapon.dat Editor</title>
    <style>
        body {
            font-family: 'Roboto', sans-serif;
            margin: 0;
            background-color: #2b2b2b;
            color: #ffffff;
            display: flex;
            flex-direction: column;
            min-height: 100vh;
            padding: 20px;
        }

        h1 {
            text-align: center;
            margin-bottom: 20px;
            font-size: 2.5rem;
            color: hsl(214.2,0%,100%);
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            background-color: #3a3a3a;
            border-radius: 12px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        }

        .form-group {
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: flex-start;
            gap: 20px;
            margin-bottom: 20px;
            width: 100%;
        }

        input, select, button {
            padding: 12px 20px;
            border: none;
            border-radius: 8px;
            font-size: 16px;
            background-color: #444;
            color: #ffffff;
            width: 100%;
            max-width: 300px;
            transition: background-color 0.3s, transform 0.3s;
        }

        input[type="file"] {
            max-width: 260px;
        }

        input:focus, select:focus, button:hover {
            background-color: #666;
            outline: none;
            transform: scale(1.05);
        }

        button[disabled] {
            background-color: #555;
            cursor: not-allowed;
        }

        #editor {
            margin-top: 20px;
            overflow-x: auto;
            padding: 20px;
            background-color: #2e2e2e;
            border-radius: 12px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
            display: none;
        }

        table {
            width: 100%;
            border-collapse: collapse;
        }

        th, td {
            border: 1px solid #555;
            padding: 14px;
            text-align: left;
            white-space: nowrap;
        }

        th {
            background-color: #444;
        }

        td input[type="text"], td select {
            width: 100%;
            box-sizing: border-box;
            background-color: #555;
            color: #ffffff;
            border: none;
            padding: 10px;
            border-radius: 8px;
        }

        .footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px;
            background-color: #2b2b2b;
            color: #ffffff;
            border-top: 1px solid #555;
            margin-top: 20px;
            border-radius: 12px;
            box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.5);
        }

        .footer a {
            color: hsl(212.6,91.6%,64.5%);
            text-decoration: none;
            display: flex;
            align-items: center;
            font-size: 1.0rem;
        }

        .footer a img {
            margin-right: 8px;
        }

        @media (max-width: 600px) {
            .form-group {
                flex-direction: column;
                gap: 10px;
            }

            input, select, button {
                width: 100%;
            }
        }
    </style>
</head>
<body>
    <h1>Weapon.dat Editor</h1>
    <div class="container">
        <div class="form-group">
            <input type="file" id="fileInput" accept=".dat">
            <select id="weaponSelect">
                <option value="" disabled selected>Select a Weapon</option>
            </select>
            <button id="saveButton" disabled>Save Changes</button>
        </div>
        <div id="editor"></div>
    </div>
    <footer class="footer">
        <a href="https://discord.gg/YhY7jtFn62" target="_blank">
            <img src="https://cdn-icons-png.flaticon.com/512/2111/2111370.png" alt="Discord Logo" width="24" height="24">
            Join Discord
        </a>
        <span>KCS Community</span>
    </footer>

    <script>
        const fileInput = document.getElementById('fileInput');
        const weaponSelect = document.getElementById('weaponSelect');
        const saveButton = document.getElementById('saveButton');
        const editor = document.getElementById('editor');

        fileInput.addEventListener('change', handleFileUpload);
        weaponSelect.addEventListener('change', handleWeaponSelect);
        saveButton.addEventListener('click', saveChanges);

        let weaponData = [];
        let fileLines = [];
        let fileName = 'weapon.dat';
        const meleeIdentifier = '�';
        const gunIdentifier = '$';

        function handleFileUpload(event) {
            const file = event.target.files[0];
            if (file && (file.name.toLowerCase() === 'weapon.dat')) {
                fileName = file.name;
                const reader = new FileReader();
                reader.onload = e => {
                    parseWeaponData(e.target.result);
                    weaponSelect.style.display = 'block';
                    saveButton.style.display = 'block';
                    saveButton.disabled = false;
                };
                reader.readAsText(file);
            } else {
                alert('Please upload a valid weapon.dat file.');
            }
        }

        function parseWeaponData(content) {
            fileLines = content.split('\n');
            weaponData = fileLines.map((line, lineIndex) => {
                const values = line.trim().split(/\s+/);
                if (values.length > 1) {
                    const type = values[0];
                    if (type === meleeIdentifier) {
                        return { 
                            type: 'Melee',
                            lineIndex,
                            weaponType: values[1],
                            fireType: values[2],
                            targetRange: values[3],
                            weaponRange: values[4],
                            modelId1: values[5],
                            modelId2: values[6],
                            weaponSlot: values[7],
                            baseCombo: values[8],
                            numCombos: values[9] !== undefined ? values[9] : "0",
                            flags: values[10] !== undefined ? values[10] : "0"
                        };
                    } else if (type === gunIdentifier) {
                        return {
                            type: 'Gun',
                            lineIndex,
                            weaponType: values[1],
                            fireType: values[2],
                            targetRange: values[3],
                            weaponRange: values[4],
                            modelId1: values[5],
                            modelId2: values[6],
                            weaponSlot: values[7],
                            animGroup: values[8],
                            clipAmmo: values[9],
                            damage: values[10],
                            fireOffsetX: values[11],
                            fireOffsetY: values[12],
                            fireOffsetZ: values[13],
                            skillLevel: values[14],
                            reqStatLevel: values[15],
                            accuracy: values[16],
                            moveSpeed: values[17],
                            animLoop1Start: values[18],
                            animLoop1End: values[19],
                            animLoop1Fire: values[20],
                            animLoop2Start: values[21],
                            animLoop2End: values[22],
                            animLoop2Fire: values[23],
                            breakoutTime: values[24],
                            flags: values[25]
                        };
                    }
                }
                return null;
            }).filter(Boolean);
            populateWeaponSelect();
        }

        function populateWeaponSelect() {
            weaponSelect.innerHTML = '<option value="" disabled selected>Select a Weapon</option>';
            weaponData.forEach((weapon, index) => {
                const option = document.createElement('option');
                option.value = index;
                option.textContent = `${weapon.type} - ${weapon.weaponType}`;
                weaponSelect.appendChild(option);
            });
        }

        function handleWeaponSelect(event) {
            const index = event.target.value;
            if (index !== "") {
                editor.style.display = 'block';
                renderEditor(weaponData[index], index);
            }
        }

        function renderEditor(weapon, index) {
            editor.innerHTML = '';
            const table = document.createElement('table');
            const tbody = document.createElement('tbody');

            Object.keys(weapon).forEach(key => {
                if (key !== 'lineIndex' && key !== 'type') {
                    const row = document.createElement('tr');
                    const cellKey = document.createElement('td');
                    cellKey.textContent = key.charAt(0).toUpperCase() + key.slice(1).replace(/([A-Z])/g, ' $1');
                    row.appendChild(cellKey);

                    const cellValue = document.createElement('td');
                    if (key === 'fireType') {
                        const select = document.createElement('select');
                        select.dataset.rowIndex = index;
                        select.dataset.key = key;
                        ['MELEE', 'PROJECTILE', 'INSTANT_HIT', 'USE', 'AFFECT_AREA', 'CAMERA'].forEach(type => {
                            const option = document.createElement('option');
                            option.value = type;
                            option.textContent = type;
                            if (weapon[key] === type) {
                                option.selected = true;
                            }
                            select.appendChild(option);
                        });
                        select.addEventListener('change', handleInputChange);
                        cellValue.appendChild(select);
                    } else if (key === 'animGroup') {
                        const select = document.createElement('select');
                        select.dataset.rowIndex = index;
                        select.dataset.key = key;
                        ['grenade', 'null', 'colt45', 'colt45pro', 'colt_cop', 'silenced', 'pythonbad', 
                        'python', 'shotgunbad', 'shotgun', 'sawnoff', 'sawnoffpro', 'buddy', 'uzibad', 
                        'uzi', 'riflebad', 'rifle', 'sniper', 'rocket', 'flame', 'spraycan', 'goggles'].forEach(group => {
                            const option = document.createElement('option');
                            option.value = group;
                            option.textContent = group;
                            if (weapon[key] === group) {
                                option.selected = true;
                            }
                            select.appendChild(option);
                        });
                        select.addEventListener('change', handleInputChange);
                        cellValue.appendChild(select);
                    } else if (key === 'baseCombo') {
                        const select = document.createElement('select');
                        select.dataset.rowIndex = index;
                        select.dataset.key = key;
                        ['UNARMED', 'BBALLBAT', 'KNIFE', 'SWORD', 'SKATEBOARD', 'CHAINSAW', 'DILDO', 'FLOWERS'].forEach(combo => {
                            const option = document.createElement('option');
                            option.value = combo;
                            option.textContent = combo;
                            if (weapon[key] === combo) {
                                option.selected = true;
                            }
                            select.appendChild(option);
                        });
                        select.addEventListener('change', handleInputChange);
                        cellValue.appendChild(select);
                    } else {
                        const input = document.createElement('input');
                        input.type = 'text';
                        input.value = typeof weapon[key] === 'object' ? JSON.stringify(weapon[key]) : weapon[key];
                        input.dataset.rowIndex = index;
                        input.dataset.key = key;
                        input.addEventListener('input', handleInputChange);
                        cellValue.appendChild(input);
                    }
                    row.appendChild(cellValue);
                    tbody.appendChild(row);
                }
            });

            table.appendChild(tbody);
            editor.appendChild(table);
        }

        function handleInputChange(event) {
            const input = event.target;
            const rowIndex = input.dataset.rowIndex;
            const key = input.dataset.key;
            weaponData[rowIndex][key] = input.value.startsWith('{') ? JSON.parse(input.value) : input.value;
        }

        function saveChanges() {
            const updatedLines = [...fileLines];
            weaponData.forEach(weapon => {
                const lineIndex = weapon.lineIndex;
                const originalLine = fileLines[lineIndex].split(/\s+/);

                const updatedLine = [
                    originalLine[0], weapon.weaponType, weapon.fireType, weapon.targetRange, 
                    weapon.weaponRange, weapon.modelId1, weapon.modelId2, weapon.weaponSlot, 
                    weapon.animGroup, weapon.clipAmmo, weapon.damage, weapon.fireOffsetX, 
                    weapon.fireOffsetY, weapon.fireOffsetZ, weapon.skillLevel, weapon.reqStatLevel, 
                    weapon.accuracy, weapon.moveSpeed, weapon.animLoop1Start, weapon.animLoop1End, 
                    weapon.animLoop1Fire, weapon.animLoop2Start, weapon.animLoop2End, weapon.animLoop2Fire, 
                    weapon.breakoutTime, weapon.flags
                ];

                if (weapon.type === 'Melee') {
                    updatedLine.splice(7, 0, weapon.baseCombo, weapon.numCombos);
                }

                updatedLines[lineIndex] = updatedLine.join(' ');
            });

            const blob = new Blob([updatedLines.join('\n')], { type: 'text/plain' });
            const url = URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = fileName;
            a.click();
            URL.revokeObjectURL(url);
        }
    </script>
</body>
</html>