import os
import re

def port_html():
    source_path = r"C:\Users\naman\OneDrive\Desktop\pragativeer-v2\pragativeer-celebration_1.html"
    dest_path = r"C:\Users\naman\OneDrive\Desktop\pragativeer-v2\public\streak-animation.html"
    
    with open(source_path, 'r', encoding='utf-8') as f:
        html = f.read()

    # 1. Inject CSS to make background transparent and hide stage layout
    hide_css = """
  body, html {
    background: #000000 !important;
    background-image: none !important;
  }
  body.sad {
    background: #000000 !important;
    background-image: none !important;
  }
  body::after {
    display: none !important;
  }
  .stage {
    height: 100vh !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    gap: 0 !important;
    justify-content: center !important;
  }
  .count, .panel, .hint {
    display: none !important;
  }
    """
    
    # Insert hide_css inside <style>
    style_tag = "</style>"
    html = html.replace(style_tag, hide_css + "\n</style>", 1)

    # 2. Replace parseTarget to read from URL search params
    parse_target_replacement = """
  const parseTarget=()=>{
    const params = new URLSearchParams(window.location.search);
    const s = params.get('streak');
    const v=parseFloat(s); 
    return isFinite(v)?v:0; 
  };
    """
    html = re.sub(r"const parseTarget=\(\)=>\{.*?\};", parse_target_replacement, html, flags=re.DOTALL)

    # 3. Replace the huge base64 logo image in .badge class with the local PragatiVeer SVG logo
    new_badge_css = """  .badge{
    position:absolute; inset:0; border-radius:50%;
    background: url('/PragatiVeer_Logo/SVG_Logos/Square_dark_background.svg') center/cover no-repeat !important;
  }"""
    html = re.sub(r"\.badge\s*\{[^}]*\}", new_badge_css, html, flags=re.DOTALL)

    # 4. Modify sad threshold and intensity scaling
    html = html.replace("const sad = target<5;", "const sad = target<=2;")
    html = html.replace("Math.max(target,5)/5", "Math.max(target,3)/3")
    html = html.replace("(4 - target) / 3", "(3 - target) / 3")
    
    # Inject theme initialization at start of script block
    init_theme_script = """<script>
  (function(){
    const p = new URLSearchParams(window.location.search);
    window.isLightTheme = p.get('theme') === 'light';
  })();
"""
    html = html.replace("<script>", init_theme_script, 1)

    # Make firecracker spark/confetti arrays dynamic based on theme
    spark_replacement = "const SPARK=window.isLightTheme?['#b91c1c','#c2410c','#1d4ed8','#15803d','#7e22ce','#0f172a']:['#f6dd93','#e8c463','#d4af37','#fff4cf','#ffffff','#8fb4ff'];"
    conf_replacement = "const CONF=window.isLightTheme?['#b91c1c','#c2410c','#1d4ed8','#15803d','#7e22ce','#0f172a','#b45309']:['#f6dd93','#e8c463','#d4af37','#ffffff','#ffd34d'];"
    html = re.sub(r"const SPARK\s*=\s*\[[^\]]*\];", spark_replacement, html)
    html = re.sub(r"const CONF\s*=\s*\[[^\]]*\];", conf_replacement, html)

    # Make canvas particle trail fade colors dynamic
    html = html.replace("'rgba(8,18,38,0.22)'", "(window.isLightTheme ? 'rgba(255,255,255,0.22)' : 'rgba(0,0,0,0.22)')")
    html = html.replace("'rgba(10,16,23,0.3)'", "(window.isLightTheme ? 'rgba(255,255,255,0.3)' : 'rgba(0,0,0,0.3)')")
    html = html.replace("rgba(8,18,38,0.22)", "(window.isLightTheme ? 'rgba(255,255,255,0.22)' : 'rgba(0,0,0,0.22)')")
    html = html.replace("rgba(10,16,23,0.3)", "(window.isLightTheme ? 'rgba(255,255,255,0.3)' : 'rgba(0,0,0,0.3)')")
    
    # Make sad face outline and eye colors dynamic
    html = html.replace("stroke='rgba(182,200,228,0.92)'", "stroke=(window.isLightTheme ? 'rgba(40,60,90,0.92)' : 'rgba(182,200,228,0.92)')")
    html = html.replace("ctx.fillStyle='rgba(150,175,210,0.13)'", "ctx.fillStyle=(window.isLightTheme ? 'rgba(40,60,90,0.15)' : 'rgba(150,175,210,0.13)')")
    html = html.replace("ctx.fillStyle='rgba(205,218,238,0.95)'", "ctx.fillStyle=(window.isLightTheme ? 'rgba(40,60,90,0.95)' : 'rgba(205,218,238,0.95)')")
    html = html.replace("ctx.fillStyle='rgba(150,205,244,0.92)'", "ctx.fillStyle=(window.isLightTheme ? 'rgba(30,144,255,0.92)' : 'rgba(150,205,244,0.92)')")
    
    # Replace blue root CSS variables
    html = html.replace("#081226", "#000000")
    html = html.replace("#0c1c39", "#000000")
    html = html.replace("#13294d", "#000000")
    html = html.replace("#16305c", "#000000")
    html = html.replace("#22303f", "#000000")
    html = html.replace("#131c26", "#000000")
    html = html.replace("#0a1017", "#000000")
    html = html.replace("rgba(130,160,200,.30)", "rgba(100,100,100,.30)")
    html = html.replace("rgba(96,124,164,.14)", "rgba(80,80,80,.14)")

    # 5. Adjust badge size from 230px to 240px
    html = html.replace("--badge:230px;", "--badge:240px;")

    light_theme_script = """
<script>
  (function(){
    setInterval(() => {
      const p = new URLSearchParams(window.location.search);
      window.isLightTheme = p.get('theme') === 'light';
      const isLight = window.isLightTheme;

      if (isLight) {
        document.body.style.setProperty('background', '#ffffff', 'important');
        document.documentElement.style.setProperty('background', '#ffffff', 'important');
        const b = document.querySelector('.badge');
        if (b) b.style.setProperty('background', "url('/PragatiVeer_Logo/SVG_Logos/Square_light_background.svg') center/cover no-repeat", 'important');
        if (typeof fadeCol !== 'undefined') {
          fadeCol = 'rgba(255,255,255,0.22)';
        }
        window.sadFaceStroke = 'rgba(40,60,90,0.92)';
        window.sadFaceFill = 'rgba(40,60,90,0.15)';
        window.sadFaceEyes = 'rgba(40,60,90,0.95)';
        window.sadFaceTears = 'rgba(30,144,255,0.92)';
      } else {
        document.body.style.setProperty('background', '#000000', 'important');
        document.documentElement.style.setProperty('background', '#000000', 'important');
        const b = document.querySelector('.badge');
        if (b) b.style.setProperty('background', "url('/PragatiVeer_Logo/SVG_Logos/Square_dark_background.svg') center/cover no-repeat", 'important');
        if (typeof fadeCol !== 'undefined') {
          fadeCol = 'rgba(0,0,0,0.22)';
        }
        window.sadFaceStroke = 'rgba(182,200,228,0.92)';
        window.sadFaceFill = 'rgba(150,175,210,0.13)';
        window.sadFaceEyes = 'rgba(205,218,238,0.95)';
        window.sadFaceTears = 'rgba(150,205,244,0.92)';
      }
    }, 100);
  })();
</script>
    """
    html += light_theme_script

    with open(dest_path, 'w', encoding='utf-8') as f:
        f.write(html)
    print("Ported successfully to public/streak-animation.html")

if __name__ == "__main__":
    port_html()