<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Handling Cfg Editor</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: 2rem;
            color: #ffffff;
            font-weight: bold;
        }

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

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

        input, select, button {
            padding: 14px;
            border: none;
            border-radius: 8px;
            font-size: 16px;
            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: 10px;
            background-color: #2e2e2e;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
            display: block;
            box-sizing: border-box;
            font-weight: bold;
        }

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

        th, td {
            border: 1px solid #555;
            padding: 10px;
            text-align: left;
            font-weight: bold;
            word-wrap: break-word;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        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: 12px;
            font-weight: bold;
            word-wrap: break-word;
        }

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

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

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

        @media (max-width: 1200px) {
            th, td {
                padding: 8px;
            }

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

        @media (max-width: 992px) {
            th, td {
                padding: 6px;
            }

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

            h1 {
                font-size: 1.75rem;
            }
        }

        @media (max-width: 768px) {
            th, td {
                padding: 4px;
            }

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

            h1 {
                font-size: 1.5rem;
            }
        }

        @media (max-width: 600px) {
            th, td {
                padding: 2px;
            }

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

            h1 {
                font-size: 1.25rem;
            }
        }
    </style>
</head>
<body>
    <h1>Handling Cfg Editor</h1>
    <div class="container">
        <div class="form-group">
            <input type="file" id="fileInput" accept=".cfg">
            <select id="vehicleSelect">
                <option value="" disabled selected>Select a Vehicle</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 Our Discord Community
        </a>
    </footer>
    <script>
        const fileInput = document.getElementById('fileInput');
        const vehicleSelect = document.getElementById('vehicleSelect');
        const saveButton = document.getElementById('saveButton');
        const editor = document.getElementById('editor');

        let handlingData = [];
        let originalContent = '';
        let currentVehicleIndex = null;
        const editedVehicles = new Set();
        const vehicleIdentifiers = [];

        fileInput.addEventListener('change', handleFileUpload);
        vehicleSelect.addEventListener('change', handleVehicleSelect);
        saveButton.addEventListener('click', saveChanges);

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

        function parseHandlingData(content) {
            const lines = content.split('\n');
            handlingData = lines.map((line, lineIndex) => {
                const values = line.split(/\s+/);
                const vehicleIdentifier = values[0];
                vehicleIdentifiers[lineIndex] = vehicleIdentifier;
                return { lineIndex, rawData: line, data: values };
            }).filter(vehicle => vehicle.data.length > 1);
            populateVehicleSelect();
        }

        function populateVehicleSelect() {
            vehicleSelect.innerHTML = '<option value="" disabled selected>Select Vehicle</option>';
            handlingData.forEach((vehicle, index) => {
                if (/^[A-Za-z]+$/.test(vehicle.data[0])) {
                    const option = document.createElement('option');
                    option.value = index;
                    option.innerHTML = vehicle.data[0];
                    vehicleSelect.appendChild(option);
                }
            });
        }

        function handleVehicleSelect(event) {
            if (currentVehicleIndex !== null) {
                saveTemporaryChanges(currentVehicleIndex);
            }
            currentVehicleIndex = event.target.value;
            if (currentVehicleIndex !== "") {
                editor.style.display = 'block';
                renderEditor(handlingData[currentVehicleIndex], currentVehicleIndex);
                editedVehicles.add(parseInt(currentVehicleIndex));
            }
        }

        function renderEditor(vehicle, index) {
            editor.innerHTML = '';
            const table = document.createElement('table');
            const tbody = document.createElement('tbody');
            const headers = [
                "Vehicle Identifier", "Weight", "Turn Mass", "Drag Multiplier", "Center of Mass X", "Center of Mass Y", "Center of Mass Z", 
                "Percent Submerged", "Traction Multiplier", "Traction Loss", "Traction Bias", "Number of Gears", "Max Speed", 
                "Engine Acceleration", "Engine Inertia", "Drive Type", "Engine Type", "Brake Deceleration", "Brake Bias", "ABS", 
                "Steering Lock", "Suspension Force Level", "Suspension Damping Level", "Suspension High Speed Damping", 
                "Suspension Upper Limit", "Suspension Lower Limit", "Suspension Bias", "Suspension Anti-dive Multiplier", 
                "Seat Offset", "Collision Damage Multiplier", "Monetary Value", "Model Flags", "Handling Flags", 
                "Front Lights", "Rear Lights", "Animation Group"
            ];

            headers.forEach((header, i) => {
                const row = document.createElement('tr');
                const cellKey = document.createElement('td');
                cellKey.textContent = header;
                row.appendChild(cellKey);

                const cellValue = document.createElement('td');
                const input = document.createElement('input');
                input.type = 'text';
                input.value = vehicle.data[i] || '';
                input.dataset.rowIndex = index;
                input.dataset.cellIndex = i;
                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 cellIndex = input.dataset.cellIndex;
            handlingData[rowIndex].data[cellIndex] = input.value;
            editedVehicles.add(parseInt(rowIndex));
        }

        function saveTemporaryChanges(index) {
            const rows = editor.querySelectorAll('tr');
            rows.forEach((row, rowIndex) => {
                if (rowIndex > 0) {
                    const cells = row.querySelectorAll('td');
                    const input = cells[1].querySelector('input');
                    if (input) {
                        handlingData[index].data[rowIndex - 1] = input.value;
                    }
                }
            });
        }

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

            const updatedLines = originalContent.split('\n');
            handlingData.forEach(vehicle => {
                if (editedVehicles.has(vehicle.lineIndex)) {
                    const updatedData = vehicle.data.slice(1).join(' ');
                    const vehicleIdentifier = vehicleIdentifiers[vehicle.lineIndex];
                    updatedLines[vehicle.lineIndex] = `${vehicleIdentifier} ${vehicle.data.join(' ')}`;
                }
            });

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