import { readFileSync } from "node:fs";

function assert(condition, message) {
  if (!condition) throw new Error(message);
}

const overlaySource = readFileSync(
  "src/features/campaigns/components/MessagePreviewOverlay.tsx",
  "utf8"
);
const styles = readFileSync("src/styles/campaign-workspace.css", "utf8");

assert(
  overlaySource.includes("overlay-backdrop message-preview-backdrop"),
  "message previews expose their responsive backdrop hook"
);
assert(
  overlaySource.includes('type="button" className="modal-close" aria-label={closeLabel} title={closeLabel}'),
  "the close control has stable button semantics, an accessible name, and a tooltip"
);
assert(
  styles.includes("height: min(780px, calc(100dvh - 48px));"),
  "desktop previews use a stable responsive height"
);
assert(
  styles.includes("flex: 1 1 auto;") &&
    styles.includes("min-height: 0;") &&
    styles.includes("overflow: auto;") &&
    styles.includes("scrollbar-gutter: stable;"),
  "the preview body owns scrolling without moving the surrounding actions"
);
assert(
  styles.includes(".message-preview-modal .modal-footer") &&
    styles.includes("min-height: 68px;"),
  "the preview footer keeps a stable desktop action area"
);
assert(
  styles.includes("height: calc(100dvh - 16px);") &&
    styles.includes("height: clamp(210px, 38dvh, 360px);"),
  "small viewports use their available dynamic height"
);

console.log("Message preview overlay structure checks passed.");