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

        h1 {
            text-align: center;
            margin-bottom: 20px;
            font-size: 3.5rem;
            color: #ffffff;
            font-weight: bold;
        }

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

        .form-group {
            display: flex;
            flex-direction: column;
            gap: 20px;
            margin-bottom: 20px;
            width: 100%;
            font-weight: bold;
        }

        input, select, button {
            padding: 16px 20px;
            border: none;
            border-radius: 8px;
            font-size: 20px;
            background-color: #333;
            color: #ffffff;
            width: 100%;
            max-width: 100%;
            box-sizing: border-box;
            transition: background-color 0.3s, transform 0.3s;
            font-weight: bold;
        }

        input[type="file"] {
            max-width: 100%;
        }

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

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

        #saveButton {
            background-color: #4CAF50;
        }

        #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;
            box-sizing: border-box;
            font-weight: bold;
        }

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

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

        th {
            background-color: #444;
            font-weight: bold;
        }

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

        .footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px;
            background-color: #121212;
            color: #ffffff;
            border-top: 1px solid #555;
            margin-top: 20px;
            border-radius: 12px;
            box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.5);
            flex-wrap: nowrap;
            gap: 10px;
            flex-direction: column;
            font-weight: bold;
        }

        .footer a {
            color: #0b85ff;
            text-decoration: none;
            display: flex;
            align-items: center;
            font-size: 1.4rem;
            font-weight: bold;
        }

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

        @media (max-width: 1200px) {
            h1 {
                font-size: 3rem;
            }

            .form-group {
                gap: 15px;
            }

            input, select, button {
                font-size: 18px;
                padding: 14px 18px;
            }

            th, td {
                padding: 16px;
            }

            td input[type="text"], td select {
                padding: 12px;
            }

            .footer a {
                font-size: 1.2rem;
            }
        }

        @media (max-width: 992px) {
            h1 {
                font-size: 2.5rem;
            }

            .form-group {
                gap: 12px;
            }

            input, select, button {
                font-size: 16px;
                padding: 12px 16px;
            }

            th, td {
                padding: 14px;
            }

            td input[type="text"], td select {
                padding: 10px;
            }

            .footer a {
                font-size: 1.1rem;
            }
        }

        @media (max-width: 768px) {
            h1 {
                font-size: 2rem;
            }

            .form-group {
                gap: 10px;
            }

            input, select, button {
                font-size: 14px;
                padding: 10px 14px;
            }

            th, td {
                padding: 12px;
            }

            td input[type="text"], td select {
                padding: 8px;
            }

            .footer a {
                font-size: 1rem;
            }
        }

        @media (max-width: 600px) {
            h1 {
                font-size: 1.5rem;
            }

            .form-group {
                gap: 8px;
            }

            input, select, button {
                font-size: 12px;
                padding: 8px 12px;
            }

            th, td {
                padding: 10px;
            }

            td input[type="text"], td select {
                padding: 6px;
            }

            .footer a {
                font-size: 0.9rem;
            }

            .footer {
                justify-content: center;
                text-align: center;
            }

            .footer span {
                margin-top: 10px;
            }
        }
    </style>
</head>
<body>
    <h1><b>Weapon Dat Editor</b></h1>
    <div class="container">
        <div class="form-group">
            <input type="file" id="fileInput" accept=".dat">
            <select id="weaponSelect">
                <option value="" disabled selected><b>Select a Weapon</b></option>
            </select>
            <button id="saveButton" disabled><b>Save Changes</b></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">
            <b>Join Discord</b>
        </a>
        <span><b>KCS Community</b></span>
    </footer>

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

        let weaponData = [];
        let fileLines = [];
        let fileName = 'Weapon.dat';
        let currentWeaponIndex = null;

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

        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 || type === gunIdentifier) {
                        const weapon = { 
                            type: type === meleeIdentifier ? 'Melee' : 'Gun',
                            lineIndex,
                            identifier: values[0],
                            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] || "0",
                            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 weapon;
                    }
                }
                return null;
            }).filter(Boolean);
            populateWeaponSelect();
        }

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

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

        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' && key !== 'identifier') {
                    const row = document.createElement('tr');
                    const cellKey = document.createElement('td');
                    cellKey.innerHTML = `<b>${key.charAt(0).toUpperCase() + key.slice(1).replace(/([A-Z])/g, ' $1')}</b>`;
                    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.innerHTML = `<b>${type}</b>`;
                            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.innerHTML = `<b>${group}</b>`;
                            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.innerHTML = `<b>${combo}</b>`;
                            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 saveTemporaryChanges(index) {
            const rows = editor.querySelectorAll('tr');
            rows.forEach(row => {
                const cells = row.querySelectorAll('td');
                const key = cells[0].textContent.charAt(0).toLowerCase() + cells[0].textContent.slice(1).replace(/ /g, '');
                const input = cells[1].querySelector('input, select');
                if (input) {
                    weaponData[index][key] = input.value;
                }
            });
        }

        function saveChanges() {
            if (currentWeaponIndex !== null) {
                saveTemporaryChanges(currentWeaponIndex);
            }

            const updatedLines = fileLines.map((line, index) => {
                const weapon = weaponData.find(w => w.lineIndex === index);
                if (weapon) {
                    const values = line.split(/\s+/);
                    const updatedLine = [
                        values[0], weapon.weaponType, weapon.fireType, weapon.targetRange,
                        weapon.weaponRange, weapon.modelId1, weapon.modelId2, weapon.weaponSlot,
                        weapon.animGroup || values[8], weapon.clipAmmo || values[9], weapon.damage || values[10],
                        weapon.fireOffsetX || values[11], weapon.fireOffsetY || values[12], weapon.fireOffsetZ || values[13],
                        weapon.skillLevel || values[14], weapon.reqStatLevel || values[15],
                        weapon.accuracy || values[16], weapon.moveSpeed || values[17],
                        weapon.animLoop1Start || values[18], weapon.animLoop1End || values[19],
                        weapon.animLoop1Fire || values[20], weapon.animLoop2Start || values[21],
                        weapon.animLoop2End || values[22], weapon.animLoop2Fire || values[23],
                        weapon.breakoutTime || values[24], weapon.flags || values[25]
                    ];

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

                    return updatedLine.join(' ');
                }
                return line;
            });

            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>