<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pedstats Dat 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>Pedstats Dat Editor</h1>
    <div class="container">
        <div class="form-group">
            <input type="file" id="fileInput" accept=".dat">
            <select id="pedstatSelect">
                <option value="" disabled selected>Select a Pedstat</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 pedstatSelect = document.getElementById('pedstatSelect');
        const saveButton = document.getElementById('saveButton');
        const editor = document.getElementById('editor');
    
        let pedstatsData = [];
        let originalContent = '';
        let currentPedstatIndex = null;
        const pedstatIdentifiers = [];
    
        fileInput.addEventListener('change', handleFileUpload);
        pedstatSelect.addEventListener('change', handlePedstatSelect);
        saveButton.addEventListener('click', saveChanges);
    
        function handleFileUpload(event) {
            const file = event.target.files[0];
            if (file && file.name.toLowerCase() === 'pedstats.dat') {
                const reader = new FileReader();
                reader.onload = e => {
                    originalContent = e.target.result;
                    parsePedstatsData(originalContent);
                    pedstatSelect.style.display = 'block';
                    saveButton.style.display = 'block';
                    saveButton.disabled = false;
                };
                reader.readAsText(file);
            } else {
                alert('Please upload a valid pedstats.dat file.');
            }
        }
    
        function parsePedstatsData(content) {
            const lines = content.split('\n');
            pedstatsData = lines.map((line, lineIndex) => {
                const values = line.trim().split(/\s+/);
                if (values.length > 1 && !line.startsWith('#')) {
                    const pedstatIdentifier = values[0];
                    pedstatIdentifiers[lineIndex] = pedstatIdentifier;
                    return { lineIndex, rawData: line, identifier: pedstatIdentifier, data: values.slice(1) };
                }
                return null;
            }).filter(pedstat => pedstat !== null);
            populatePedstatSelect();
        }
    
        function populatePedstatSelect() {
            pedstatSelect.innerHTML = '<option value="" disabled selected>Select a Pedstat</option>';
            pedstatsData.forEach((pedstat, index) => {
                if (/^[A-Za-z_]+$/.test(pedstat.identifier)) {
                    const option = document.createElement('option');
                    option.value = index;
                    option.textContent = pedstat.identifier;
                    pedstatSelect.appendChild(option);
                }
            });
        }
    
        function handlePedstatSelect(event) {
            if (currentPedstatIndex !== null) {
                saveTemporaryChanges(currentPedstatIndex);
            }
            currentPedstatIndex = event.target.value;
            if (currentPedstatIndex !== "") {
                editor.style.display = 'block';
                renderPedstatEditor(pedstatsData[currentPedstatIndex], currentPedstatIndex);
            }
        }
    
        function renderPedstatEditor(pedstat, index) {
            editor.innerHTML = '';
            const table = document.createElement('table');
            const tbody = document.createElement('tbody');
            const headers = [
                "Type Name", "Flee Distance", "Heading Change Rate", "Fear Level", "Temper", "Lawfulness",
                "Sexiness", "Attack Strength", "Defend Weakness", "Shooting Rate", "Decision Maker"
            ];
    
            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 = pedstat.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;
            pedstatsData[rowIndex].data[cellIndex] = input.value || "";
            const updatedData = pedstatsData[rowIndex].data.map(value => value !== undefined ? value : "").join(' ');
            pedstatsData[rowIndex].rawData = `${pedstatsData[rowIndex].identifier} ${updatedData}`;
        }
    
        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) {
                        pedstatsData[index].data[rowIndex - 1] = input.value || "";
                    }
                }
            });
        }
    
        function saveChanges() {
            if (currentPedstatIndex !== null) {
                saveTemporaryChanges(currentPedstatIndex);
            }
    
            const updatedLines = originalContent.split('\n').map((line, index) => {
                const pedstat = pedstatsData.find(p => p.lineIndex === index);
                if (pedstat) {
                    return pedstat.rawData;
                }
                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 = 'pedstats.dat';
            a.click();
            URL.revokeObjectURL(url);
        }
    </script>
</body>
</html>