/// <reference lib="dom" />
import { writeFile } from "node:fs/promises";
import { expect } from "e2e";
import { APP_DIR } from "../e2e.config.ts";
import { test, IOS } from "./t3-mobile.ts";

const names = ["تقرير شهري", "Quarterly Report", "תוכנית עבודה", "عرض تقديمي للفريق"];
const kinds = ["document", "presentation", "spreadsheet", "presentation"];
const card = (i: number) => `::artifact-template{skill_name="artifact-template-${i}" skill_directory="/templates/template-${i}" display_name="${names[i]}" artifact_kind="${kinds[i]}"}`;
const reply = `هذه فقرة عربية لاختبار اتجاه النص.\n\n${card(0)}\n\nهذا سطر عربي آخر.\n\nThis is an English line.\n\n${card(1)}\n\n${card(2)}\n\n${card(3)}`;

test("Arabic and Hebrew artifact cards mirror beside English cards", IOS, async ({ t3, app, screen }) => {
  // Replace only the replay recording, keeping both commits' real render paths intact.
  await writeFile(`${APP_DIR}/apps/server/scripts/dev-replay/showcase_transcript.ndjson`, [
    {type:"expect_outbound",frame:{kind:"request",method:"session/prompt",params:"<any>"}},
    {type:"emit_inbound",frame:{kind:"notification",method:"session/update",params:{sessionId:"replay",update:{sessionUpdate:"agent_message_chunk",content:{type:"text",text:reply}}}}},
    {type:"emit_inbound",frame:{kind:"response",method:"session/prompt",result:{stopReason:"end_turn"}}}
  ].map(x => JSON.stringify(x)).join("\n"));
  const project = await t3.project("Template direction");
  await t3.thread({project,title:"Multilingual templates",messages:["Show the template cards"],model:"showcase"});
  await t3.open();
  await screen.getByText("Multilingual templates", {exact:false}).first().tap();
  await screen.getByText(names[3], {exact:true}).waitFor({state:"visible"});
  await app.screenshot("template-cards");
  const positions = [];
  for (const name of names) {
    const title = await screen.getByText(name, {exact:true}).boundingBox();
    const button = await screen.getByRole("button", `Use ${name} template`).boundingBox();
    positions.push(title!.x > button!.x);
  }
  expect(positions).toEqual([true, false, true, true]);
});
