const fs = require('fs');
const path = require('path');

function replaceInFile(filePath) {
    let content = fs.readFileSync(filePath, 'utf8');
    
    // In UserTutorial.vue
    if (filePath.includes('UserTutorial.vue')) {
        content = content.replace(/text-zinc-100/g, 'text-text-primary');
        content = content.replace(/text-zinc-500/g, 'text-text-secondary');
        content = content.replace(/text-blue-400/g, 'text-primary');
        content = content.replace(/bg-blue-500\/10/g, 'bg-primary\/10');
        content = content.replace(/text-emerald-400/g, 'text-success');
        content = content.replace(/bg-emerald-500\/10/g, 'bg-success\/10');
        content = content.replace(/text-purple-400/g, 'text-[#a855f7]'); // Use exact hex or leave it, maybe text-purple-500
        content = content.replace(/bg-purple-500\/10/g, 'bg-[#a855f7]\/10');
        content = content.replace(/rgba\(0,\s*0,\s*0,\s*0\.4\)/g, 'var(--bg-secondary, rgba(0, 0, 0, 0.4))');
        content = content.replace(/rgba\(255,\s*255,\s*255,\s*0\.05\)/g, 'var(--border-secondary, rgba(255, 255, 255, 0.05))');
        content = content.replace(/rgba\(255,\s*255,\s*255,\s*0\.02\)/g, 'var(--bg-tertiary, rgba(255, 255, 255, 0.02))');
        content = content.replace(/rgba\(255,\s*255,\s*255,\s*0\.04\)/g, 'var(--bg-hover, rgba(255, 255, 255, 0.04))');
        content = content.replace(/rgba\(255,\s*255,\s*255,\s*0\.1\)/g, 'var(--border-tertiary, rgba(255, 255, 255, 0.1))');
        content = content.replace(/rgba\(255,\s*255,\s*255,\s*0\.9\)/g, 'var(--text-primary, rgba(255, 255, 255, 0.9))');
        content = content.replace(/rgba\(255,\s*255,\s*255,\s*0\.5\)/g, 'var(--text-secondary, rgba(255, 255, 255, 0.5))');
        
        // Fix `.tour-popover` which has hardcoded text colors in p tags
        content = content.replace(/color:\s*#f4f4f5;/g, 'color: var(--text-primary);');
        content = content.replace(/color:\s*#a1a1aa;/g, 'color: var(--text-secondary);');
        content = content.replace(/color:\s*#71717a;/g, 'color: var(--text-tertiary);');
        content = content.replace(/color:\s*#d4d4d8;/g, 'color: var(--text-primary);');
        content = content.replace(/color:\s*white;/g, 'color: var(--btn-primary-text);');
    }

    // In ScheduleList.vue
    if (filePath.includes('ScheduleList.vue')) {
        content = content.replace(/class="text-sm text-gray"/g, 'class="text-sm text-text-secondary"');
        content = content.replace(/background: linear-gradient\(135deg, rgba\(11, 90, 254, 0\.1\) 0%, rgba\(33, 36, 45, 0\.9\) 100%\);/g, 'background: var(--bg-secondary);');
        content = content.replace(/border: 1px solid rgba\(11, 90, 254, 0\.2\);/g, 'border: 1px solid var(--border-secondary);');
        content = content.replace(/background: linear-gradient\(135deg, rgba\(255, 255, 255, 0\.15\) 0%, rgba\(255, 255, 255, 0\.08\) 100%\);/g, 'background: var(--bg-tertiary);');
        content = content.replace(/border: 1px solid rgba\(255, 255, 255, 0\.25\);/g, 'border: 1px solid var(--border-tertiary);');
        content = content.replace(/color: var\(--text-primary, #ffffff\);/g, 'color: var(--text-primary);');
        // schedule-content empty state
        // The .empty rule in ScheduleList.vue:
        content = content.replace(/\.empty \{[\s\S]*?\}/g, (match) => {
            return match.replace(/color:\s*rgba\(255, 255, 255, 0.5\);/, 'color: var(--text-secondary);')
                        .replace(/color:\s*#a0a0a0;/, 'color: var(--text-secondary);');
        });
        content = content.replace(/\.empty-dates \{[\s\S]*?\}/g, (match) => {
            return match.replace(/color:\s*rgba\(255, 255, 255, 0.5\);/, 'color: var(--text-secondary);');
        });
    }

    // In RequestForm.vue
    if (filePath.includes('RequestForm.vue')) {
        // search-results-container
        content = content.replace(/background:\s*rgba\(255, 255, 255, 0.02\);/g, 'background: var(--bg-secondary);');
        content = content.replace(/border:\s*1px solid rgba\(255, 255, 255, 0.05\);/g, 'border: 1px solid var(--border-secondary);');
        content = content.replace(/background:\s*rgba\(255, 255, 255, 0.05\);/g, 'background: var(--bg-tertiary);');
        content = content.replace(/color:\s*rgba\(255, 255, 255, 0.9\);/g, 'color: var(--text-primary);');
        content = content.replace(/color:\s*rgba\(255, 255, 255, 0.6\);/g, 'color: var(--text-secondary);');
        content = content.replace(/color:\s*rgba\(255, 255, 255, 0.5\);/g, 'color: var(--text-tertiary);');
        content = content.replace(/color:\s*rgba\(255, 255, 255, 0.3\);/g, 'color: var(--text-disabled);');
        content = content.replace(/border:\s*1px solid rgba\(255, 255, 255, 0.08\);/g, 'border: 1px solid var(--border-tertiary);');
        content = content.replace(/border:\s*1px solid rgba\(255, 255, 255, 0.12\);/g, 'border: 1px solid var(--border-primary);');
        content = content.replace(/background:\s*rgba\(0, 0, 0, 0.2\);/g, 'background: var(--bg-primary);');
        
        // submission-status-badge
        content = content.replace(/\.submission-status-badge\.open \{[\s\S]*?\}/g, (match) => {
            return match.replace(/background:\s*rgba\(16, 185, 129, 0.1\);/g, 'background: var(--success-light);')
                        .replace(/border:\s*1px solid rgba\(16, 185, 129, 0.2\);/g, 'border: 1px solid var(--success-border);')
                        .replace(/color:\s*#34d399;/g, 'color: var(--success);');
        });
        content = content.replace(/\.submission-status-badge\.closed \{[\s\S]*?\}/g, (match) => {
            return match.replace(/background:\s*rgba\(239, 68, 68, 0.1\);/g, 'background: var(--error-light);')
                        .replace(/border:\s*1px solid rgba\(239, 68, 68, 0.2\);/g, 'border: 1px solid var(--error-border);')
                        .replace(/color:\s*#f87171;/g, 'color: var(--error);');
        });
        content = content.replace(/\.badge-title \{[\s\S]*?\}/g, (match) => {
            return match.replace(/color:\s*rgba\(255, 255, 255, 0.9\);/, 'color: var(--text-primary);');
        });

        // Rules Section
        content = content.replace(/\.rules-section \{[\s\S]*?\}/g, (match) => {
            return match.replace(/background:\s*rgba\(255, 255, 255, 0.02\);/, 'background: var(--bg-secondary);')
                        .replace(/border:\s*1px solid rgba\(255, 255, 255, 0.05\);/, 'border: 1px solid var(--border-secondary);');
        });
        content = content.replace(/\.section-title \{[\s\S]*?\}/g, (match) => {
            return match.replace(/color:\s*rgba\(255, 255, 255, 0.9\);/, 'color: var(--text-primary);');
        });
        content = content.replace(/\.guidelines-content \{[\s\S]*?\}/g, (match) => {
            return match.replace(/color:\s*rgba\(255, 255, 255, 0.6\);/, 'color: var(--text-secondary);')
                        .replace(/background:\s*rgba\(255, 255, 255, 0.02\);/, 'background: var(--bg-tertiary);')
                        .replace(/border:\s*1px solid rgba\(255, 255, 255, 0.05\);/, 'border: 1px solid var(--border-tertiary);');
        });
    }

    fs.writeFileSync(filePath, content, 'utf8');
    console.log(`Processed ${filePath}`);
}

replaceInFile('app/components/UserTutorial.vue');
replaceInFile('app/components/Songs/ScheduleList.vue');
replaceInFile('app/components/Songs/RequestForm.vue');