"""Combine all 3 subpages + CSS + screenshot into a single self-contained HTML
that Chicho can send to Andres. Inline everything: CSS, screenshot (base64), JSON.
"""
import base64, json, re
from pathlib import Path

SITE = Path("/home/ubuntu/msc-navigator/site")

# Read source pages
index_html   = (SITE / "index.html").read_text()
how_html     = (SITE / "how-it-works/index.html").read_text()
n8n_html     = (SITE / "n8n/index.html").read_text()
oracle_html  = (SITE / "oracle-vps/index.html").read_text()
css          = (SITE / "style.css").read_text()
screenshot   = (SITE / "assets/msc-med-tracking.png").read_bytes()
tracking_json= json.loads((SITE / "assets/MEDU9730548.json").read_text())

# Base64-encode screenshot
screenshot_b64 = base64.b64encode(screenshot).decode()
screenshot_data_uri = f"data:image/png;base64,{screenshot_b64}"

# Strip <link rel="stylesheet"> and <header> from subpages; we keep one global header
def extract_body(html):
    # remove the <link rel="stylesheet"> tag
    html = re.sub(r'<link rel="stylesheet"[^>]*>', '', html)
    # remove the <header>...</header> block (we keep a global one)
    html = re.sub(r'<header>.*?</header>', '', html, flags=re.DOTALL)
    # remove the <footer>...</footer> block
    html = re.sub(r'<footer>.*?</footer>', '', html, flags=re.DOTALL)
    return html

index_body  = extract_body(index_html)
how_body    = extract_body(how_html)
n8n_body    = extract_body(n8n_html)
oracle_body = extract_body(oracle_html)

# Build the combined single-file HTML
out = f"""<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>MSC Tracker + Oracle Free Tier VPS — single-file share</title>
  <style>
{css}
  </style>
</head>
<body>
  <header>
    <div class="wrap">
      <div class="kicker">Single-file share · 2026-06-05</div>
      <h1>Can a cheap VPS scrape MSC shipping tracker?</h1>
      <p class="lede">
        Self-contained HTML — no network, no assets, no CDN. Open in any browser.
        All four pages of the original Tailscale-served site are concatenated here
        in order: overview, how it works, n8n, Oracle VPS guide.
      </p>
      <div class="callout">
        <b>You got this from Chicho via a one-off share.</b> The live, updated
        version lives at
        <code>https://miopenclaw-vnic.tail9799d2.ts.net/msc-navigator/</code>
        (Tailscale-only). This file is a snapshot for offline reading.
      </div>
      <nav>
        <a href="#overview">1. Overview</a>
        <a href="#how">2. How it works</a>
        <a href="#n8n">3. n8n in the loop</a>
        <a href="#oracle">4. Oracle VPS guide</a>
      </nav>
    </div>
  </header>

  <main class="wrap">
    <section id="overview"><h2>1. Overview</h2>
      {index_body}
      <!-- Inject the inline screenshot + JSON for the overview page -->
      <script>
        // Replace the link to assets/msc-med-tracking.png with a data-URI
        document.addEventListener('DOMContentLoaded', () => {{
          const SCREENSHOT = "{screenshot_data_uri}";
          const imgs = document.querySelectorAll('img[src="assets/msc-med-tracking.png"]');
          imgs.forEach(i => i.src = SCREENSHOT);
          const links = document.querySelectorAll('a[href="assets/msc-med-tracking.png"]');
          links.forEach(a => a.href = SCREENSHOT);
          const jsonLinks = document.querySelectorAll('a[href="assets/MEDU9730548.json"]');
          if (jsonLinks.length) {{
            const data = JSON.stringify({json.dumps(tracking_json)}, null, 2);
            const blob = new Blob([data], {{type: 'application/json'}});
            const url = URL.createObjectURL(blob);
            jsonLinks.forEach(a => a.href = url);
          }}
        }});
      </script>
    </section>

    <section id="how"><h2>2. How it works</h2>
      {how_body}
    </section>

    <section id="n8n"><h2>3. n8n in the loop</h2>
      {n8n_body}
    </section>

    <section id="oracle"><h2>4. Oracle Free Tier VPS guide</h2>
      {oracle_body}
    </section>
  </main>

  <footer>
    <div class="wrap">
      <p>
        Built live by Hermes Agent (an AI assistant running on Chicho's Tailscale
        node) on 2026-06-05. Original source at
        <code>~/msc-navigator/site/</code> on the host. Live Tailscale copy at
        <code>https://miopenclaw-vnic.tail9799d2.ts.net/msc-navigator/</code>.
      </p>
    </div>
  </footer>
</body>
</html>
"""

out_path = SITE / "single-file-share.html"
out_path.write_text(out)
size = out_path.stat().st_size
print(f"WROTE: {out_path}")
print(f"SIZE:  {size:,} bytes ({size/1024:.1f} KB)")
print(f"PAGES: index, how-it-works, n8n, oracle-vps — all inlined")
print(f"EMBED: CSS inlined, screenshot base64, JSON inlined (Blob URL)")
