#!/usr/bin/env python3
"""
Safely add mobile navigation to product pages.
Ensures each element appears exactly once.
"""

import re

mobile_css = """
    /* Mobile Navigation */
    .nav-hamburger {
      display: none;
      flex-direction: column;
      gap: 5px;
      background: none;
      border: none;
      cursor: pointer;
      padding: 8px;
    }
    .nav-hamburger span {
      display: block;
      width: 24px;
      height: 2px;
      background: white;
      border-radius: 2px;
      transition: all 0.3s;
    }
    .nav-hamburger.active span:nth-child(1) {
      transform: rotate(45deg) translate(5px, 5px);
    }
    .nav-hamburger.active span:nth-child(2) {
      opacity: 0;
    }
    .nav-hamburger.active span:nth-child(3) {
      transform: rotate(-45deg) translate(5px, -5px);
    }
    .nav-mobile {
      display: none;
      position: absolute;
      top: 60px;
      left: 0;
      right: 0;
      background: var(--primary);
      padding: 16px;
      box-shadow: 0 4px 8px rgba(0,0,0,0.2);
      z-index: 999;
    }
    .nav-mobile.active {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .nav-mobile .nav-link {
      padding: 12px 16px;
      border-radius: 8px;
    }
"""

hamburger_button = """      <button class="nav-hamburger" onclick="toggleMobileNav()" aria-label="Toggle menu">
        <span></span>
        <span></span>
        <span></span>
      </button>"""

mobile_nav_dropdown = """  <div class="nav-mobile" id="navMobile">
    <a href="index.html" class="nav-link">🚼 Strollers</a>
    <a href="diapers.html" class="nav-link">🧷 Diapers</a>
    <a href="formula.html" class="nav-link">🍼 Formula</a>
    <a href="wipes.html" class="nav-link">🧻 Wipes</a>
    <a href="bottles.html" class="nav-link">🍶 Bottles</a>
    <a href="breast-pumps.html" class="nav-link">🤱 Pumps</a>
    <a href="checklist.html" class="nav-link">✅ Checklist</a>
    <a href="blog/index.html" class="nav-link">📝 Blog</a>
  </div>"""

toggle_function = """
    function toggleMobileNav() {
      const nav = document.getElementById('navMobile');
      const hamburger = document.querySelector('.nav-hamburger');
      if (nav && hamburger) {
        nav.classList.toggle('active');
        hamburger.classList.toggle('active');
      }
    }
"""

files = ['formula.html', 'bottles.html', 'wipes.html', 'breast-pumps.html']

for filename in files:
    filepath = f'/root/clawd/stroller-app/{filename}'
    
    with open(filepath, 'r') as f:
        html = f.read()
    
    # 1. Add mobile CSS before @media query if not present
    if '.nav-hamburger' not in html:
        html = html.replace(
            '@media (max-width: 768px) {',
            mobile_css + '\n    @media (max-width: 768px) {'
        )
        print(f'  ✓ Added mobile CSS to {filename}')
    else:
        print(f'  - Mobile CSS already in {filename}')
    
    # 2. Update @media query to show hamburger, hide pickers
    if '.nav-hamburger { display: flex; }' not in html:
        html = re.sub(
            r'@media \(max-width: 768px\) \{\s*\.nav-links \{ display: none; \}',
            '''@media (max-width: 768px) {
      .nav-hamburger { display: flex; }
      .nav-pickers { display: none; }
      .nav-links { display: none; }''',
            html
        )
        print(f'  ✓ Updated media query in {filename}')
    else:
        print(f'  - Media query already updated in {filename}')
    
    # 3. Add hamburger button before </div></div></nav> (end of nav-container)
    # Find the nav structure and add hamburger if not present
    if 'nav-hamburger' not in html or html.count('nav-hamburger') == 1:  # Only in CSS
        # Pattern: find </select></div> (end of nav-pickers) followed by </div></nav>
        pattern = r'(</select>\s*</div>)(\s*</div>\s*</nav>)'
        if re.search(pattern, html):
            html = re.sub(
                pattern,
                r'\1' + hamburger_button + r'\2',
                html,
                count=1
            )
            print(f'  ✓ Added hamburger button to {filename}')
        else:
            print(f'  ! Could not find insertion point for hamburger in {filename}')
    else:
        print(f'  - Hamburger button already in {filename}')
    
    # 4. Add mobile nav dropdown after </nav> if not present
    if 'id="navMobile"' not in html:
        html = html.replace('</nav>', '</nav>\n' + mobile_nav_dropdown, 1)
        print(f'  ✓ Added mobile nav dropdown to {filename}')
    else:
        print(f'  - Mobile nav dropdown already in {filename}')
    
    # 5. Add toggle function if not present
    if 'function toggleMobileNav()' not in html:
        # Add before the first async function or before closing script tag
        html = html.replace('<script>', '<script>' + toggle_function, 1)
        print(f'  ✓ Added toggle function to {filename}')
    else:
        print(f'  - Toggle function already in {filename}')
    
    # 6. Verify counts
    hamburger_count = html.count('class="nav-hamburger"')
    navmobile_count = html.count('id="navMobile"')
    toggle_count = html.count('function toggleMobileNav()')
    
    print(f'  → Verification: {hamburger_count} hamburger, {navmobile_count} nav-mobile, {toggle_count} toggle')
    
    if hamburger_count == 1 and navmobile_count == 1 and toggle_count == 1:
        print(f'  ✅ {filename} - All elements appear exactly once!')
    else:
        print(f'  ⚠️  {filename} - Element count mismatch!')
    
    with open(filepath, 'w') as f:
        f.write(html)
    
    print()

print('✅ Mobile navigation added to all pages!')