function renderGitPanel(container, { gitStatus, _gitDiff, gitStage, gitCommit, gitLog }) {
  container.innerHTML = `
        <div class="git-panel">
            <div class="git-section">
                <h4 class="git-section-title">Changes</h4>
                <div class="git-changes" id="git-changes">
                    <p class="git-loading">Loading...</p>
                </div>
            </div>
            <div class="git-section">
                <h4 class="git-section-title">Commit</h4>
                <textarea class="git-commit-input" id="git-commit-msg" placeholder="Commit message..." rows="3"></textarea>
                <button class="git-commit-btn" id="git-commit-btn">Commit</button>
            </div>
            <div class="git-section">
                <h4 class="git-section-title">Recent Commits</h4>
                <div class="git-log" id="git-log"></div>
            </div>
        </div>
    `;

  loadGitStatus();

  async function loadGitStatus() {
    const status = await gitStatus();
    const changesEl = document.getElementById('git-changes');
    if (!status || !changesEl) return;

    if (status.error) {
      changesEl.innerHTML = `<p class="git-info">${status.error}</p>`;
      return;
    }

    const files = [
      ...status.modified.map((f) => ({ file: f, status: 'M', color: '#f59e0b' })),
      ...status.not_added.map((f) => ({ file: f, status: '?', color: '#6b7280' })),
      ...status.created.map((f) => ({ file: f, status: 'A', color: '#10b981' })),
      ...status.deleted.map((f) => ({ file: f, status: 'D', color: '#ef4444' })),
      ...status.staged.map((f) => ({ file: f, status: 'S', color: '#3b82f6' })),
    ];

    if (files.length === 0) {
      changesEl.innerHTML = '<p class="git-info">No changes</p>';
    } else {
      changesEl.innerHTML = files
        .map(
          (f) => `
                <div class="git-file" data-file="${f.file}">
                    <span class="git-file-status" style="color:${f.color}">${f.status}</span>
                    <span class="git-file-name">${f.file}</span>
                    <button class="git-stage-btn" data-file="${f.file}" title="Stage file">+</button>
                </div>
            `
        )
        .join('');

      changesEl.querySelectorAll('.git-stage-btn').forEach((btn) => {
        btn.addEventListener('click', async (e) => {
          e.stopPropagation();
          await gitStage([btn.dataset.file]);
          loadGitStatus();
        });
      });
    }

    // Load log
    const log = await gitLog();
    const logEl = document.getElementById('git-log');
    if (log && logEl) {
      logEl.innerHTML =
        (log.all || [])
          .slice(0, 10)
          .map(
            (entry) => `
                <div class="git-log-entry">
                    <div class="git-log-msg">${entry.message}</div>
                    <div class="git-log-meta">${entry.date?.substring(0, 10) || ''} &middot; ${entry.author_name || ''}</div>
                </div>
            `
          )
          .join('') || '<p class="git-info">No commits</p>';
    }
  }

  document.getElementById('git-commit-btn')?.addEventListener('click', async () => {
    const msg = document.getElementById('git-commit-msg')?.value?.trim();
    if (!msg) return;
    await gitCommit(msg);
    document.getElementById('git-commit-msg').value = '';
    loadGitStatus();
  });
}

module.exports = { renderGitPanel };