#!/usr/bin/env python3
"""Rebuild plain.html: keep install steps, replace Batch Import section with
the new Firefox-account flow (5 screenshots), Grok UI design language,
embedded Vazirmatn (offline, no CDN)."""
import base64, io, re, pathlib
from PIL import Image

SITE = pathlib.Path.home() / "workspace/foxyvpn-tutorial-site"
FILES = pathlib.Path.home() / "workspace/user/files"
old = (SITE / "plain.html").read_text(encoding="utf-8")

# --- extract embedded Vazirmatn @font-face blocks from the old file ---
fonts = "\n".join(re.findall(r"@font-face \{.*?\}", old, re.S))
assert fonts.count("@font-face") == 3, fonts.count("@font-face")

# --- extract old screenshots in order ---
imgs = re.findall(r'<img class="screenshot" src="(data:image/[^"]+)" alt="([^"]*)"', old)
assert len(imgs) == 6, len(imgs)
# order: 0=PlayProtect More details, 1=PlayProtect Install anyway,
#        2=Batch import (DROP), 3=Import accounts (DROP),
#        4=Settings, 5=Block ads
pp1, pp2, settings_img, blockads_img = imgs[0], imgs[1], imgs[4], imgs[5]

# --- optimize + embed the 5 new screenshots ---
new_files = [
    ("1000045692_1_7ox8.jpg", "صفحه ورود FoxyVPN و گزینه Create Firefox account"),
    ("1000045694_2_mnav.jpg", "صفحه وارد کردن ایمیل در ساخت اکانت فایرفاکس"),
    ("1000045696_3_lts8.jpg", "صفحه انتخاب رمز عبور برای اکانت فایرفاکس"),
    ("1000045698_4_9sel.jpg", "صفحه وارد کردن کد تأیید ارسال‌شده به ایمیل"),
    ("1000045700_5_2fgs.jpg", "صفحه ورود FoxyVPN با ایمیل و رمز واردشده"),
]
new_imgs = []
for fname, alt in new_files:
    im = Image.open(FILES / fname).convert("RGB")
    if im.width > 800:
        im = im.resize((800, round(im.height * 800 / im.width)), Image.LANCZOS)
    buf = io.BytesIO()
    im.save(buf, "JPEG", quality=85, optimize=True)
    b64 = base64.b64encode(buf.getvalue()).decode()
    new_imgs.append((f"data:image/jpeg;base64,{b64}", alt))
    print(fname, "->", len(buf.getvalue()), "bytes")

DL_URL = "https://github.com/arblant/FoxyVPN-MultiAcc/releases/download/v1.5/FoxyVPN-MultiAcc-v1.5.apk"

def step(num, title, body):
    return f"""    <div class="step">
      <div class="step-header">
        <div class="step-number">{num}</div>
        <div class="step-title">{title}</div>
      </div>
      <div class="step-content">
{body}
      </div>
    </div>
"""

def shot(img):
    src, alt = img
    return f'        <div class="shot"><img src="{src}" alt="{alt}"></div>'

download = step("۱", "دانلود برنامه", f"""        <p>اول روی لینک زیر بزنید تا دانلود شروع شود:</p>
        <a class="btn-download" href="{DL_URL}" target="_blank" rel="noopener">
          ⬇ دانلود FoxyVPN v1.5
        </a>
        <p style="margin-top:12px; font-size:0.85rem; color:var(--text-muted); direction:ltr; text-align:left; word-break:break-all;">
          {DL_URL}
        </p>""")

playprotect = step("۲", "رفع ارور Google Play Protect", f"""        <p>بعد از اینکه برنامه دانلود شد و برای نصب روی فایل APK کلیک کردید، با این ارور مواجه می‌شوید:</p>
        <img class="screenshot" src="{pp1[0]}" alt="{pp1[1]}">
        <p>برای رفع این مشکل روی <strong>More details</strong> بزنید و بعد روی <strong>Install anyway</strong> کلیک کنید:</p>
        <img class="screenshot" src="{pp2[0]}" alt="{pp2[1]}">
        <div class="note">
          <strong>نکته مهم:</strong> این ارور نمی‌گوید برنامه ناامن است. فقط می‌گوید برنامه روی گوگل‌پلی نیست و به همین خاطر این هشدار را می‌دهد. برنامه کاملاً امن است.
        </div>""")

s3 = step("۳", "ساخت اکانت فایرفاکس", f"""        <p>بعد از نصب برنامه، وارد برنامه شوید و گزینه‌ی <span class="highlight">Create Firefox account</span> را بزنید:</p>
{shot(new_imgs[0])}""")

s4 = step("۴", "وارد کردن ایمیل", f"""        <p>در بخش <span class="highlight">Enter your email</span>، ایمیل خود را وارد کنید و روی <span class="highlight">Sign up or sign in</span> بزنید:</p>
{shot(new_imgs[1])}
        <div class="note warning-note">
          <strong>توجه:</strong> ترجیحاً از ایمیل دوم خود استفاده کنید؛ ایمیلی که خیلی مهم نیست و کارهای ضروری را با آن انجام نمی‌دهید. حتماً باید به آن ایمیل دسترسی داشته باشید، چون در مراحل بعد کد تأیید به آن ارسال می‌شود.
        </div>""")

s5 = step("۵", "انتخاب رمز و ساخت اکانت", f"""        <p>یک پسورد انتخاب کنید که حداقل ۸ کاراکتر باشد و روی <span class="highlight">Create account</span> بزنید:</p>
{shot(new_imgs[2])}
        <div class="note">
          <strong>نکته:</strong> رمز را حتماً به خاطر بسپارید؛ در مرحله‌ی آخر برای وارد شدن به برنامه لازمش دارید.
        </div>""")

s6 = step("۶", "وارد کردن کد تأیید", f"""        <p>وارد <span class="highlight">Gmail</span> بشوید و کد ارسال‌شده را بردارید، بعد آن را در این بخش وارد کنید و <span class="highlight">Confirm</span> را بزنید:</p>
{shot(new_imgs[3])}""")

s7 = step("۷", "وارد شدن به برنامه", f"""        <p>بعد وارد برنامه شوید و همان جیمیل و رمزی که با آن اکانت ساختید را وارد کنید و گزینه‌ی <span class="highlight">Continue</span> را بزنید:</p>
{shot(new_imgs[4])}""")

settings = step("۸", "رفتن به تنظیمات", f"""        <p>بعد از وارد شدن به برنامه، به بخش <strong>Settings</strong> بروید (آیکون چرخ‌دنده پایین صفحه):</p>
        <img class="screenshot" src="{settings_img[0]}" alt="{settings_img[1]}">""")

blockads = step("۹", "فعال کردن Block Ads", f"""        <p>اسکرول کنید به پایین و گزینه <strong>Block ads</strong> را روشن کنید:</p>
        <img class="screenshot" src="{blockads_img[0]}" alt="{blockads_img[1]}">""")

final = step("✓", "اتصال نهایی", """        <p>در آخر به صفحه اصلی برگردید و روی دایره وسط صفحه بزنید تا وصل شوید.</p>
        <div class="note warning-note">
          <strong>نکته:</strong> با رفتن به بخش Location (آیکون کره‌ی زمین در پایین برنامه) می‌توانید کشور مورد نظر خود را انتخاب کنید. بعضی هوش مصنوعی‌ها و اپلیکیشن‌ها فقط با لوکیشن آمریکا باز می‌شوند.
        </div>""")

css = """
    :root {
      --bg: #0f1115;
      --card: #1a1d24;
      --card-hover: #22262f;
      --accent: #7c9cff;
      --accent-2: #5b7cfa;
      --text: #e8eaed;
      --text-muted: #9aa0a6;
      --border: #2a2f3a;
      --success: #34d399;
    }
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      font-family: 'Vazirmatn', system-ui, -apple-system, sans-serif;
      background: var(--bg);
      background-image:
        radial-gradient(ellipse 80% 50% at 50% -20%, rgba(124,156,255,0.12), transparent),
        radial-gradient(ellipse 60% 40% at 100% 100%, rgba(52,211,153,0.06), transparent);
      color: var(--text);
      line-height: 1.8;
      min-height: 100vh;
      padding: 24px 16px 60px;
    }
    .container { max-width: 720px; margin: 0 auto; }
    header { text-align: center; margin-bottom: 40px; padding-top: 12px; }
    header .logo {
      width: 72px; height: 72px;
      background: linear-gradient(135deg, #ff6b35, #f7931e);
      border-radius: 18px;
      display: flex; align-items: center; justify-content: center;
      margin: 0 auto 16px; font-size: 36px;
      box-shadow: 0 8px 24px rgba(255,107,53,0.3);
    }
    header .badge {
      display: inline-block; background: rgba(124,156,255,0.15); color: var(--accent);
      font-size: 0.85rem; font-weight: 500; padding: 6px 14px;
      border-radius: 999px; margin-bottom: 16px;
    }
    header h1 { font-size: 1.65rem; font-weight: 700; line-height: 1.4; margin-bottom: 8px; color: #fff; }
    header p { color: var(--text-muted); font-size: 0.95rem; }
    .step {
      background: var(--card); border: 1px solid var(--border);
      border-radius: 16px; padding: 24px 22px 28px; margin-bottom: 28px;
      box-shadow: 0 8px 32px rgba(0,0,0,0.35);
      transition: border-color 0.2s, background 0.2s;
    }
    .step:hover { border-color: #353b48; background: var(--card-hover); }
    .step-header { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
    .step-number {
      flex-shrink: 0; width: 40px; height: 40px;
      background: linear-gradient(135deg, #7c9cff, #5b7cfa); color: #fff;
      border-radius: 12px; display: flex; align-items: center; justify-content: center;
      font-weight: 700; font-size: 1.15rem;
      box-shadow: 0 4px 14px rgba(124,156,255,0.35);
    }
    .step-title { font-size: 1.1rem; font-weight: 600; color: #fff; line-height: 1.5; }
    .step-content { font-size: 0.98rem; color: var(--text); }
    .step-content p { margin-bottom: 12px; }
    .step-content a { color: var(--accent); text-decoration: none; word-break: break-all; }
    .highlight { color: var(--accent); font-weight: 600; direction: ltr; unicode-bidi: embed; }
    .note {
      background: rgba(52,211,153,0.08); border: 1px solid rgba(52,211,153,0.25);
      border-radius: 12px; padding: 14px 16px; margin-top: 16px;
      font-size: 0.92rem; color: #b8f0d6;
    }
    .note strong { color: var(--success); }
    .warning-note {
      background: rgba(251,191,36,0.1); border: 1px solid rgba(251,191,36,0.3); color: #ffe082;
    }
    .warning-note strong { color: #fbbf24; }
    .screenshot {
      display: block; width: 100%; max-width: 340px; margin: 16px auto;
      border-radius: 14px; border: 1px solid var(--border);
      box-shadow: 0 8px 28px rgba(0,0,0,0.45);
    }
    .shot {
      margin: 18px auto 6px; max-width: 340px; border-radius: 14px; overflow: hidden;
      border: 1px solid var(--border); background: #0d0f14;
      box-shadow: 0 6px 24px rgba(0,0,0,0.4);
    }
    .shot img { display: block; width: 100%; height: auto; }
    .btn-download {
      display: inline-flex; align-items: center; gap: 8px;
      background: linear-gradient(135deg, #7c9cff, #5b7cfa); color: #fff !important;
      font-weight: 600; padding: 12px 22px; border-radius: 12px;
      text-decoration: none !important; border: none !important;
      margin: 10px 0 6px; font-size: 0.98rem;
      transition: transform 0.15s, box-shadow 0.15s;
    }
    .btn-download:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(124,156,255,0.35); }
    footer { text-align: center; margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--border); color: var(--text-muted); font-size: 0.85rem; }
    @media (max-width: 560px) {
      body { padding: 16px 12px 48px; }
      header h1 { font-size: 1.4rem; }
      .step { padding: 20px 16px 24px; }
      .step-number { width: 36px; height: 36px; font-size: 1.05rem; border-radius: 10px; }
      .step-title { font-size: 1.02rem; }
      .screenshot, .shot { max-width: 100%; }
    }
"""

html = f"""<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="robots" content="noindex">
  <title>آموزش نصب و راه‌اندازی FoxyVPN</title>
  <style>
{fonts}
{css}
  </style>
</head>
<body>
  <div class="container">
    <header>
      <div class="logo">🦊</div>
      <div class="badge">آموزش FoxyVPN</div>
      <h1>آموزش نصب FoxyVPN</h1>
      <p>راهنمای کامل نصب، ساخت اکانت فایرفاکس و راه‌اندازی</p>
    </header>

{download}
{playprotect}
{s3}
{s4}
{s5}
{s6}
{s7}
{settings}
{blockads}
{final}
    <footer>
      ساخته شده برای راحتی استفاده · FoxyVPN MultiAcc
    </footer>
  </div>
</body>
</html>
"""

(SITE / "plain.html").write_text(html, encoding="utf-8")
print("plain.html written:", len(html.encode()), "bytes")