/*
 * Before/After 슬라이더 + 4샷 그리드용 이미지.
 * ── Stitch booth_design_studio 산출 이미지(실 KINTEX 촬영본)를 public/mock/ 에 번들 ──
 *   · 실 RenderJob DONE 시 해당 타일/after는 실 imageUrl로 대체된다.
 *   · 번들 이미지도 "AI 생성 예상 이미지" 워터마크·고지문을 상시 노출한다(계약).
 * BEFORE_EMPTY_HALL 은 백엔드/번들 부재 시 인라인 SVG 폴백.
 */
function svgDataUri(svg: string): string {
  return `data:image/svg+xml;utf8,${encodeURIComponent(svg)}`;
}

const BASE = `${import.meta.env.BASE_URL}mock/booth_design_studio`;

/** Stitch 4샷 예시 이미지(번들). S1·S2·S3 채움, S4는 빈 상태(생성 유도). */
export const MOCK_SHOT_IMG: Record<string, string> = {
  S1: `${BASE}/img1.jpg`, // 부스 정면 (전시홀 내부)
  S2: `${BASE}/img2.jpg`, // 야간 점등
  S3: `${BASE}/img3.jpg`, // 통로 뷰
};

/** Before/After — after 기본 프리뷰(번들). */
export const AFTER_SAMPLE = `${BASE}/img1.jpg`;

/** 시공 전 — 빈 홀 콘크리트 바닥(격자) SVG 폴백. */
export const BEFORE_EMPTY_HALL = svgDataUri(
  `<svg xmlns='http://www.w3.org/2000/svg' width='640' height='360'>
    <rect width='640' height='360' fill='#d9d5cf'/>
    <g stroke='#b8b2a8' stroke-width='1'>
      ${Array.from({ length: 12 }, (_, i) => `<line x1='${i * 55}' y1='0' x2='${i * 55}' y2='360'/>`).join('')}
      ${Array.from({ length: 7 }, (_, i) => `<line x1='0' y1='${i * 55}' x2='640' y2='${i * 55}'/>`).join('')}
    </g>
    <text x='320' y='185' fill='#7a746a' font-family='sans-serif' font-size='18' text-anchor='middle'>시공 전 · 빈 홀 바닥</text>
  </svg>`,
);

/** 시공 후 자리 표시(S1 미생성·번들 부재). */
export const AFTER_PLACEHOLDER = svgDataUri(
  `<svg xmlns='http://www.w3.org/2000/svg' width='640' height='360'>
    <rect width='640' height='360' fill='#1c2536'/>
    <text x='320' y='185' fill='#8aa0c6' font-family='sans-serif' font-size='18' text-anchor='middle'>예상 사진 생성 후 표시</text>
  </svg>`,
);
