const fs = require('fs');
let html = fs.readFileSync('public/index.html', 'utf8');

const generateRow = (id, icon, name) => `
            <div class="provider-row" id="row-${id}">
                <div class="provider-main">
                    <div class="provider-info">
                        <span class="provider-icon">${icon}</span>
                        <span class="provider-name">${name}</span>
                    </div>
                    <div class="progress-container">
                        <div class="progress-bar">
                            <div class="progress-fill" id="fill-${id}"></div>
                        </div>
                    </div>
                    <div class="provider-stats">
                        <span class="percentage" id="percentage-${id}">0%</span>
                        <span class="raw-value" id="status-${id}">Loading...</span>
                    </div>
                </div>
                <div class="provider-details" id="details-${id}"></div>
            </div>`;

const newSection = `<section class="dashboard-list">
${generateRow('poe', '🧠', 'POE')}
${generateRow('ag-gemini-5h', '🤖', 'AG Gemini (5h)')}
${generateRow('ag-gemini-weekly', '🤖', 'AG Gemini (Weekly)')}
${generateRow('ag-claude-5h', '⚡', 'AG Claude (5h)')}
${generateRow('ag-claude-weekly', '⚡', 'AG Claude (Weekly)')}
${generateRow('minimax-5h', '🔥', 'MiniMax (5h)')}
${generateRow('minimax-weekly', '🔥', 'MiniMax (Weekly)')}
        </section>`;

html = html.replace(/<section class="dashboard-list">[\s\S]*?<\/section>/, newSection);
fs.writeFileSync('public/index.html', html);
console.log('updated index.html');