/**
 * 회사 기본정보 화면 - 컴포넌트 렌더링 비율 정밀 분석
 * 
 * 사용법: 브라우저에서 회사 기본정보 화면을 연 상태에서
 * F12 → Console 탭 → 이 스크립트 전체를 붙여넣고 Enter
 */

(function analyzeLayout() {
  const results = { part1: null, part2: null };

  // ========== Part 1: DesktopCanvasRenderer 구조 확인 ==========
  const runtime = document.querySelector('[data-screen-runtime="true"]');
  if (!runtime) {
    console.warn('⚠️ [data-screen-runtime="true"] 요소를 찾을 수 없습니다.');
    console.log('대안: ScreenModal 기반 렌더링이거나 다른 구조일 수 있습니다.');
    results.part1 = { error: 'Runtime not found' };
  } else {
    const rect = runtime.getBoundingClientRect();
    const inner = runtime.firstElementChild;

    results.part1 = {
      runtimeContainer: { width: rect.width, height: rect.height },
      innerDiv: null,
      components: [],
    };

    if (inner) {
      const style = inner.style;
      results.part1.innerDiv = {
        width: style.width,
        height: style.height,
        transform: style.transform,
        transformOrigin: style.transformOrigin,
        position: style.position,
      };

      const comps = inner.querySelectorAll('[data-component-id]');
      comps.forEach((comp) => {
        const s = comp.style;
        const r = comp.getBoundingClientRect();
        results.part1.components.push({
          type: comp.getAttribute('data-component-type'),
          id: comp.getAttribute('data-component-id'),
          stylePos: `(${s.left}, ${s.top})`,
          styleSize: `${s.width} x ${s.height}`,
          renderedSize: `${Math.round(r.width)} x ${Math.round(r.height)}`,
        });
      });
    } else {
      // ResponsiveGridRenderer (flex 기반) 구조일 수 있음 - 행 단위로 확인
      const rows = runtime.querySelectorAll(':scope > div');
      results.part1.rows = [];
      rows.forEach((row, i) => {
        const children = row.children;
        const rowData = { rowIndex: i, childCount: children.length, children: [] };
        Array.from(children).forEach((child, j) => {
          const cs = window.getComputedStyle(child);
          const r = child.getBoundingClientRect();
          rowData.children.push({
            type: child.getAttribute('data-component-type') || 'unknown',
            width: Math.round(r.width),
            height: Math.round(r.height),
            flexGrow: cs.flexGrow,
            flexBasis: cs.flexBasis,
          });
        });
        results.part1.rows.push(rowData);
      });
    }
  }

  // ========== Part 2: wrapper vs child 크기 확인 ==========
  const comps = document.querySelectorAll('[data-component-id]');
  results.part2 = [];
  comps.forEach((comp) => {
    const type = comp.getAttribute('data-component-type');
    const child = comp.firstElementChild;
    if (child) {
      const childRect = child.getBoundingClientRect();
      const compRect = comp.getBoundingClientRect();
      results.part2.push({
        type,
        wrapper: `${Math.round(compRect.width)}x${Math.round(compRect.height)}`,
        child: `${Math.round(childRect.width)}x${Math.round(childRect.height)}`,
        overflow: childRect.width > compRect.width ? 'YES' : 'no',
      });
    }
  });

  // ========== 결과 출력 ==========
  console.log('========== Part 1: Runtime 구조 ==========');
  console.log(JSON.stringify(results.part1, null, 2));

  console.log('\n========== Part 2: Wrapper vs Child ==========');
  results.part2.forEach((r) => {
    console.log(`${r.type}: wrapper=${r.wrapper}, child=${r.child}, overflow=${r.overflow}`);
  });

  // scale 값 추출 (transform에서)
  if (results.part1?.innerDiv?.transform) {
    const m = results.part1.innerDiv.transform.match(/scale\(([^)]+)\)/);
    if (m) console.log('\n📐 Scale 값:', m[1]);
  }

  return results;
})();