(() => {
  // Wait for core
  if (!window.__xipeRegisterMode) {
    console.warn('[X-IPE Mockup] Core not loaded');
    return;
  }

  window.__xipeRegisterMode('mockup', function MockupModeInit(container) {
    let areaCounter = 0;
    let snapActive = false;
    let currentStep = 1;
    const MAX_AREAS = 20;

    const SEMANTIC_TAGS = new Set(['SECTION', 'NAV', 'ARTICLE', 'ASIDE', 'HEADER', 'FOOTER', 'MAIN', 'FIGURE']);

    const CAPTURE_PROPS = [
      'display', 'position', 'flex-direction', 'justify-content', 'align-items',
      'grid-template-columns', 'grid-template-rows',
      'width', 'height', 'min-width', 'max-width', 'min-height', 'max-height',
      'margin', 'padding', 'border', 'border-radius',
      'background', 'background-color', 'background-image',
      'color', 'font-family', 'font-size', 'font-weight', 'line-height',
      'box-shadow', 'opacity', 'overflow', 'z-index'
    ];

    // ===== Mockup Styles =====
    const mockupStyle = document.createElement('style');
    mockupStyle.textContent = `
      .xipe-snap-overlay { position: fixed; border: 2px dashed #10b981; pointer-events: none; z-index: 2147483646; }
      .xipe-tag-badge { position: absolute; top: -22px; left: 0; background: #10b981; color: white; font-size: 10px; padding: 2px 6px; border-radius: 4px; font-family: 'Space Mono', monospace; pointer-events: none; }
      .xipe-drag-handle { position: absolute; width: 8px; height: 8px; background: #10b981; pointer-events: auto; border-radius: 1px; }
      .xipe-area-row { display: flex; align-items: center; gap: 6px; padding: 6px 0; font-size: 11px; color: #e2e8f0; border-bottom: 1px solid rgba(255,255,255,0.06); }
      .xipe-area-tag { background: rgba(16,185,129,0.15); color: #10b981; padding: 1px 5px; border-radius: 4px; font-size: 9px; font-family: 'Space Mono', monospace; }
      .xipe-area-selector { color: #64748b; font-size: 9px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 120px; }
      .xipe-area-dims { color: #94a3b8; font-size: 9px; }
      .xipe-area-remove { background: none; border: none; color: #94a3b8; cursor: pointer; font-size: 12px; margin-left: auto; opacity: 0; transition: opacity 0.2s; font-family: inherit; }
      .xipe-area-row:hover .xipe-area-remove { opacity: 1; }
      .xipe-instruction-input { width: 100%; padding: 4px 8px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.15); background: rgba(255,255,255,0.05); color: #e2e8f0; font-size: 10px; margin-top: 4px; font-family: inherit; }
      .xipe-step-indicator { display: flex; gap: 4px; padding: 8px 0; margin-bottom: 8px; }
      .xipe-step-dot { flex: 1; height: 3px; border-radius: 2px; background: rgba(255,255,255,0.1); }
      .xipe-step-dot.xipe-active { background: #10b981; }
      .xipe-step-label { font-size: 11px; color: #94a3b8; margin-bottom: 8px; }
      .xipe-btn { display: block; width: 100%; padding: 8px; border: none; border-radius: 8px; font-size: 12px; font-weight: 600; cursor: pointer; text-align: center; transition: all 0.2s; margin-top: 8px; font-family: inherit; }
      .xipe-btn-primary { background: #10b981; color: white; }
      .xipe-btn-primary:hover { background: #059669; }
      .xipe-btn-primary:disabled { background: #374151; color: #6b7280; cursor: not-allowed; }
      .xipe-btn-processing { position: relative; pointer-events: none; opacity: 0.7; }
      .xipe-btn-processing::after { content: ''; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; border: 2px solid rgba(255,255,255,0.3); border-top-color: #fff; border-radius: 50%; animation: xipe-spin 0.6s linear infinite; }
      @keyframes xipe-spin { to { transform: translateY(-50%) rotate(360deg); } }
      .xipe-btn-secondary { background: rgba(255,255,255,0.08); color: #e2e8f0; }
      .xipe-nav-buttons { display: flex; gap: 6px; margin-top: 10px; }
      .xipe-nav-buttons .xipe-btn { flex: 1; }
    `;
    document.head.appendChild(mockupStyle);

    const overlays = [];

    // ===== Smart-Snap =====
    function findSemanticContainer(el) {
      let current = el;
      let depth = 0;
      while (current && current !== document.body && depth < 5) {
        if (SEMANTIC_TAGS.has(current.tagName) || current.getAttribute('role')) return current;
        current = current.parentElement;
        depth++;
      }
      // Fallback: div with dimensions > 50x50
      current = el;
      depth = 0;
      while (current && current !== document.body && depth < 5) {
        if (current.tagName === 'DIV' && current.offsetWidth > 50 && current.offsetHeight > 50) return current;
        current = current.parentElement;
        depth++;
      }
      return null;
    }

    function handleSnapClick(e) {
      if (!snapActive) return;
      if (e.target.closest('.xipe-toolbar') || e.target.closest('.xipe-snap-overlay')) return;
      e.preventDefault();
      e.stopPropagation();

      const target = findSemanticContainer(e.target);
      if (!target || target === document.body || target === document.documentElement) {
        window.__xipeToast('Please click a more specific element.', 'error');
        return;
      }

      if (window.__xipeRefData.areas.length >= MAX_AREAS) {
        window.__xipeToast('Maximum 20 areas per session.', 'error');
        return;
      }

      captureArea(target);
      // Toggle off snap after each selection so user must re-enable
      snapActive = false;
      renderAreaList();
    }
    document.addEventListener('click', handleSnapClick, true);

    // ===== Area Capture =====
    function captureArea(el) {
      areaCounter++;
      const id = `area-${areaCounter}`;
      const rect = el.getBoundingClientRect();
      const snap_selector = window.__xipeGenerateSelector(el);
      const snap_tag = el.tagName.toLowerCase();

      const styles = window.getComputedStyle(el);
      const computedStyles = {};
      CAPTURE_PROPS.forEach(p => { computedStyles[p] = styles.getPropertyValue(p); });

      // Screenshot crop from viewport canvas
      let screenshotDataurl = null;
      if (window.__xipeViewportScreenshot) {
        try {
          const crop = document.createElement('canvas');
          crop.width = Math.max(1, rect.width);
          crop.height = Math.max(1, rect.height);
          const ctx = crop.getContext('2d');
          const img = new Image();
          img.src = window.__xipeViewportScreenshot;
          ctx.drawImage(img, rect.x, rect.y, rect.width, rect.height, 0, 0, rect.width, rect.height);
          screenshotDataurl = crop.toDataURL('image/png');
        } catch (err) { /* ignore crop errors */ }
      }

      const area = {
        id, snap_selector, snap_tag,
        bounding_box: { x: rect.x, y: rect.y, width: rect.width, height: rect.height },
        screenshot_dataurl: screenshotDataurl,
        html_css: { level: 'minimal', computed_styles: computedStyles, outer_html: null },
        instruction: '',
        agent_analysis: null
      };
      window.__xipeRefData.areas.push(area);
      showSnapOverlay(rect, snap_tag, snap_selector);
      renderAreaList();
      window.__xipeToast(`Selected: area-${areaCounter}`, 'info', 2000);
    }

    // ===== Snap Overlay with Drag Handles =====
    function showSnapOverlay(rect, tag, selector) {
      const overlay = document.createElement('div');
      overlay.className = 'xipe-snap-overlay';
      overlay.style.cssText = `left:${rect.x}px;top:${rect.y}px;width:${rect.width}px;height:${rect.height}px;`;

      const badge = document.createElement('span');
      badge.className = 'xipe-tag-badge';
      badge.textContent = tag;
      overlay.appendChild(badge);

      const positions = [
        { x: 0, y: 0, cursor: 'nw-resize' },
        { x: 0.5, y: 0, cursor: 'n-resize' },
        { x: 1, y: 0, cursor: 'ne-resize' },
        { x: 1, y: 0.5, cursor: 'e-resize' },
        { x: 1, y: 1, cursor: 'se-resize' },
        { x: 0.5, y: 1, cursor: 's-resize' },
        { x: 0, y: 1, cursor: 'sw-resize' },
        { x: 0, y: 0.5, cursor: 'w-resize' }
      ];
      positions.forEach(pos => {
        const handle = document.createElement('div');
        handle.className = 'xipe-drag-handle';
        handle.style.cssText = `left:${pos.x * 100}%;top:${pos.y * 100}%;margin:-4px;cursor:${pos.cursor};`;
        overlay.appendChild(handle);
      });

      document.body.appendChild(overlay);
      overlays.push(overlay);
    }

    // ===== Step UI =====
    const steps = ['Select Areas', 'Add Instructions', 'Analyze', 'Generate'];
    const stepContainers = [];

    function buildStepUI() {
      container.innerHTML = '';
      const indicator = document.createElement('div');
      indicator.className = 'xipe-step-indicator';
      steps.forEach((_, i) => {
        const dot = document.createElement('div');
        dot.className = `xipe-step-dot${i < currentStep ? ' xipe-active' : ''}`;
        indicator.appendChild(dot);
      });
      container.appendChild(indicator);

      const label = document.createElement('div');
      label.className = 'xipe-step-label';
      label.textContent = `Step ${currentStep}/4: ${steps[currentStep - 1]}`;
      container.appendChild(label);

      steps.forEach((_, i) => {
        const sc = document.createElement('div');
        sc.className = `xipe-step-${i + 1}`;
        sc.style.display = (i + 1) === currentStep ? 'block' : 'none';
        stepContainers[i] = sc;
        container.appendChild(sc);
      });

      // Nav buttons
      const nav = document.createElement('div');
      nav.className = 'xipe-nav-buttons';
      if (currentStep > 1) {
        const back = document.createElement('button');
        back.className = 'xipe-btn xipe-btn-secondary';
        back.textContent = 'Back';
        back.onclick = () => { currentStep--; buildStepUI(); renderStep(); };
        nav.appendChild(back);
      }
      if (currentStep < 4) {
        const next = document.createElement('button');
        next.className = 'xipe-btn xipe-btn-primary';
        next.textContent = 'Next';
        next.onclick = () => { currentStep++; snapActive = (currentStep === 1); buildStepUI(); renderStep(); };
        nav.appendChild(next);
      }
      container.appendChild(nav);
      renderStep();
    }

    function renderStep() {
      if (currentStep === 1) {
        snapActive = true;
        renderAreaList();
      } else if (currentStep === 2) {
        snapActive = false;
        renderInstructions();
      } else if (currentStep === 3) {
        snapActive = false;
        renderAnalyze();
      } else if (currentStep === 4) {
        snapActive = false;
        renderGenerate();
      }
    }

    // ===== Area List (Step 1) =====
    function renderAreaList() {
      const sc = stepContainers[0];
      if (!sc) return;
      sc.innerHTML = '';
      window.__xipeRefData.areas.forEach((area, i) => {
        const row = document.createElement('div');
        row.className = 'xipe-area-row';
        row.innerHTML = `<span class="xipe-area-tag">${area.id}</span><span class="xipe-area-selector">${area.snap_tag}</span><span class="xipe-area-dims">${Math.round(area.bounding_box.width)}×${Math.round(area.bounding_box.height)}</span>`;
        const rmBtn = document.createElement('button');
        rmBtn.className = 'xipe-area-remove';
        rmBtn.textContent = '×';
        rmBtn.onclick = () => {
          window.__xipeRefData.areas.splice(i, 1);
          if (overlays[i]) { overlays[i].remove(); overlays.splice(i, 1); }
          renderAreaList();
        };
        row.appendChild(rmBtn);
        // Hover highlight
        row.addEventListener('mouseenter', () => {
          if (overlays[i]) overlays[i].style.borderColor = '#f59e0b';
        });
        row.addEventListener('mouseleave', () => {
          if (overlays[i]) overlays[i].style.borderColor = '#10b981';
        });
        sc.appendChild(row);
      });
      if (window.__xipeRefData.areas.length === 0) {
        sc.innerHTML = '<div style="color:#64748b;font-size:11px;text-align:center;padding:20px">Click on the page to select areas</div>';
      }
    }

    // ===== Instructions (Step 2) =====
    function renderInstructions() {
      const sc = stepContainers[1];
      if (!sc) return;
      sc.innerHTML = '';
      window.__xipeRefData.areas.forEach((area) => {
        const wrapper = document.createElement('div');
        wrapper.style.marginBottom = '8px';
        wrapper.innerHTML = `<div class="xipe-area-row"><span class="xipe-area-tag">${area.id}</span><span class="xipe-area-selector">${area.snap_tag}</span></div>`;
        const input = document.createElement('input');
        input.className = 'xipe-instruction-input';
        input.placeholder = 'Add notes (e.g., sticky header, animated)';
        input.value = area.instruction;
        input.addEventListener('input', (e) => { area.instruction = e.target.value; });
        wrapper.appendChild(input);
        sc.appendChild(wrapper);
      });
      if (window.__xipeRefData.areas.length === 0) {
        sc.innerHTML = '<div style="color:#64748b;font-size:11px;text-align:center;padding:20px">No areas selected. Go back to Step 1.</div>';
      }
    }

    // ===== Read-only area summary for steps 3/4 =====
    function renderAreaSummary(sc) {
      window.__xipeRefData.areas.forEach((area) => {
        const row = document.createElement('div');
        row.className = 'xipe-area-row';
        row.innerHTML = `<span class="xipe-area-tag">${area.id}</span><span class="xipe-area-selector">${area.snap_tag}</span><span class="xipe-area-dims">${Math.round(area.bounding_box.width)}×${Math.round(area.bounding_box.height)}</span>`;
        sc.appendChild(row);
      });
    }

    // ===== Analyze (Step 3) =====
    function renderAnalyze() {
      const sc = stepContainers[2];
      if (!sc) return;
      sc.innerHTML = '';
      const summary = document.createElement('div');
      summary.style.cssText = 'color:#e2e8f0;font-size:11px;margin-bottom:12px';
      summary.textContent = `${window.__xipeRefData.areas.length} areas ready for analysis`;
      sc.appendChild(summary);

      renderAreaSummary(sc);

      const btn = document.createElement('button');
      btn.className = 'xipe-btn xipe-btn-primary';
      btn.textContent = 'Analyze';
      btn.setAttribute('data-xipe-analyze', 'true');
      btn.disabled = window.__xipeRefData.areas.length === 0;
      btn.onclick = () => {
        window.__xipeRefData.mode = 'mockup';
        window.__xipeRefData.action = 'analyze';
        window.__xipeAnalyzeEnabled = false;
        window.__xipeGenerateMockupEnabled = false;
        btn.disabled = true;
        btn.classList.add('xipe-btn-processing');
        window.__xipeRefReady = true;
        window.__xipeToast('Analyzing areas...', 'progress');
      };
      sc.appendChild(btn);
    }

    // ===== Generate (Step 4) =====
    function renderGenerate() {
      const sc = stepContainers[3];
      if (!sc) return;
      sc.innerHTML = '';
      const summary = document.createElement('div');
      summary.style.cssText = 'color:#e2e8f0;font-size:11px;margin-bottom:12px';
      summary.textContent = `Ready to generate mockup from ${window.__xipeRefData.areas.length} areas`;
      sc.appendChild(summary);

      renderAreaSummary(sc);

      const btn = document.createElement('button');
      btn.className = 'xipe-btn xipe-btn-primary';
      btn.textContent = 'Generate Mockup';
      btn.setAttribute('data-xipe-generate', 'true');
      btn.disabled = window.__xipeRefData.areas.length === 0;
      if (btn.disabled) btn.title = 'Select at least one area first.';
      btn.onclick = () => {
        window.__xipeRefData.mode = 'mockup';
        window.__xipeRefData.action = 'generate';
        window.__xipeGenerateMockupEnabled = false;
        btn.disabled = true;
        btn.classList.add('xipe-btn-processing');
        window.__xipeRefReady = true;
        window.__xipeToast('Generating mockup...', 'progress');
      };
      sc.appendChild(btn);
    }

    // ===== Button Polling (FR-M14, v2.1) =====
    setInterval(() => {
      const analyzeBtn = container.querySelector('[data-xipe-analyze]');
      const generateBtn = container.querySelector('[data-xipe-generate]');
      if (analyzeBtn && window.__xipeAnalyzeEnabled) {
        analyzeBtn.disabled = false;
        analyzeBtn.classList.remove('xipe-btn-processing');
      }
      if (generateBtn && window.__xipeGenerateMockupEnabled) {
        generateBtn.disabled = false;
        generateBtn.classList.remove('xipe-btn-processing');
      }
    }, 500);

    buildStepUI();
  });
})();
