import re

# 1. Edit devialet-dione-opera-de-paris.html to add tg-shine CSS style rules
article_path = '/root/workspaces/telegram_pro_import/articles/devialet-dione-opera-de-paris.html'
article = open(article_path, 'r', encoding='utf-8').read()

tg_shine_css = """
        /* tg-shine — glow + sweep on Telegram buttons */
        @keyframes tg-glow {
          0%, 100% { box-shadow: 0 4px 16px rgba(36,161,222,0.30); }
          50%       { box-shadow: 0 4px 28px rgba(36,161,222,0.60), 0 0 0 4px rgba(36,161,222,0.12); }
        }
        @keyframes tg-sweep {
          0%   { left: -80%; }
          40%  { left: 130%; }
          100% { left: 130%; }
        }
        .tg-shine {
          position: relative;
          overflow: hidden;
          animation: tg-glow 2.4s ease-in-out infinite;
        }
        .tg-shine::after {
          content: '';
          position: absolute;
          top: 0; left: -80%;
          width: 50%; height: 100%;
          background: linear-gradient(90deg, transparent, rgba(255,255,255,0.22), transparent);
          animation: tg-sweep 3.6s ease-in-out infinite;
        }
"""

# Let's insert tg_shine_css inside the <style> tag
if ".tg-shine" not in article:
    article = article.replace("body {", tg_shine_css + "\n        body {")

with open(article_path, 'w', encoding='utf-8') as f:
    f.write(article)
print("Added tg-shine CSS to soundbar page.")

# 2. Update HTML Designer skill to mandate the CSS definitions
skill_html_path = '/root/workspaces/telegram_pro_import/.agent/skills/wordpress-html-designer/SKILL.md'
skill_html = open(skill_html_path, 'r', encoding='utf-8').read()

tg_shine_rules = """
### Анимация переливания (tg-shine)
Для работы эффекта перелива на кнопках Telegram ОБЯЗАТЕЛЬНО добавьте в блок `<style>` следующую CSS-анимацию:

```css
@keyframes tg-glow {
  0%, 100% { box-shadow: 0 4px 16px rgba(36,161,222,0.30); }
  50%       { box-shadow: 0 4px 28px rgba(36,161,222,0.60), 0 0 0 4px rgba(36,161,222,0.12); }
}
@keyframes tg-sweep {
  0%   { left: -80%; }
  40%  { left: 130%; }
  100% { left: 130%; }
}
.tg-shine {
  position: relative;
  overflow: hidden;
  animation: tg-glow 2.4s ease-in-out infinite;
}
.tg-shine::after {
  content: '';
  position: absolute;
  top: 0; left: -80%;
  width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.22), transparent);
  animation: tg-sweep 3.6s ease-in-out infinite;
}
```
"""
if "### Анимация переливания" not in skill_html:
    # Append it to the style guides or rules section
    skill_html = skill_html.replace("### CSS (добавить в `<style>` после nav-стилей)", "### CSS (добавить в `<style>` после nav-стилей)\n" + tg_shine_rules)

with open(skill_html_path, 'w', encoding='utf-8') as f:
    f.write(skill_html)
print("Updated HTML Designer skill with tg-shine CSS guidelines.")