"""Patch frontend/dist/assets/index.js with multi-product UI."""
from pathlib import Path

path = Path(__file__).resolve().parent.parent / "frontend" / "dist" / "assets" / "index.js"
text = path.read_text(encoding="utf-8")

marker = "function UpgradeCard("
if "const PRODUCTS =" not in text:
    insert = r'''
const PRODUCTS = [
  {
    id: "writer",
    name: "ZuZu Writer",
    short: "Writer",
    tagline: "Turn AI drafts into natural wording.",
    blurb: "Rewrite ChatGPT, Gemini, and Claude text in Neutral, Casual, Formal, or Academic tone — classical NLP, no LLM.",
    status: "live",
  },
  {
    id: "grammar",
    name: "ZuZu Grammar",
    short: "Grammar",
    tagline: "Catch grammar and spelling before you publish.",
    blurb: "Scan drafts for grammar, punctuation, and common spelling issues, then apply fixes with one click.",
    status: "preview",
  },
];

const GRAMMAR_SAMPLE = "teh quick brown fox jump over the lazy dog. i think this sentance is seperate from the other one and it it needs fixing.";

async function checkGrammar(text, accessToken) {
  const headers = { "Content-Type": "application/json" };
  if (accessToken) headers.Authorization = `Bearer ${accessToken}`;
  const res = await fetch("/v1/grammar", { method: "POST", headers, body: JSON.stringify({ text }) });
  if (!res.ok) {
    let detail = "Grammar check failed.";
    try { const data = await res.json(); detail = data.detail || detail; } catch (_) {}
    throw new Error(typeof detail === "string" ? detail : "Grammar check failed.");
  }
  return res.json();
}

function applyGrammarFix(text, issue) {
  if (issue.suggestion == null) return text;
  return text.slice(0, issue.start) + issue.suggestion + text.slice(issue.end);
}

function applyAllGrammarFixes(text, issues) {
  let next = text;
  const ordered = [...issues].sort((a, b) => b.start - a.start);
  for (const issue of ordered) {
    if (issue.suggestion == null) continue;
    next = applyGrammarFix(next, issue);
  }
  return next;
}

function ProductSwitcher({ product, onChange }) {
  return h("div", { className: "product-switcher", role: "tablist", "aria-label": "Products" },
    PRODUCTS.map((p) => h("button", {
      key: p.id,
      type: "button",
      role: "tab",
      "aria-selected": product === p.id,
      className: product === p.id ? "active" : "",
      onClick: () => onChange(p.id),
    }, p.short, p.status === "preview" ? h("span", { className: "product-pill" }, "Preview") : null)),
  );
}

function SiteNav({ product, onSelectProduct }) {
  return h("nav", { className: "site-nav", "aria-label": "Site" },
    h("a", { href: "#products" }, "Products"),
    h("a", { href: "#plans" }, "Plans"),
    h("button", { type: "button", className: "nav-product", onClick: () => onSelectProduct("writer") }, product === "writer" ? "Open Writer" : "Writer"),
    h("button", { type: "button", className: "nav-product", onClick: () => onSelectProduct("grammar") }, product === "grammar" ? "Open Grammar" : "Grammar"),
  );
}

'''
    text = text.replace(marker, insert + marker, 1)

start = text.index("function LandingSections(")
end = text.index("function App()")
landing = r'''function LandingSections({ plans, onSignUp, authEnabled, onSelectProduct }) {
  const free = plans.find((p) => p.id === "free");
  const pro = plans.find((p) => p.id === "pro");
  const plus = plans.find((p) => p.id === "plus");

  return h("div", { className: "landing" },
    h("section", { className: "land-block", id: "products" },
      h("h2", null, "Our products"),
      h("p", { className: "land-lead" }, "Two focused tools under ZuZu — pick the job you need today."),
      h("div", { className: "product-grid" },
        PRODUCTS.map((p) => h("article", { key: p.id, className: `product-card product-card-${p.id}` },
          h("div", { className: "product-card-top" },
            h("h3", null, p.name),
            p.status === "preview" ? h("span", { className: "product-pill" }, "Preview") : null,
          ),
          h("p", { className: "product-tagline" }, p.tagline),
          h("p", null, p.blurb),
          h("ul", null,
            ...(p.id === "writer"
              ? [
                  h("li", { key: "w1" }, "Tone: Neutral, Casual, Formal, Academic"),
                  h("li", { key: "w2" }, "Offline classical NLP rewrite engine"),
                  h("li", { key: "w3" }, "Free preview, then Free / Pro / Plus plans"),
                ]
              : [
                  h("li", { key: "g1" }, "Grammar, punctuation & common spelling"),
                  h("li", { key: "g2" }, "Click to apply suggested fixes"),
                  h("li", { key: "g3" }, "Works alongside Writer in the same account"),
                ]),
          ),
          h("button", {
            type: "button",
            className: "btn btn-primary",
            onClick: () => { onSelectProduct(p.id); window.scrollTo({ top: 0, behavior: "smooth" }); },
          }, `Open ${p.short}`),
        )),
      ),
    ),
    h("section", { className: "land-block" },
      h("h2", null, "How ZuZu works"),
      h("p", { className: "land-lead" }, "Use Writer to humanize AI drafts, then Grammar to polish before you publish."),
      h("ol", { className: "steps" },
        h("li", null, h("span", { className: "step-num" }, "1"), h("div", null, h("strong", null, "Choose a product"), h("p", null, "Switch between Writer and Grammar from the top of the page."))),
        h("li", null, h("span", { className: "step-num" }, "2"), h("div", null, h("strong", null, "Paste your draft"), h("p", null, "Drop in AI or human text and run Rewrite or Check grammar."))),
        h("li", null, h("span", { className: "step-num" }, "3"), h("div", null, h("strong", null, "Review, then unlock more"), h("p", null, "Try a short preview, sign up for Free, go Pro or Plus when you write every day."))),
      ),
    ),
    h("section", { className: "land-block" },
      h("h2", null, "Who it's for"),
      h("p", { className: "land-lead" }, "Built for people who draft with AI and publish as themselves."),
      h("div", { className: "audience-grid" },
        h("article", null, h("h3", null, "Students & academic writers"), h("p", null, "Refine AI-assisted notes into clearer Academic or Formal wording. Follow your institution's rules.")),
        h("article", null, h("h3", null, "Freelancers & professionals"), h("p", null, "Turn stiff AI emails and reports into confident, natural communication.")),
        h("article", null, h("h3", null, "Bloggers & SEO writers"), h("p", null, "Refresh repetitive AI drafts into readable posts that still keep your meaning.")),
        h("article", null, h("h3", null, "Social & content teams"), h("p", null, "Humanize captions and scripts so they sound like your brand, not a model.")),
      ),
    ),
    h("section", { className: "land-block", id: "plans" },
      h("h2", null, "Simple plans"),
      h("p", { className: "land-lead" }, "One account for Writer today — Grammar preview is included. Checkout for Pro/Plus coming soon."),
      h("div", { className: "pricing-grid" },
        h("article", { className: "price-card" },
          h("h3", null, "Free"),
          h("p", { className: "price-amount" }, "₹0"),
          h("ul", null,
            h("li", null, `${(free && free.max_words_per_request) || 400} words / rewrite`),
            h("li", null, `${(free && free.daily_rewrites) || 5} rewrites / day`),
            h("li", null, "Grammar preview included"),
          ),
          authEnabled ? h("button", { type: "button", className: "btn btn-quiet", onClick: onSignUp }, "Create free account") : null,
        ),
        h("article", { className: "price-card price-card-pro" },
          h("h3", null, "Pro"),
          h("p", { className: "price-amount" }, `₹${(pro && pro.price_inr_monthly) || 199}`, h("span", null, "/mo")),
          h("ul", null,
            h("li", null, `${((pro && pro.max_words_per_request) || 2000).toLocaleString()} words / rewrite`),
            h("li", null, `${(pro && pro.daily_rewrites) || 50} rewrites / day`),
            h("li", null, "Best for daily AI drafts"),
          ),
          h("p", { className: "price-soon" }, "Checkout coming soon"),
        ),
        h("article", { className: "price-card price-card-plus" },
          h("h3", null, "Plus"),
          h("p", { className: "price-amount" }, `₹${(plus && plus.price_inr_monthly) || 499}`, h("span", null, "/mo")),
          h("ul", null,
            h("li", null, `${((plus && plus.max_words_per_request) || 5000).toLocaleString()} words / rewrite`),
            h("li", null, `${(plus && plus.daily_rewrites) || 200} rewrites / day`),
            h("li", null, "Heavy use & longer documents"),
          ),
          h("p", { className: "price-soon" }, "Checkout coming soon"),
        ),
      ),
      h("p", { className: "plans-note" }, "Visitors can try a short free Writer preview on the homepage before signing up."),
    ),
    h("footer", { className: "site-footer" },
      h("p", null, "Review every rewrite and grammar suggestion before you share or publish."),
      h("p", { className: "footer-brand" }, h(BrandLogo, { size: 28 }), h("span", null, "ZuZu")),
    ),
  );
}

'''
text = text[:start] + landing + text[end:]

needle = "  const [authTitle, setAuthTitle] = useState(undefined);\n\n  const isGuest"
if "const [product, setProduct]" not in text:
    text = text.replace(
        needle,
        """  const [authTitle, setAuthTitle] = useState(undefined);
  const [product, setProduct] = useState("writer");
  const [grammarText, setGrammarText] = useState("");
  const [grammarIssues, setGrammarIssues] = useState([]);
  const [grammarNote, setGrammarNote] = useState("");
  const [grammarLoading, setGrammarLoading] = useState(false);
  const [grammarError, setGrammarError] = useState("");
  const [grammarMeta, setGrammarMeta] = useState("");

  const activeProduct = PRODUCTS.find((p) => p.id === product) || PRODUCTS[0];
  const isGuest""",
        1,
    )

if "async function onGrammarCheck" not in text:
    text = text.replace(
        "        onRewrite();\n",
        '        if (product === "writer") onRewrite();\n        else onGrammarCheck();\n',
        1,
    )
    text = text.replace(
        """  function openAuth(mode, title) {
    setAuthMode(mode);
    setAuthTitle(title);
    setAuthOpen(true);
  }

  async function onRewrite()""",
        """  function openAuth(mode, title) {
    setAuthMode(mode);
    setAuthTitle(title);
    setAuthOpen(true);
  }

  function selectProduct(id) {
    setProduct(id);
    setError("");
    setGrammarError("");
  }

  async function onGrammarCheck() {
    const text = grammarText.trim();
    if (!text) { setGrammarError("Paste some text first — or try the sample."); return; }
    if (text.length > MAX_CHARS) { setGrammarError(`Text is too long (${text.length.toLocaleString()} chars).`); return; }
    setGrammarLoading(true);
    setGrammarError("");
    setGrammarMeta("Checking…");
    try {
      const result = await checkGrammar(text, session && session.access_token);
      setGrammarIssues(result.issues || []);
      setGrammarNote(result.note || "");
      const n = (result.issues || []).length;
      setGrammarMeta(n ? `${n} issue${n === 1 ? "" : "s"} · ${result.input_words} words` : `No issues found · ${result.input_words} words`);
    } catch (err) {
      setGrammarError(err instanceof Error ? err.message : "Grammar check failed.");
      setGrammarMeta("");
      setGrammarIssues([]);
    } finally {
      setGrammarLoading(false);
    }
  }

  function onApplyGrammarIssue(issue) {
    setGrammarText((prev) => applyGrammarFix(prev, issue));
    setGrammarIssues([]);
    setGrammarMeta("Fix applied — run Check grammar again to refresh.");
    setGrammarNote("");
  }

  function onApplyAllGrammar() {
    if (!grammarIssues.length) return;
    setGrammarText((prev) => applyAllGrammarFixes(prev, grammarIssues));
    setGrammarIssues([]);
    setGrammarMeta("All suggested fixes applied — run Check grammar again to refresh.");
    setGrammarNote("");
  }

  async function onRewrite()""",
        1,
    )

old_header = """        h(\"p\", { className: \"brand-tag\" }, \"From AI-generated to plagiarism-safe — rewrite in a voice that feels real.\"),
      ),"""
new_header = """        h(\"p\", { className: \"brand-tag\" }, activeProduct.tagline),
        h(SiteNav, { product, onSelectProduct: selectProduct }),
      ),"""
if "activeProduct.tagline" not in text:
    text = text.replace(old_header, new_header, 1)
    text = text.replace('h("h1", null, "ZuZu Writer"),', 'h("h1", null, activeProduct.name),', 1)

if "h(ProductSwitcher" not in text:
    text = text.replace(
        "    isGuest && !idleSignedOut\n",
        '    h(ProductSwitcher, { product, onChange: selectProduct }),\n    isGuest && !idleSignedOut && product === "writer"\n',
        1,
    )

text = text.replace(
    """    h(LandingSections, {
      plans,
      authEnabled,
      onSignUp: () => openAuth("signup", "Create free account"),
    }),""",
    """    h(LandingSections, {
      plans,
      authEnabled,
      onSignUp: () => openAuth("signup", "Create free account"),
      onSelectProduct: selectProduct,
    }),""",
    1,
)

stage_start = text.find('    h("div", { className: "stage" },')
stage_end = text.find("    showUpgrade && authEnabled")
if stage_start != -1 and stage_end != -1 and "grammar-stage" not in text:
    writer_stage = text[stage_start:stage_end]
    grammar_stage = r'''    product === "grammar"
      ? h("div", { className: "stage grammar-stage" },
          h("div", { className: "toolbar" },
            h("div", { className: "toolbar-controls" },
              h("p", { className: "grammar-lead" }, "Preview rule engine — grammar, punctuation, and common spelling. Fuller checks coming next."),
            ),
            h("div", { className: "toolbar-actions" },
              h("button", { type: "button", className: "btn btn-quiet", disabled: grammarLoading, onClick: () => { setGrammarText(""); setGrammarIssues([]); setGrammarMeta(""); setGrammarError(""); setGrammarNote(""); } }, "Clear"),
              h("button", { type: "button", className: "btn btn-quiet", disabled: grammarLoading, onClick: () => { setGrammarText(GRAMMAR_SAMPLE); setGrammarIssues([]); setGrammarError(""); setGrammarMeta("Sample loaded — hit Check grammar."); setGrammarNote(""); } }, "Try sample"),
              grammarIssues.length ? h("button", { type: "button", className: "btn btn-quiet", disabled: grammarLoading, onClick: onApplyAllGrammar }, "Apply all") : null,
              h("button", { type: "button", className: "btn btn-primary btn-rewrite", disabled: grammarLoading, onClick: () => onGrammarCheck() }, grammarLoading ? "Checking…" : "Check grammar"),
            ),
          ),
          h("section", { className: "editors grammar-editors" },
            h("div", { className: "pane" },
              h("div", { className: "pane-head" }, h("h2", null, "Your text")),
              h("textarea", {
                value: grammarText,
                onChange: (e) => { setGrammarText(e.target.value); setGrammarIssues([]); },
                placeholder: "Paste a draft to check grammar and spelling…",
                spellCheck: true,
              }),
            ),
            h("div", { className: "pane pane-out grammar-issues-pane" },
              h("div", { className: "pane-head" },
                h("h2", null, "Issues"),
                h("span", { className: "issue-count" }, grammarIssues.length ? `${grammarIssues.length} found` : (grammarMeta ? "Clean" : "—")),
              ),
              grammarIssues.length
                ? h("ul", { className: "issue-list" },
                    grammarIssues.map((issue) => h("li", { key: issue.id, className: `issue-item cat-${issue.category}` },
                      h("div", { className: "issue-main" },
                        h("span", { className: "issue-cat" }, issue.category),
                        h("p", null, issue.message),
                        h("code", { className: "issue-snippet" },
                          (grammarText.slice(issue.start, issue.end) || "…") + (issue.suggestion != null ? ` → ${issue.suggestion}` : ""),
                        ),
                      ),
                      issue.suggestion != null
                        ? h("button", { type: "button", className: "btn btn-quiet btn-tiny", onClick: () => onApplyGrammarIssue(issue) }, "Apply")
                        : null,
                    )),
                  )
                : h("p", { className: "grammar-empty" }, grammarNote || "Run Check grammar to see suggestions here."),
            ),
          ),
          h("div", { className: "statusbar" },
            h("div", { className: grammarError ? "error" : grammarLoading ? "loading" : undefined }, grammarError || grammarMeta || "Paste text → Check grammar"),
            h("div", { className: "counts" }, h("span", null, `${wordCount(grammarText)} words`)),
          ),
        )
      : '''
    text = text[:stage_start] + grammar_stage + writer_stage + text[stage_end:]
    text = text.replace(
        "    showUpgrade && authEnabled\n",
        '    showUpgrade && authEnabled && product === "writer"\n',
        1,
    )
    text = text.replace(
        '    h("p", { className: "hint" }, "Review the rewrite before you share or publish it."),',
        '    h("p", { className: "hint" }, product === "grammar" ? "Review every suggestion before you publish." : "Review the rewrite before you share or publish it."),',
        1,
    )

path.write_text(text, encoding="utf-8")
print("patched", path)
print("PRODUCTS", "const PRODUCTS =" in text)
print("grammar-stage", "grammar-stage" in text)
print("ProductSwitcher", "h(ProductSwitcher" in text)