// ==========================================
// Tab Content Renderers - Other Tabs
// ==========================================
// Functions for rendering Summary, IMPL Plan, Review, and Lite Context tabs

// ==========================================
// Summary Tab Rendering
// ==========================================

function renderSummaryContent(summaries) {
  if (!summaries || summaries.length === 0) {
    return `
      <div class="tab-empty-state">
        <div class="empty-icon"><i data-lucide="file-text" class="w-12 h-12"></i></div>
        <div class="empty-title">No Summaries</div>
        <div class="empty-text">No summaries found in .summaries/</div>
      </div>
    `;
  }

  // Store summaries in global variable for modal access
  window._currentSummaries = summaries;

  return `
    <div class="summary-tab-content space-y-4">
      ${summaries.map((s, idx) => {
        const normalizedContent = normalizeLineEndings(s.content || '');
        // Extract first 3 lines for preview
        const previewLines = normalizedContent.split('\n').slice(0, 3).join('\n');
        const hasMore = normalizedContent.split('\n').length > 3;
        return `
          <div class="summary-item-card">
            <div class="summary-item-header">
              <h4 class="summary-item-title"><i data-lucide="file-text" class="w-4 h-4 inline mr-1"></i>${escapeHtml(s.name || 'Summary')}</h4>
              <button class="btn-view-modal" onclick="openMarkdownModal('${escapeHtml(s.name || 'Summary')}', window._currentSummaries[${idx}].content, 'markdown');">
                <i data-lucide="eye" class="w-4 h-4 inline mr-1"></i>View
              </button>
            </div>
            <div class="summary-item-preview">
              <pre class="summary-preview-text">${escapeHtml(previewLines)}${hasMore ? '\n...' : ''}</pre>
            </div>
          </div>
        `;
      }).join('')}
    </div>
  `;
}

// ==========================================
// IMPL Plan Tab Rendering
// ==========================================

function renderImplPlanContent(implPlan) {
  if (!implPlan) {
    return `
      <div class="tab-empty-state">
        <div class="empty-icon"><i data-lucide="ruler" class="w-12 h-12"></i></div>
        <div class="empty-title">No IMPL Plan</div>
        <div class="empty-text">No IMPL_PLAN.md found for this session.</div>
      </div>
    `;
  }

  // Normalize and store in global variable for modal access
  const normalizedContent = normalizeLineEndings(implPlan);
  window._currentImplPlan = normalizedContent;

  // Extract first 5 lines for preview
  const previewLines = normalizedContent.split('\n').slice(0, 5).join('\n');
  const hasMore = normalizedContent.split('\n').length > 5;

  return `
    <div class="impl-plan-tab-content">
      <div class="impl-plan-card">
        <div class="impl-plan-header">
          <h3 class="impl-plan-title"><i data-lucide="ruler" class="w-5 h-5 inline mr-2"></i>Implementation Plan</h3>
          <button class="btn-view-modal" onclick="openMarkdownModal('IMPL_PLAN.md', window._currentImplPlan, 'markdown')">
            <i data-lucide="eye" class="w-4 h-4 inline mr-1"></i>View
          </button>
        </div>
        <div class="impl-plan-preview">
          <pre class="impl-plan-preview-text">${escapeHtml(previewLines)}${hasMore ? '\n...' : ''}</pre>
        </div>
      </div>
    </div>
  `;
}

// ==========================================
// Review Tab Rendering
// ==========================================
// NOTE: Enhanced review tab with multi-select, filtering, and preview panel
// is now in _review_tab.js - renderReviewContent() function defined there

// ==========================================
// Lite Context Tab Rendering
// ==========================================

function renderLiteContextContent(context, explorations, session, diagnoses) {
  const plan = session.plan || {};
  let sections = [];

  // Render explorations if available (from exploration-*.json files)
  if (explorations && explorations.manifest) {
    sections.push(renderExplorationContext(explorations));
  }

  // Render diagnoses if available (from diagnosis-*.json files)
  if (diagnoses && diagnoses.manifest) {
    sections.push(renderDiagnosisContext(diagnoses));
  }

  // If we have context from context-package.json
  if (context) {
    sections.push(`
      <div class="context-package-section">
        <div class="collapsible-section">
          <div class="collapsible-header">
            <span class="collapse-icon">▶</span>
            <span class="section-label">Context Package</span>
          </div>
          <div class="collapsible-content collapsed">
            <pre class="json-content">${escapeHtml(JSON.stringify(context, null, 2))}</pre>
          </div>
        </div>
      </div>
    `);
  }

  // Fallback: show context from plan
  if (plan.focus_paths?.length || plan.summary) {
    sections.push(`
      <div class="plan-context-section">
        ${plan.summary ? `
          <div class="context-section">
            <h4>Summary</h4>
            <p>${escapeHtml(plan.summary)}</p>
          </div>
        ` : ''}
        ${plan.focus_paths?.length ? `
          <div class="context-section">
            <h4>Focus Paths</h4>
            <div class="path-tags">
              ${plan.focus_paths.map(p => `<span class="path-tag">${escapeHtml(p)}</span>`).join('')}
            </div>
          </div>
        ` : ''}
      </div>
    `);
  }

  // If we have any sections, wrap them
  if (sections.length > 0) {
    return `<div class="context-tab-content">${sections.join('')}</div>`;
  }

  return `
    <div class="tab-empty-state">
      <div class="empty-icon"><i data-lucide="package" class="w-12 h-12"></i></div>
      <div class="empty-title">No Context Data</div>
      <div class="empty-text">No context-package.json, exploration files, or diagnosis files found for this session.</div>
    </div>
  `;
}


// ==========================================
// Exploration Context Rendering
// ==========================================

function renderExplorationContext(explorations) {
  if (!explorations || !explorations.manifest) {
    return '';
  }

  const manifest = explorations.manifest;
  const data = explorations.data || {};

  let sections = [];

  // Header with manifest info
  sections.push(`
    <div class="exploration-header">
      <h4>${escapeHtml(manifest.task_description || 'Exploration Context')}</h4>
      <div class="exploration-meta">
        <span class="meta-item">Complexity: <strong>${escapeHtml(manifest.complexity || 'N/A')}</strong></span>
        <span class="meta-item">Explorations: <strong>${manifest.exploration_count || 0}</strong></span>
      </div>
    </div>
  `);

  // Render each exploration angle as collapsible section
  const explorationOrder = ['architecture', 'dependencies', 'patterns', 'integration-points', 'testing'];
  const explorationTitles = {
    'architecture': '<i data-lucide="blocks" class="w-4 h-4 inline mr-1"></i>Architecture',
    'dependencies': '<i data-lucide="package" class="w-4 h-4 inline mr-1"></i>Dependencies',
    'patterns': '<i data-lucide="git-branch" class="w-4 h-4 inline mr-1"></i>Patterns',
    'integration-points': '<i data-lucide="plug" class="w-4 h-4 inline mr-1"></i>Integration Points',
    'testing': '<i data-lucide="flask-conical" class="w-4 h-4 inline mr-1"></i>Testing'
  };

  // Collect all angles from data (in case there are exploration angles not in our predefined list)
  const allAngles = [...new Set([...explorationOrder, ...Object.keys(data)])];

  for (const angle of allAngles) {
    const expData = data[angle];
    if (!expData) {
      continue;
    }

    const angleContent = renderExplorationAngle(angle, expData);

    sections.push(`
      <div class="exploration-section collapsible-section">
        <div class="collapsible-header">
          <span class="collapse-icon">▶</span>
          <span class="section-label">${explorationTitles[angle] || ('<i data-lucide="file-search" class="w-4 h-4 inline mr-1"></i>' + escapeHtml(angle.toUpperCase()))}</span>
        </div>
        <div class="collapsible-content collapsed">
          ${angleContent}
        </div>
      </div>
    `);
  }

  return `<div class="exploration-context">${sections.join('')}</div>`;
}

function renderExplorationAngle(angle, data) {
  let content = [];

  // Project structure - handle string or object
  if (data.project_structure) {
    content.push(renderExpField('Project Structure', data.project_structure));
  }

  // Relevant files
  if (data.relevant_files && data.relevant_files.length) {
    content.push(`
      <div class="exp-field">
        <label>Relevant Files (${data.relevant_files.length})</label>
        <div class="relevant-files-list">
          ${data.relevant_files.slice(0, 10).map(f => `
            <div class="file-item-exp">
              <div class="file-path"><code>${escapeHtml(f.path || '')}</code></div>
              <div class="file-relevance">Relevance: ${f.relevance ? (f.relevance * 100).toFixed(0) : 0}%</div>
              ${f.rationale ? `<div class="file-rationale">${escapeHtml((f.rationale || "").substring(0, 200))}...</div>` : ''}
            </div>
          `).join('')}
          ${data.relevant_files.length > 10 ? `<div class="more-files">... and ${data.relevant_files.length - 10} more files</div>` : ''}
        </div>
      </div>
    `);
  }

  // Patterns - handle string or object
  if (data.patterns) {
    content.push(renderExpField('Patterns', data.patterns));
  }

  // Dependencies - handle string or object
  if (data.dependencies) {
    content.push(renderExpField('Dependencies', data.dependencies));
  }

  // Integration points - handle string or object
  if (data.integration_points) {
    content.push(renderExpField('Integration Points', data.integration_points));
  }

  // Constraints - handle string or object
  if (data.constraints) {
    content.push(renderExpField('Constraints', data.constraints));
  }

  // Clarification needs - handle array or object
  if (data.clarification_needs) {
    content.push(renderExpField('Clarification Needs', data.clarification_needs));
  }

  return content.join('') || '<p>No data available</p>';
}

// ==========================================
// Diagnosis Context Rendering
// ==========================================

function renderDiagnosisContext(diagnoses) {
  if (!diagnoses || !diagnoses.manifest) {
    return '';
  }

  const manifest = diagnoses.manifest;
  const data = diagnoses.data || {};

  let sections = [];

  // Header with manifest info
  sections.push(`
    <div class="diagnosis-header">
      <h4><i data-lucide="stethoscope" class="w-4 h-4 inline mr-1"></i> ${escapeHtml(manifest.task_description || 'Diagnosis Context')}</h4>
      <div class="diagnosis-meta">
        <span class="meta-item">Diagnoses: <strong>${manifest.diagnosis_count || 0}</strong></span>
      </div>
    </div>
  `);

  // Render each diagnosis angle as collapsible section
  const diagnosisOrder = ['root-cause', 'api-contracts', 'dataflow', 'performance', 'security', 'error-handling'];
  const diagnosisTitles = {
    'root-cause': '<i data-lucide="search" class="w-4 h-4 inline mr-1"></i>Root Cause',
    'api-contracts': '<i data-lucide="plug" class="w-4 h-4 inline mr-1"></i>API Contracts',
    'dataflow': '<i data-lucide="git-merge" class="w-4 h-4 inline mr-1"></i>Data Flow',
    'performance': '<i data-lucide="zap" class="w-4 h-4 inline mr-1"></i>Performance',
    'security': '<i data-lucide="shield" class="w-4 h-4 inline mr-1"></i>Security',
    'error-handling': '<i data-lucide="alert-circle" class="w-4 h-4 inline mr-1"></i>Error Handling'
  };

  // Collect all angles from data (in case there are diagnosis angles not in our predefined list)
  const allAngles = [...new Set([...diagnosisOrder, ...Object.keys(data)])];

  for (const angle of allAngles) {
    const diagData = data[angle];
    if (!diagData) {
      continue;
    }

    const angleContent = renderDiagnosisAngle(angle, diagData);

    sections.push(`
      <div class="diagnosis-section collapsible-section">
        <div class="collapsible-header">
          <span class="collapse-icon">▶</span>
          <span class="section-label">${diagnosisTitles[angle] || ('<i data-lucide="file-search" class="w-4 h-4 inline mr-1"></i>' + angle)}</span>
        </div>
        <div class="collapsible-content collapsed">
          ${angleContent}
        </div>
      </div>
    `);
  }

  return `<div class="diagnosis-context">${sections.join('')}</div>`;
}

function renderDiagnosisAngle(angle, data) {
  let content = [];

  // Summary/Overview
  if (data.summary || data.overview) {
    content.push(renderExpField('Summary', data.summary || data.overview));
  }

  // Root cause analysis
  if (data.root_cause || data.root_cause_analysis) {
    content.push(renderExpField('Root Cause', data.root_cause || data.root_cause_analysis));
  }

  // Issues/Findings
  if (data.issues && Array.isArray(data.issues)) {
    content.push(`
      <div class="exp-field">
        <label>Issues Found (${data.issues.length})</label>
        <div class="issues-list">
          ${data.issues.map(issue => {
            if (typeof issue === 'string') {
              return `<div class="issue-item">${escapeHtml(issue)}</div>`;
            } else {
              return `
                <div class="issue-item">
                  <div class="issue-title">${escapeHtml(issue.title || issue.description || 'Unknown')}</div>
                  ${issue.location ? `<div class="issue-location"><code>${escapeHtml(issue.location)}</code></div>` : ''}
                  ${issue.severity ? `<span class="severity-badge ${escapeHtml(issue.severity)}">${escapeHtml(issue.severity)}</span>` : ''}
                </div>
              `;
            }
          }).join('')}
        </div>
      </div>
    `);
  }

  // Affected files
  if (data.affected_files && Array.isArray(data.affected_files)) {
    content.push(`
      <div class="exp-field">
        <label>Affected Files (${data.affected_files.length})</label>
        <div class="path-tags">
          ${data.affected_files.map(f => {
            const filePath = typeof f === 'string' ? f : (f.path || f.file || '');
            return `<span class="path-tag">${escapeHtml(filePath)}</span>`;
          }).join('')}
        </div>
      </div>
    `);
  }

  // Recommendations
  if (data.recommendations && Array.isArray(data.recommendations)) {
    content.push(`
      <div class="exp-field">
        <label>Recommendations</label>
        <ol class="recommendations-list">
          ${data.recommendations.map(rec => {
            const recText = typeof rec === 'string' ? rec : (rec.description || rec.action || '');
            return `<li>${escapeHtml(recText)}</li>`;
          }).join('')}
        </ol>
      </div>
    `);
  }

  // API Contracts (specific to api-contracts diagnosis)
  if (data.contracts && Array.isArray(data.contracts)) {
    content.push(renderExpField('API Contracts', data.contracts));
  }

  // Data flow (specific to dataflow diagnosis)
  if (data.dataflow || data.data_flow) {
    content.push(renderExpField('Data Flow', data.dataflow || data.data_flow));
  }

  return content.join('') || '<p>No diagnosis data available</p>';
}