#!/usr/bin/env python3
"""Split plain.html into two top tabs: FoxyVPN | Aether.
Foxy steps stay in panel-foxy (default), Aether steps move behind panel-aether.
Tab switch is a tiny inline script; #aether hash opens the Aether tab."""
import pathlib

SITE = pathlib.Path.home() / "workspace/foxyvpn-tutorial-site"
p = SITE / "plain.html"
html = p.read_text(encoding="utf-8")
assert 'class="tabs"' not in html, "tabs already present"

css_tabs = """
    .tabs {
      position: sticky; top: 10px; z-index: 50;
      display: flex; gap: 6px; padding: 6px;
      background: rgba(26,29,36,0.92); backdrop-filter: blur(10px);
      border: 1px solid var(--border); border-radius: 999px;
      box-shadow: 0 10px 30px rgba(0,0,0,0.45);
      margin-bottom: 32px;
    }
    .tab-btn {
      flex: 1; appearance: none; border: none; cursor: pointer;
      font-family: 'Vazirmatn', system-ui, sans-serif;
      font-size: 0.98rem; font-weight: 600; color: var(--text-muted);
      background: transparent; padding: 12px 10px; border-radius: 999px;
      transition: background 0.2s, color 0.2s, box-shadow 0.2s;
    }
    .tab-btn:hover { color: var(--text); }
    .tab-btn.active {
      background: linear-gradient(135deg, #7c9cff, #5b7cfa); color: #fff;
      box-shadow: 0 4px 16px rgba(124,156,255,0.4);
    }
    .tab-panel[hidden] { display: none; }
    .panel-intro {
      text-align: center; color: var(--text-muted); font-size: 0.95rem;
      max-width: 540px; margin: 4px auto 28px; line-height: 1.9;
    }
"""

tabs_html = """    <nav class="tabs" role="tablist" aria-label="بخش‌های آموزش">
      <button type="button" class="tab-btn active" id="btn-foxy" role="tab" aria-selected="true" onclick="showTab('foxy')">🦊 آموزش FoxyVPN</button>
      <button type="button" class="tab-btn" id="btn-aether" role="tab" aria-selected="false" onclick="showTab('aether')">⚡ آموزش کانفیگ‌های Aether</button>
    </nav>

    <section class="tab-panel" id="panel-foxy" role="tabpanel">
"""

divider_old = """    <!-- ===== بخش دوم: آموزش وصل شدن به کانفیگ‌های Aether ===== -->
    <div class="part-divider" id="aether">
      <div class="badge">بخش دوم</div>
      <h2>آموزش وصل شدن به کانفیگ‌های Aether</h2>
      <p>این بخش مخصوص برنامه‌ی PattNG است. اگر کانفیگ‌های Aether را دارید، برای وصل شدن این مراحل را انجام دهید.</p>
    </div>
"""

aether_open = """    </section>

    <!-- ===== تب دوم: آموزش وصل شدن به کانفیگ‌های Aether ===== -->
    <section class="tab-panel" id="panel-aether" role="tabpanel" hidden>
      <span id="aether"></span>
      <p class="panel-intro">این بخش مخصوص برنامه‌ی PattNG است. اگر کانفیگ‌های Aether را دارید، برای وصل شدن این مراحل را انجام دهید.</p>
"""

script = """
<script>
function showTab(name) {
  var foxy = name === 'foxy';
  document.getElementById('panel-foxy').hidden = !foxy;
  document.getElementById('panel-aether').hidden = foxy;
  document.getElementById('btn-foxy').classList.toggle('active', foxy);
  document.getElementById('btn-aether').classList.toggle('active', !foxy);
  document.getElementById('btn-foxy').setAttribute('aria-selected', foxy ? 'true' : 'false');
  document.getElementById('btn-aether').setAttribute('aria-selected', foxy ? 'false' : 'true');
  window.scrollTo({ top: 0, behavior: 'smooth' });
}
if (window.location.hash === '#aether') { showTab('aether'); }
</script>
"""

# 1. CSS
assert "</style>" in html
html = html.replace("</style>", css_tabs + "  </style>", 1)
# 2. tabs + open foxy panel right after </header>
assert "    </header>\n" in html
html = html.replace("    </header>\n", "    </header>\n\n" + tabs_html, 1)
# 3. close foxy panel, swap divider for aether panel open
assert divider_old in html
html = html.replace(divider_old, aether_open, 1)
# 4. close aether panel before footer
assert "    <footer>" in html
html = html.replace("    <footer>", "    </section>\n\n    <footer>", 1)
# 5. script before </body>
assert "</body>" in html
html = html.replace("</body>", script + "</body>", 1)
# drop the now-unused divider CSS? keep harmless. Done.
p.write_text(html, encoding="utf-8")
print("tabs added | size:", len(html.encode()))