// Validation ordre des sections — fiche Immo-Ka (ordre DOM = ordre visuel)
import { chromium, devices } from "playwright";

const BASE = process.env.BASE || "http://localhost:18096";
const UID = process.argv[2];
const URL = `${BASE}/property/${encodeURIComponent(UID)}`;
const SEL = [".f-galerie", ".f-hero", ".f-desc", "#caracteristiques", "#pieces", "#inclusions", "#carte", ".quartier"];

async function check(name, ctxOpts) {
  const browser = await chromium.launch();
  const ctx = await browser.newContext(ctxOpts);
  const page = await ctx.newPage();
  await page.goto(URL, { waitUntil: "networkidle" });
  await page.waitForSelector(".f-galerie", { timeout: 15000 });
  await page.waitForTimeout(1200);
  const data = await page.evaluate((sel) => {
    const out = [];
    for (const s of sel) {
      const el = document.querySelector(s);
      if (!el) { out.push({ s, missing: true }); continue; }
      const r = el.getBoundingClientRect();
      out.push({ s, hidden: r.height === 0 && r.width === 0, top: Math.round(r.top + window.scrollY), left: Math.round(r.left), order: getComputedStyle(el).order });
    }
    return { out, scrollY: window.scrollY };
  }, SEL);
  console.log(`\n=== ${name} ===  scrollY: ${data.scrollY}`);
  for (const b of data.out)
    console.log(b.missing ? `${b.s.padEnd(18)} (non rendue)` : b.hidden ? `${b.s.padEnd(18)} (vide/masquée)` :
      `${b.s.padEnd(18)} top=${String(b.top).padStart(6)}  left=${String(b.left).padStart(4)}  order=${b.order}`);
  await browser.close();
  return data;
}

const mob = await check("iPhone 14 (mobile)", { ...devices["iPhone 14"] });
await check("Desktop 1440px", { viewport: { width: 1440, height: 900 } });
const vis = mob.out.filter(b => !b.missing && !b.hidden);
const sorted = vis.every((b, i) => i === 0 || b.top >= vis[i - 1].top);
const ok = sorted && mob.scrollY === 0 && vis[0].s === ".f-galerie" && vis.every(b => b.order === "0");
console.log(`\nMOBILE: ordre ${sorted ? "CROISSANT ✓" : "DÉSORDONNÉ ✗"} · scrollY=${mob.scrollY} · 1re=${vis[0].s} · sans order=${vis.every(b => b.order === "0")}`);
console.log(ok ? "VALIDATION OK" : "VALIDATION ÉCHEC");
process.exit(ok ? 0 : 1);