/* ============================================================
   Export Panel (right side — integrated in right panel for block/creature)
   Also contains the variant generator, seam checker, etc.
   ============================================================ */

function MCToolsPanel({ view, project, onExport }) {
  const [seamErrors, setSeamErrors] = React.useState(null);

  const runSeamCheck = () => {
    if (!AppState.faces || !AppState.textures) {
      showToast('無法執行接縫檢查', 'warning');
      return;
    }
    const errors = [];
    const faces = AppState.faces;
    const textures = AppState.textures;

    // Check each face's edges
    FACE_NAMES.forEach(face => {
      const texId = faces[face];
      const tex = textures[texId];
      if (!tex) return;
      const canvas = tex.canvas;
      const ctx = canvas.getContext('2d');
      const w = canvas.width;
      const h = canvas.height;
      const imgData = ctx.getImageData(0, 0, w, h);
      const d = imgData.data;

      // Check border transparency (first check that edges aren't fully transparent for solid blocks)
      let topTransparent = true;
      let bottomTransparent = true;
      let leftTransparent = true;
      let rightTransparent = true;

      for (let x = 0; x < w; x++) {
        if (d[(0 * w + x) * 4 + 3] > 0) topTransparent = false;
        if (d[((h-1) * w + x) * 4 + 3] > 0) bottomTransparent = false;
      }
      for (let y = 0; y < h; y++) {
        if (d[(y * w + 0) * 4 + 3] > 0) leftTransparent = false;
        if (d[(y * w + w - 1) * 4 + 3] > 0) rightTransparent = false;
      }

      if (topTransparent || bottomTransparent || leftTransparent || rightTransparent) {
        errors.push(`${FACE_LABELS[face]}: 邊緣有透明像素，可能造成接縫`);
      }
    });

    // Check adjacent face color continuity (simplified)
    const adjacentPairs = [
      ['north', 'east'],
      ['east', 'south'],
      ['south', 'west'],
      ['west', 'north'],
      ['top', 'north'],
      ['bottom', 'north'],
    ];
    adjacentPairs.forEach(([a, b]) => {
      const texA = textures[faces[a]];
      const texB = textures[faces[b]];
      if (!texA || !texB) return;
      // Quick check: compare edge colors (rough)
      // For simplicity, just check if they share texture (linked = fine)
      if (faces[a] !== faces[b]) {
        // Different textures — just a warning
        // errors.push(`${a}/${b}: 使用不同材質，請確認接縫`);
      }
    });

    setSeamErrors(errors);
    if (errors.length === 0) {
      showToast('接縫檢查通過 ✓', 'success');
    } else {
      showToast(`發現 ${errors.length} 個接縫問題`, 'warning');
    }
  };

  return React.createElement('div', { className: 'panel-section' },
    React.createElement('div', { className: 'panel-section__header' },
      React.createElement('span', null, 'MC 工具'),
    ),
    React.createElement('div', { className: 'panel-section__body' },
      React.createElement('div', { className: 'mc-helpers', style: { gap: '8px' } },

        view === 'block' && React.createElement('div', { className: 'mc-helpers__group' },
          React.createElement('div', { className: 'mc-helpers__title' }, '品質檢查'),
          React.createElement('button', {
            className: 'mc-helper-btn',
            style: { width: '100%', padding: '6px' },
            onClick: runSeamCheck,
          },
            React.createElement(SvgIcon, { name: 'Sparkles', size: 10 }),
            ' 執行接縫檢查',
          ),
          seamErrors && seamErrors.length > 0 && React.createElement('div', {
            style: {
              marginTop: '6px', padding: '6px', fontSize: '10px',
              background: 'rgba(240, 160, 32, 0.1)',
              border: '1px solid var(--accent-amber)',
              borderRadius: 'var(--radius-sm)',
              color: 'var(--accent-amber)',
              fontFamily: 'var(--font-mono)',
            }
          },
            seamErrors.map((e, i) => React.createElement('div', { key: i }, `• ${e}`))
          ),
        ),

        React.createElement('div', { className: 'mc-helpers__group' },
          React.createElement('div', { className: 'mc-helpers__title' }, '匯出'),
          React.createElement('button', {
            className: 'btn btn--primary',
            style: { width: '100%', justifyContent: 'center' },
            onClick: onExport,
          },
            React.createElement(SvgIcon, { name: 'Download', size: 12 }),
            ' 匯出 PNG',
          ),
          React.createElement('button', {
            className: 'btn btn--secondary',
            style: { width: '100%', justifyContent: 'center', marginTop: '4px' },
            onClick: () => window.exportResourcePack?.(),
          },
            React.createElement(SvgIcon, { name: 'Folder', size: 12 }),
            ' 匯出資源包',
          ),
          React.createElement('div', {
            style: { fontSize: '10px', color: 'var(--text-muted)', marginTop: 4, lineHeight: 1.4 },
          }, view === 'pixel' ? 'GUI 會歸檔到 assets/minecraft/textures/gui/' : '依專案類型寫入材質／模型路徑'),
        ),

        React.createElement('div', { className: 'mc-helpers__group' },
          React.createElement('div', { className: 'mc-helpers__title' }, '模式'),
          React.createElement('div', { className: 'toggle-row' },
            React.createElement('span', { className: 'toggle-label' }, '新手模式'),
            React.createElement('div', {
              className: 'toggle-switch' + (AppState.beginnerMode ? ' on' : ''),
              onClick: () => setState(s => { s.beginnerMode = !s.beginnerMode; }),
            }),
          ),
        ),
      ),
    ),
  );
}

window.MCToolsPanel = MCToolsPanel;