'use strict';

const { escapeHtml } = require('../utils');
const { COLORS } = require('./helpers');

function renderPaginatedTable(tableId, emptyCols, rowsHtml, totalRows, prevLabel, nextLabel, pagerFn) {
  return `
    <table class="calibration-table" id="${tableId}">
      ${rowsHtml}
    </table>
    ${totalRows > 20 ? `
    <div style="display:flex;align-items:center;gap:8px;margin-top:12px">
      <button class="btn btn-sm btn-archive" onclick="${pagerFn}(-1)" id="${tableId}-prev" disabled>${prevLabel}</button>
      <span style="font-size:12px;color:var(--text-muted)" id="${tableId}-page-info"></span>
      <button class="btn btn-sm btn-archive" onclick="${pagerFn}(1)" id="${tableId}-next">${nextLabel}</button>
    </div>
    <script>
    (function(){
      var PAGE_SIZE=20, page=0;
      var rows=document.querySelectorAll('#${tableId} tbody tr');
      var total=rows.length, pages=Math.ceil(total/PAGE_SIZE);
      function show(){
        rows.forEach(function(r,i){r.style.display=(i>=page*PAGE_SIZE&&i<(page+1)*PAGE_SIZE)?'':'none';});
        document.getElementById('${tableId}-prev').disabled=page===0;
        document.getElementById('${tableId}-next').disabled=page>=pages-1;
        document.getElementById('${tableId}-page-info').textContent='Page '+(page+1)+' of '+pages;
      }
      window.${pagerFn}=function(d){page=Math.max(0,Math.min(pages-1,page+d));show();};
      show();
    })();
    </script>` : ''}`;
}

function renderActivityLog(data) {
  if (!data) return '<div class="empty">No activity log data available.</div>';
  const { recentEvents } = data;
  const EVENT_LABELS = {
    stage_change: 'Pipeline',
    outreach: 'Outreach',
    status_change: 'Status',
  };
  const STAGE_DISPLAY = { applied: 'Applied', phone_screen: 'Phone Screen', interview: 'Interview', onsite: 'Onsite', offer: 'Offer', rejected: 'Rejected', reached_out: 'Reached Out', archived: 'Archived' };
  const eventRows = (recentEvents || []).map(e => {
    const from = STAGE_DISPLAY[e.from_value] || e.from_value || '\u2014';
    const to = STAGE_DISPLAY[e.to_value] || e.to_value || '\u2014';
    const date = e.created_at ? new Date(e.created_at.endsWith('Z') ? e.created_at : e.created_at + 'Z').toLocaleDateString('en-US', { month: 'short', day: 'numeric', hour: 'numeric', minute: '2-digit' }) : '';
    return `
      <tr>
        <td style="color:${COLORS.muted};font-size:11px;white-space:nowrap;font-family:var(--font-mono)">${date}</td>
        <td><span style="background:rgba(168,85,247,0.1);color:#a855f7;padding:2px 6px;border-radius:4px;font-size:11px">${EVENT_LABELS[e.event_type] || e.event_type}</span></td>
        <td>${escapeHtml(e.company)}</td>
        <td>${from} &rarr; ${to}</td>
      </tr>`;
  }).join('');

  return `
<div class="analytics-wrap">
  <div class="analytics-section market-section">
    <h2 class="analytics-title">Activity Log</h2>
    <p class="analytics-hint"><span style="font-family:var(--font-mono)">${(recentEvents || []).length}</span> total events</p>
    ${renderPaginatedTable(
      'events-table',
      4,
      `<thead><tr><th>Time</th><th>Type</th><th>Company</th><th>Change</th></tr></thead><tbody>${eventRows || '<tr><td colspan="4" style="text-align:center;color:var(--text-muted)">No events yet</td></tr>'}</tbody>`,
      (recentEvents || []).length,
      '&larr; Newer',
      'Older &rarr;',
      'pageEvents'
    )}
  </div>
</div>`;
}

function renderAnalytics(data) {
  if (!data) return '<div class="empty">No analytics data available.</div>';
  const { allTimeStats, funnel, scoreCalibration, rejectionInsights } = data;

  // Funnel bars
  const STAGE_LABELS = { applied: 'Applied', phone_screen: 'Phone Screen', interview: 'Interview', onsite: 'Onsite', offer: 'Offer' };
  const maxCount = Math.max(...Object.values(funnel), 1);
  const funnelRows = Object.entries(STAGE_LABELS).map(([stage, label]) => {
    const count = funnel[stage] || 0;
    const pct = Math.round((count / maxCount) * 100);
    const convRate = funnel.applied ? Math.round((count / funnel.applied) * 100) : 0;
    return `
    <div class="funnel-row">
      <div class="funnel-label">${label}</div>
      <div class="funnel-bar-wrap">
        <div class="funnel-bar" style="width:${pct}%;background:#a855f7"></div>
      </div>
      <div class="funnel-count" style="font-family:var(--font-mono)">${count} <span class="funnel-rate">${stage !== 'applied' ? `(${convRate}% of applied)` : ''}</span></div>
    </div>`;
  }).join('');

  // Score calibration table
  const calibRows = (scoreCalibration || []).reverse().map(row => {
    const advanceRate = row.total > 0 ? Math.round((row.advanced / row.total) * 100) : 0;
    const circleColor = row.score >= 8 ? '#d8b4fe' : row.score >= 6 ? '#a855f7' : '#6d28d9';
    const rateColor = advanceRate >= 20 ? '#d8b4fe' : advanceRate >= 10 ? '#a855f7' : COLORS.muted;
    return `
    <tr>
      <td><span class="score-circle score-${row.score >= 8 ? 'high' : row.score >= 6 ? 'mid' : 'low'}" style="background:${circleColor};display:inline-flex;width:28px;height:28px;border-radius:6px;font-family:var(--font-mono)">${row.score}</span></td>
      <td style="font-family:var(--font-mono)">${row.total}</td>
      <td style="font-family:var(--font-mono)">${row.active}</td>
      <td style="font-family:var(--font-mono)">${row.advanced}</td>
      <td style="font-family:var(--font-mono)">${row.rejected}</td>
      <td style="color:${rateColor};font-family:var(--font-mono)">${row.total > 0 ? advanceRate + '%' : '\u2014'}</td>
    </tr>`;
  }).join('');

  // Rejection insights table
  const rejectionRows = (rejectionInsights || []).map(r => {
    const ageColor = r.posting_age > 30 ? COLORS.red : r.posting_age > 14 ? '#a855f7' : '#d8b4fe';
    const daysColor = r.days_to_reject < 3 ? COLORS.red : COLORS.muted;
    const circleColor = r.score >= 8 ? '#d8b4fe' : r.score >= 6 ? '#a855f7' : '#6d28d9';
    return `
    <tr>
      <td>${escapeHtml(r.company)}</td>
      <td>${escapeHtml(r.title)}</td>
      <td><span class="score-circle score-${r.score >= 8 ? 'high' : r.score >= 6 ? 'mid' : 'low'}" style="background:${circleColor};display:inline-flex;width:24px;height:24px;border-radius:6px;font-size:11px;font-family:var(--font-mono)">${r.score || '?'}</span></td>
      <td>${r.rejected_from || 'applied'}</td>
      <td style="color:${daysColor};font-family:var(--font-mono)">${r.days_to_reject != null ? r.days_to_reject + 'd' : '?'}</td>
      <td style="color:${ageColor};font-weight:${r.posting_age > 30 ? '700' : '400'};font-family:var(--font-mono)">${r.posting_age != null ? r.posting_age + 'd' : '?'}</td>
    </tr>`;
  }).join('');

  const avgDaysToReject = rejectionInsights?.length
    ? (rejectionInsights.filter(r => r.days_to_reject != null).reduce((s, r) => s + r.days_to_reject, 0) / rejectionInsights.filter(r => r.days_to_reject != null).length).toFixed(1)
    : null;
  const avgPostingAge = rejectionInsights?.length
    ? (rejectionInsights.filter(r => r.posting_age != null).reduce((s, r) => s + r.posting_age, 0) / rejectionInsights.filter(r => r.posting_age != null).length).toFixed(1)
    : null;

  const allTimeHtml = allTimeStats ? `
  <div class="analytics-section market-section">
    <h2 class="analytics-title">All-Time Stats</h2>
    <div class="alltime-stats">
      <div class="alltime-stat"><div class="alltime-num">${allTimeStats.applied}</div><div class="alltime-label">Applied</div></div>
      <div class="alltime-stat"><div class="alltime-num">${allTimeStats.rejected}</div><div class="alltime-label">Rejected</div></div>
      <div class="alltime-stat"><div class="alltime-num">${allTimeStats.phoneScreens}</div><div class="alltime-label">Phone Screens</div></div>
      <div class="alltime-stat"><div class="alltime-num">${allTimeStats.interviewing}</div><div class="alltime-label">Interviews</div></div>
      <div class="alltime-stat"><div class="alltime-num">${allTimeStats.offers}</div><div class="alltime-label">Offers</div></div>
      <div class="alltime-stat"><div class="alltime-num">${allTimeStats.pending}</div><div class="alltime-label">Pending Review</div></div>
    </div>
  </div>` : '';
  return `
<div class="analytics-wrap">
  ${allTimeHtml}
  <div class="analytics-section market-section">
    <h2 class="analytics-title">Pipeline Funnel</h2>
    <p class="analytics-hint">How many jobs made it to each stage (rejected-at counts toward the stage they were rejected from)</p>
    <div class="funnel">${funnelRows}</div>
  </div>
  <div class="analytics-section market-section">
    <h2 class="analytics-title">Score Calibration</h2>
    <p class="analytics-hint">Do higher scores actually predict interview advancement?</p>
    <table class="calibration-table">
      <thead><tr><th>Score</th><th>Total</th><th>Active</th><th>Advanced</th><th>Rejected</th><th>Advance Rate</th></tr></thead>
      <tbody>${calibRows || '<tr><td colspan="6" style="text-align:center;color:var(--text-muted)">No data yet</td></tr>'}</tbody>
    </table>
  </div>
  <div class="analytics-section market-section">
    <h2 class="analytics-title">Rejection Insights</h2>
    <p class="analytics-hint">Are stale postings wasting your time?${avgDaysToReject ? ` Avg <span style="font-family:var(--font-mono)">${avgDaysToReject}</span> days to rejection.` : ''}${avgPostingAge ? ` Avg posting age at application: <span style="font-family:var(--font-mono)">${avgPostingAge}</span> days.` : ''}</p>
    <table class="calibration-table">
      <thead><tr><th>Company</th><th>Role</th><th>Score</th><th>Rejected From</th><th>Days to Reject</th><th>Posting Age</th></tr></thead>
      <tbody>${rejectionRows || '<tr><td colspan="6" style="text-align:center;color:var(--text-muted)">No rejections yet</td></tr>'}</tbody>
    </table>
  </div>
</div>`;
}

module.exports = { renderAnalytics, renderActivityLog };
