# Updating staff_panel.html to add Announcement UI, and updating final.html to display announcement banner.
from pathlib import Path
import re

base = Path("/mnt/data/pulsebot_store_extracted")
login_path = base / "staff_login.html"
panel_path = base / "staff_panel.html"
final_path = base / "final.html"

if not panel_path.exists() or not final_path.exists():
    raise FileNotFoundError("Required files not found. Ensure staff_panel.html and final.html exist.")

panel_html = panel_path.read_text(encoding="utf-8")
final_html = final_path.read_text(encoding="utf-8")

# Add Announcement UI to the sidebar in staff_panel.html (insert before closing of the aside's card section)
announce_ui = """
<hr style="margin:14px 0;border:none;border-top:1px solid rgba(255,255,255,0.03)">
<h4 style="color:white">Announcements</h4>
<label class="small">Title</label>
<input id="announceTitle" class="field" placeholder="Announcement title" />
<label class="small">Message</label>
<input id="announceMessage" class="field" placeholder="Short message to display" />
<label class="small">Banner type</label>
<select id="announceType" class="field">
  <option value="info">Info</option>
  <option value="success">Success</option>
  <option value="warn">Warning</option>
</select>
<label class="small">Show on site?</label>
<div style="display:flex;gap:8px;margin-top:8px">
  <button id="publishAnn" style="flex:1">Publish</button>
  <button id="unpublishAnn" style="flex:1;background:#ff6b6b">Unpublish</button>
</div>
<p class="small" style="margin-top:8px">Published announcements are stored in browser localStorage and displayed on the public site (client-side).</p>
"""

# Insert the UI into the first aside card area (we'll find the inviteInput block and insert after it)
if "Announcements" not in panel_html:
    # Find location: after the inviteInput block in the aside card
    insert_after = 'input id="inviteInput" class="field" value="https://discord.gg/YBs9cE2cas" />'
    if insert_after in panel_html:
        panel_html = panel_html.replace(insert_after, insert_after + announce_ui)
    else:
        # fallback: append to end of first aside card before its closing div (search for "<div class=\"card\">" in aside)
        parts = panel_html.split('<aside>')
        if len(parts) > 1:
            before_aside = parts[0]
            aside_and_rest = '<aside>' + parts[1]
            # insert before the next </div> that closes the first card in aside
            aside_html = aside_and_rest
            # simple heuristic: find the first occurrence of '</div>' after '<aside>' and insert before the next '</div>' that likely closes the card
            idx = aside_html.find('</div>')
            if idx != -1:
                # insert after that closing div
                insert_pos = idx + len('</div>')
                aside_html = aside_html[:insert_pos] + announce_ui + aside_html[insert_pos:]
                panel_html = before_aside + aside_html
    panel_path.write_text(panel_html, encoding="utf-8")
    print("Inserted announcement UI into staff_panel.html")
else:
    print("Announcement UI already present in staff_panel.html")

# Add JS handlers to staff_panel.html for publish/unpublish, storing announcement in localStorage
if "pulsebot_announcement" not in panel_html:
    js_snippet = """
<script>
// Announcement publish/unpublish handlers
function getAnnouncementFromFields() {
  return {
    title: document.getElementById('announceTitle').value.trim(),
    message: document.getElementById('announceMessage').value.trim(),
    type: document.getElementById('announceType').value,
    publishedAt: new Date().toISOString()
  };
}

document.getElementById('publishAnn').addEventListener('click', () => {
  const ann = getAnnouncementFromFields();
  if (!ann.title && !ann.message) {
    alert('Please provide a title or message for the announcement.');
    return;
  }
  localStorage.setItem('pulsebot_announcement', JSON.stringify(ann));
  showMessage('Announcement published to site.');
});

document.getElementById('unpublishAnn').addEventListener('click', () => {
  localStorage.removeItem('pulsebot_announcement');
  showMessage('Announcement unpublished.');
});

// Pre-fill fields if an announcement exists
(function prefillAnnouncement() {
  try {
    const existing = JSON.parse(localStorage.getItem('pulsebot_announcement') || 'null');
    if (existing) {
      if (existing.title) document.getElementById('announceTitle').value = existing.title;
      if (existing.message) document.getElementById('announceMessage').value = existing.message;
      if (existing.type) document.getElementById('announceType').value = existing.type;
    }
  } catch(e) { /* ignore */ }
})();
</script>
"""
    # append before closing </body> of panel_html
    panel_html = panel_path.read_text(encoding='utf-8')
    panel_html = panel_html.replace("</body>", js_snippet + "\n</body>")
    panel_path.write_text(panel_html, encoding="utf-8")
    print("Added announcement JS handlers to staff_panel.html")
else:
    print("Announcement JS appears already present in staff_panel.html")

# Now update final.html to display announcement banner reading from localStorage
if "pulsebot_announcement" not in final_html:
    banner_css = """
<style id="pulsebot-ann-css">
/* Announcement banner styles */
.pulsebot-ann {position:fixed;left:20px;right:20px;top:20px;z-index:9999;padding:14px 18px;border-radius:10px;display:flex;align-items:center;gap:12px;box-shadow:0 8px 30px rgba(2,6,23,0.6);border:1px solid rgba(255,255,255,0.04);}
.pulsebot-ann h4{margin:0;font-size:16px;color:#042024;font-weight:800}
.pulsebot-ann p{margin:0;color:#042024;font-size:14px;opacity:0.95}
.pulsebot-ann .close{margin-left:auto;background:transparent;border:none;font-weight:700;cursor:pointer;color:#042024;padding:6px 8px;border-radius:6px}
.pulsebot-ann.info{background:rgba(14,165,164,0.95)} /* accent */
.pulsebot-ann.success{background:rgba(34,197,94,0.95)} /* green */
.pulsebot-ann.warn{background:rgba(234,88,12,0.95)} /* orange */
@media (max-width:600px){.pulsebot-ann{left:12px;right:12px;top:12px;padding:12px} .pulsebot-ann h4{font-size:15px}}
</style>
"""
    banner_js = """
<script id="pulsebot-ann-script">
(function renderPulsebotAnnouncement(){
  try {
    const raw = localStorage.getItem('pulsebot_announcement');
    if (!raw) return;
    const ann = JSON.parse(raw);
    if (!ann) return;
    const container = document.createElement('div');
    container.className = 'pulsebot-ann ' + (ann.type || 'info');
    container.setAttribute('role','region');
    container.innerHTML = `<div style="display:flex;flex-direction:column"><h4>${ann.title || ''}</h4><p>${ann.message || ''}</p></div><button class="close" aria-label="Close announcement">✕</button>`;
    document.body.appendChild(container);
    container.querySelector('.close').addEventListener('click', () => {
      container.remove();
    });
  } catch(e) { console.error('Announcement render error', e); }
})();
</script>
"""
    # Insert banner CSS and JS near end of <head> and before </body> respectively.
    # Place CSS before closing </head>
    if "</head>" in final_html:
        final_html = final_html.replace("</head>", banner_css + "\n</head>")
    else:
        final_html = banner_css + final_html
    # Place JS before closing </body>
    if "</body>" in final_html:
        final_html = final_html.replace("</body>", banner_js + "\n</body>")
    else:
        final_html = final_html + banner_js
    final_path.write_text(final_html, encoding="utf-8")
    print("Inserted announcement banner rendering into final.html")
else:
    print("Announcement banner code already present in final.html")

# Output paths for user
{"staff_login": str(login_path), "staff_panel": str(panel_path), "final": str(final_path)}