#!/usr/bin/env python3
"""
Add missing data-i18n attributes to all product page HTML elements,
and clear hardcoded tips so ProductI18n.renderTips() can populate them.
"""
import re

pages = {
    'formula.html': {
        'calc_title': 'calculator.title',
        'calc_subtitle': 'calculator.subtitle',
        'tips_title': 'tips.title',
    },
    'bottles.html': {
        'calc_title': 'calculator.title',
        'tips_title': 'tips.title',
    },
    'wipes.html': {
        'calc_title': 'calculator.title',
        'tips_title': 'tips.title',
    },
    'breast-pumps.html': {
        'calc_title': 'calculator.title',
        'tips_title': 'tips.title',
    },
    'baby-monitors.html': {
        'calc_title': 'calculator.title',
        'calc_subtitle': 'calculator.subtitle',
        'tips_title': 'tips.title',
    },
}

for filename, keys in pages.items():
    path = f'/root/clawd/stroller-app/{filename}'
    try:
        html = open(path).read()
    except FileNotFoundError:
        print(f'⚠️  {filename} not found')
        continue

    original = html

    # 1. Add data-i18n to calculator section title (h2 inside calculator-section)
    # Pattern: <h2 class="section-title">💰 <span>Some text</span></h2>
    # or       <h2 class="section-title">💰 Some text</h2>
    # Add data-i18n to the span if present, or wrap text in span
    if 'calc_title' in keys and 'data-i18n="calculator.title"' not in html:
        # Match the calculator section h2 - it has 💰 emoji
        html = re.sub(
            r'(<h2 class="section-title">\s*💰\s*)<span(?![^>]*data-i18n)([^>]*)>([^<]*)</span>',
            rf'\1<span\2 data-i18n="{keys["calc_title"]}">\3</span>',
            html
        )
        # If no span, add one around text after emoji
        html = re.sub(
            r'(<h2 class="section-title">\s*💰\s*)([^<\n]+)(</h2>)',
            rf'\1<span data-i18n="{keys["calc_title"]}">\2</span>\3',
            html
        )
        print(f'  + calculator.title to {filename}')

    # 2. Add data-i18n to calculator subtitle (p.section-subtitle) 
    if 'calc_subtitle' in keys and 'data-i18n="calculator.subtitle"' not in html:
        html = re.sub(
            r'(<p class="section-subtitle")(?![^>]*data-i18n)([^>]*>)',
            rf'\1 data-i18n="{keys["calc_subtitle"]}"\2',
            html,
            count=1  # Only first match (calc section)
        )
        print(f'  + calculator.subtitle to {filename}')

    # 3. Add data-i18n to tips section title
    if 'tips_title' in keys and 'data-i18n="tips.title"' not in html:
        # Match the tips h2 - it has 💡 emoji
        html = re.sub(
            r'(<h2 class="section-title">\s*💡\s*)<span(?![^>]*data-i18n)([^>]*)>([^<]*)</span>',
            r'\1<span\2 data-i18n="tips.title">\3</span>',
            html
        )
        html = re.sub(
            r'(<h2 class="section-title">\s*💡\s*)([^<\n]+)(</h2>)',
            r'\1<span data-i18n="tips.title">\2</span>\3',
            html
        )
        print(f'  + tips.title to {filename}')

    # 4. Clear hardcoded tip-card elements from tips-grid so renderTips() populates it
    # Keep the div.tips-grid but empty its children
    html = re.sub(
        r'(<div class="tips-grid">)\s*(<div class="tip-card">.*?</div>\s*)+\s*(</div>)',
        r'\1\n        <!-- Tips rendered dynamically by ProductI18n.renderTips() -->\n      \3',
        html,
        flags=re.DOTALL
    )

    if html != original:
        open(path, 'w').write(html)
        print(f'✓ Updated {filename}')
    else:
        print(f'- No changes in {filename}')

print('\n✅ Done adding i18n hooks')