import re
import glob

# 1. Replace the flipping book HTML in all files
old_flip = '''<div id="bible-flip-container">
            <div class="bible-book">
                <div class="bible-page-anim"></div>
                <div class="bible-page-anim"></div>
                <div class="bible-page-anim"></div>
                <div class="bible-page-anim"></div>
            </div>
            <div id="bible-flip-hint">Click anywhere to stop</div>
        </div>'''

new_flip = '''<div id="bible-flip-container">
            <dotlottie-wc src="https://lottie.host/7b2916b3-0215-48d7-9027-9b00d77f098b/QkgT0kRT6F.json" style="width: 500px; height: 500px; filter: drop-shadow(0 0 30px rgba(230,200,136,0.6));" autoplay loop speed="2"></dotlottie-wc>
            <div id="bible-flip-hint">Click anywhere to stop</div>
        </div>'''

for filepath in glob.glob('*.html'):
    with open(filepath, 'r', encoding='utf-8') as f:
        content = f.read()
    
    # We can also do a regex replace if spacing is weird
    content = re.sub(r'<div id="bible-flip-container">.*?</div>\s*</div>', new_flip, content, flags=re.DOTALL)
    
    with open(filepath, 'w', encoding='utf-8') as f:
        f.write(content)

# 2. Make sure close button is absolutely positioned to the top right of the screen
with open('css/bible-widget.css', 'r', encoding='utf-8') as f:
    css = f.read()

# Just strictly force the close button CSS to ensure it's not relative to anything else
fix_close_css = '''#bible-modal-close {
    position: absolute !important;
    top: 40px !important;
    right: 40px !important;
    left: auto !important;
    width: 60px !important;
    height: 60px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border: 2px solid rgba(255, 255, 255, 0.5) !important;
    border-radius: 50% !important;
    color: #ffffff !important;
    font-size: 3rem !important;
    cursor: pointer !important;
    z-index: 999999 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
}

#bible-modal-close:hover {
    transform: rotate(90deg) scale(1.1) !important;
    background: #e6c888 !important;
    color: #4a2a18 !important;
    border-color: #e6c888 !important;
}'''

css = re.sub(r'#bible-modal-close\s*\{[^}]*\}', '', css, flags=re.DOTALL)
css = re.sub(r'#bible-modal-close:hover\s*\{[^}]*\}', '', css, flags=re.DOTALL)

css += '\n' + fix_close_css

with open('css/bible-widget.css', 'w', encoding='utf-8') as f:
    f.write(css)

print("Updated flip animation and close button CSS")