app.js

import { TOOLS, STAGES, NICHES, BASELINE, BASELINE_TOTAL, CHANGELOG_2026 } from './data.js';

/* ================= STATE ================= */
const state = {
  niche: 'faceless',
  budget: 60,
  volume: 8,
  rate: 25,
  annual: false,
  dev: true,
  filter: 'all',
  result: null,
};

const $ = (s) => document.querySelector(s);
const money = (n) => (n === 0 ? '$0' : n % 1 === 0 ? `$${n}` : `$${n.toFixed(2)}`);
const hrs = (n) => (n >= 100 ? Math.round(n) : n.toFixed(1)).toString();

/* ================= PRICING HELPERS ================= */
function priceOf(tier, annual) {
  if (annual) return tier.annual ?? tier.price ?? 0;
  return tier.price ?? tier.annual ?? 0;
}
function toolOf(tierId) { return TOOLS.find((t) => t.tiers.some((x) => x.id === tierId)); }

/* Hours of manual work removed per month by one tier */
function hoursSaved(tool, tier, volume) {
  const cap = Math.min(volume, tier.capacity);
  const per = Math.min(tier.saves, BASELINE[tool.stage]);
  return per * cap;
}
/* % of that stage's manual workload automated */
function impactScore(tool, tier, volume) {
  const max = BASELINE[tool.stage] * volume;
  return max === 0 ? 0 : Math.min(100, Math.round((hoursSaved(tool, tier, volume) / max) * 100));
}
/* Niche-weighted desirability */
function fitValue(tool, tier, niche, volume) {
  const w = NICHES.find((n) => n.id === niche).weights[tool.stage];
  const affinity = 0.55 + 0.45 * (tool.fit[niche] / 100);
  return hoursSaved(tool, tier, volume) * w * affinity;
}

function candidates(stage) {
  const out = [];
  for (const tool of TOOLS) {
    if (tool.stage !== stage) continue;
    if (tool.discontinued) continue;
    if (tool.dev && !state.dev) continue;
    for (const tier of tool.tiers) out.push({ tool, tier });
  }
  return out;
}

/* ================= OPTIMISER ================= */
function solve() {
  const { budget, volume, niche, annual } = state;
  const pools = STAGES.map((s) => candidates(s.id));
  let best = null;

  const walk = (i, picks, cost, score) => {
    if (cost > budget) return;
    if (i === pools.length) {
      if (!best || score > best.score + 1e-9 || (Math.abs(score - best.score) < 1e-9 && cost < best.cost)) {
        best = { picks: picks.slice(), cost, score };
      }
      return;
    }
    for (const c of pools[i]) {
      const p = priceOf(c.tier, annual);
      if (cost + p > budget) continue;
      picks.push(c);
      walk(i + 1, picks, cost + p, score + fitValue(c.tool, c.tier, niche, volume));
      picks.pop();
    }
  };
  walk(0, [], 0, 0);

  if (!best) { // budget below the cheapest possible free stack (shouldn't happen)
    const picks = pools.map((p) => p.slice().sort((a, b) => priceOf(a.tier, annual) - priceOf(b.tier, annual))[0]);
    best = { picks, cost: picks.reduce((s, c) => s + priceOf(c.tier, annual), 0), score: 0 };
  }

  const totalHours = best.picks.reduce((s, c) => s + hoursSaved(c.tool, c.tier, volume), 0);
  const value = totalHours * state.rate;
  return { ...best, totalHours, value };
}

/* ================= RENDER: CONFIG ================= */
function renderNiches() {
  $('#niche-grid').innerHTML = NICHES.map((n) => `
    <button class="niche" role="radio" data-niche="${n.id}" aria-checked="${n.id === state.niche}">
      <strong>${n.label}</strong><span>${n.blurb}</span>
    </button>`).join('');
}

/* ================= RENDER: SUMMARY ================= */
function renderSummary(r) {
  const pct = state.budget > 0 ? Math.min(100, (r.cost / state.budget) * 100) : (r.cost > 0 ? 100 : 0);
  const left = state.budget - r.cost;
  const manual = BASELINE_TOTAL * state.volume;
  const automated = Math.round((r.totalHours / manual) * 100);
  const roi = r.cost > 0 ? (r.value / r.cost) : null;

  $('#summary-bar').innerHTML = `
    <div class="sum-cell">
      <div class="sum-lab">Stack cost</div>
      <div class="sum-val">${money(round2(r.cost))}<span style="font-size:var(--text-xs);color:var(--faint);font-family:var(--font-body)">/mo</span></div>
      <div class="sum-sub">${money(round2(left))} of your ${money(state.budget)} budget unspent${state.annual ? ' · annual rates' : ''}</div>
      <div class="meter"><i style="width:${pct}%"></i></div>
    </div>
    <div class="sum-cell">
      <div class="sum-lab">Hours returned</div>
      <div class="sum-val good">${hrs(r.totalHours)}<span style="font-size:var(--text-xs);color:var(--faint);font-family:var(--font-body)">h/mo</span></div>
      <div class="sum-sub">${automated}% of the ${Math.round(manual)}h manual workload for ${state.volume} video${state.volume > 1 ? 's' : ''}</div>
      <div class="meter"><i style="width:${Math.min(100, automated)}%"></i></div>
    </div>
    <div class="sum-cell">
      <div class="sum-lab">Time value recovered</div>
      <div class="sum-val">${money(Math.round(r.value))}</div>
      <div class="sum-sub">${hrs(r.totalHours)}h × ${money(state.rate)}/h of your time</div>
    </div>
    <div class="sum-cell">
      <div class="sum-lab">Return on spend</div>
      <div class="sum-val ${roi === null || roi >= 3 ? 'good' : ''}">${roi === null ? '∞' : roi.toFixed(1) + '×'}</div>
      <div class="sum-sub">${roi === null ? 'Fully free stack — pure upside' : `Every $1 spent returns ${money(round2(roi))} of your time`}</div>
    </div>`;
}
const round2 = (n) => Math.round(n * 100) / 100;

/* ================= RENDER: PIPELINE ================= */
function renderPipeline(r) {
  $('#pipeline').innerHTML = STAGES.map((s, i) => {
    const { tool, tier } = r.picks[i];
    const price = priceOf(tier, state.annual);
    const imp = impactScore(tool, tier, state.volume);
    const saved = hoursSaved(tool, tier, state.volume);
    const short = tier.capacity < state.volume;
    const w = NICHES.find((n) => n.id === state.niche);

    const headroom = state.budget - r.cost + price;
    const alt = candidates(s.id)
      .filter((c) => c.tool.id !== tool.id && priceOf(c.tier, state.annual) <= headroom + 0.01)
      .sort((a, b) => fitValue(b.tool, b.tier, state.niche, state.volume) - fitValue(a.tool, a.tier, state.niche, state.volume))[0];

    return `<article class="stage">
      <div class="stage-head"><span class="stage-num">${s.num}</span><span class="stage-name">${s.label}</span></div>
      <div>
        <div class="pick-name">${tool.name}<span class="pick-tier">${tier.name}${tier.verified === false ? ' *' : ''}</span></div>
        <div class="pick-price" style="margin-top:6px">${money(round2(price))} <em>/ month${state.annual && tier.annual ? ', billed yearly' : ''}</em></div>
      </div>
      <p class="pick-quota">${tier.quota}</p>
      ${short ? `<div class="warn-row"><span>⚠</span><span>This tier only covers about ${fmtCap(tier.capacity)} video${tier.capacity === 1 ? '' : 's'} a month — you planned ${state.volume}. Expect overage or manual fallback for the rest.</span></div>` : ''}
      <div>
        <div class="impact">
          <span class="impact-num">${imp}</span>
          <div class="impact-bar"><i style="width:${imp}%"></i></div>
        </div>
        <div class="impact-lab" style="margin-top:6px">Time-saved impact · ${hrs(saved)}h/mo returned</div>
      </div>
      <p class="pick-why"><b>Why:</b> ${tool.role} ${w.label} weights this stage at ${w.weights[s.id].toFixed(2)}× and ${tool.name} scores ${tool.fit[state.niche]}/100 for fit.</p>
      ${alt ? `<p class="alt-line">Runner-up: ${alt.tool.name} ${alt.tier.name} at ${money(round2(priceOf(alt.tier, state.annual)))}/mo</p>` : ''}
      <a class="stage-link" href="${tool.url}" target="_blank" rel="noopener">Official pricing →</a>
    </article>`;
  }).join('');
}
const fmtCap = (c) => (c < 1 ? c.toFixed(1) : Math.round(c));

/* ================= RENDER: ROI LADDER ================= */
function renderROI(r) {
  const rows = [];
  STAGES.forEach((s, i) => {
    const cur = r.picks[i];
    const curPrice = priceOf(cur.tier, state.annual);
    const curHours = hoursSaved(cur.tool, cur.tier, state.volume);
    candidates(s.id).forEach(({ tool, tier }) => {
      const p = priceOf(tier, state.annual);
      const h = hoursSaved(tool, tier, state.volume);
      const dCost = round2(p - curPrice);
      const dHours = h - curHours;
      if (dCost <= 0 || dHours <= 0.05) return;
      rows.push({
        stage: s, from: cur, tool, tier, dCost, dHours,
        perDollar: dHours / dCost,
        gain: dHours * state.rate - dCost,
        newTotal: round2(r.cost + dCost),
      });
    });
  });

  // keep the best upgrade per destination tool, cap the list
  const seen = new Set();
  const list = rows.sort((a, b) => b.perDollar - a.perDollar).filter((x) => {
    const k = x.tool.id + x.stage.id;
    if (seen.has(k)) return false; seen.add(k); return true;
  }).slice(0, 7);

  if (!list.length) {
    $('#roi-list').innerHTML = `<div class="empty-state">No upgrades left to model — this stack already picks the strongest tier in every stage for your niche. Raise your output volume or budget to see new options.</div>`;
    return;
  }

  $('#roi-list').innerHTML = list.map((x, idx) => `
    <div class="roi-row ${idx === 0 ? 'top' : ''}">
      <span class="roi-rank">${String(idx + 1).padStart(2, '0')}</span>
      <div class="roi-what">
        <strong>${x.stage.label}: ${x.from.tool.name} ${x.from.tier.name} → ${x.tool.name} ${x.tier.name}</strong>
        <span>Stack total becomes ${money(x.newTotal)}/mo${x.newTotal > state.budget ? ` · ${money(round2(x.newTotal - state.budget))} over budget` : ''}</span>
      </div>
      <div class="roi-cell">+${money(x.dCost)}<em>added cost</em></div>
      <div class="roi-cell">+${hrs(x.dHours)}h<em>hours/mo</em></div>
      <div class="roi-verdict ${x.gain > 0 ? 'yes' : 'no'}">
        ${(x.perDollar * 60).toFixed(0)} min saved per $1 —
        ${x.gain > 0 ? `nets ${money(Math.round(x.gain))}/mo at your rate` : `costs ${money(Math.abs(Math.round(x.gain)))}/mo more than it returns`}
      </div>
    </div>`).join('');
}

/* ================= RENDER: TABLE ================= */
function renderTable(r) {
  const pickedIds = new Set(r.picks.map((p) => p.tier.id));
  const rows = [];
  const order = ['script', 'voice', 'video', 'editing'];
  TOOLS.slice().sort((a, b) => order.indexOf(a.stage) - order.indexOf(b.stage)).forEach((tool) => {
    if (state.filter !== 'all' && tool.stage !== state.filter) return;
    tool.tiers.forEach((tier, i) => {
      const imp = tool.discontinued ? 0 : impactScore(tool, tier, state.volume);
      const cls = imp >= 60 ? 's-hi' : imp >= 30 ? 's-mid' : '';
      const covers = tool.discontinued ? '—' : fmtCap(tier.capacity);
      const short = !tool.discontinued && tier.capacity < state.volume;
      rows.push(`<tr class="${pickedIds.has(tier.id) ? 'picked' : ''} ${tool.discontinued ? 'dead' : ''}">
        <td class="c-tool">${i === 0 ? `<div class="tool-cell">${pickedIds.has(tier.id) ? '<span class="dot"></span>' : ''}<a href="${tool.url}" target="_blank" rel="noopener">${tool.name}</a> <span class="stage-tag">${tool.discontinued ? 'retired' : tool.stage}</span></div>` : ''}</td>
        <td>${tier.name} ${tier.verified === false ? '<span class="flag" title="Official page did not show a clean monthly sticker price — verify before buying">unconfirmed</span>' : ''}</td>
        <td class="c-num">${tier.price === null ? '—' : money(tier.price)}</td>
        <td class="c-num">${tier.annual === null || tier.annual === undefined ? '—' : money(round2(tier.annual))}</td>
        <td class="quota-cell">${tier.quota}</td>
        <td class="c-num" style="${short ? 'color:var(--accent)' : ''}">${covers}</td>
        <td class="c-num">${tool.discontinued ? '—' : tier.saves.toFixed(1) + 'h'}</td>
        <td class="c-num"><span class="score-pill ${cls}">${tool.discontinued ? '—' : imp}</span></td>
      </tr>`);
    });
  });
  $('#cmp-body').innerHTML = rows.join('');

  $('#tool-notes').innerHTML = TOOLS
    .filter((t) => state.filter === 'all' || t.stage === state.filter)
    .map((t) => `<div class="note-card">
      <h4>${t.name} <span class="vendor">${t.vendor}</span>${t.discontinued ? '<span class="stage-tag" style="color:var(--accent);border-color:var(--accent)">retired</span>' : ''}</h4>
      <p><b>Strength.</b> ${t.strength}</p>
      <p><b>Watch out.</b> ${t.weakness}</p>
      <p><b>2026.</b> ${t.news}</p>
      <a class="stage-link" href="${t.url}" target="_blank" rel="noopener">Pricing page →</a>
    </div>`).join('');
}

function renderFilters() {
  const opts = [{ id: 'all', label: 'All stages' }, ...STAGES.map((s) => ({ id: s.id, label: s.label }))];
  $('#stage-filters').innerHTML = opts.map((o) =>
    `<button class="chip ${state.filter === o.id ? 'on' : ''}" data-filter="${o.id}" role="tab" aria-selected="${state.filter === o.id}">${o.label}</button>`).join('');
}

/* ================= COPY ================= */
function summaryText(r) {
  const n = NICHES.find((x) => x.id === state.niche);
  const lines = [
    `AI YOUTUBE AUTOMATION STACK — ${n.label.toUpperCase()}`,
    `Budget ${money(state.budget)}/mo · ${state.volume} videos/mo · ${state.annual ? 'annual' : 'monthly'} billing`,
    '',
  ];
  r.picks.forEach((p, i) => {
    lines.push(`${STAGES[i].num} ${STAGES[i].label}: ${p.tool.name} ${p.tier.name} — ${money(round2(priceOf(p.tier, state.annual)))}/mo`);
    lines.push(`   ${p.tier.quota}`);
    lines.push(`   Impact ${impactScore(p.tool, p.tier, state.volume)}/100 · ${hrs(hoursSaved(p.tool, p.tier, state.volume))}h saved/mo · ${p.tool.url}`);
  });
  lines.push('', `TOTAL ${money(round2(r.cost))}/mo · ${hrs(r.totalHours)}h returned · ${money(Math.round(r.value))} of time value at ${money(state.rate)}/h`);
  lines.push('Pricing verified July 2026 — confirm on vendor pages before purchase.');
  return lines.join('\n');
}
function copySummary() {
  const text = summaryText(state.result);
  const done = () => toast('Stack summary copied');
  if (navigator.clipboard?.writeText) {
    navigator.clipboard.writeText(text).then(done).catch(() => fallbackCopy(text, done));
  } else fallbackCopy(text, done);
}
function fallbackCopy(text, done) {
  const ta = document.createElement('textarea');
  ta.value = text; ta.style.position = 'fixed'; ta.style.opacity = '0';
  document.body.appendChild(ta); ta.select();
  try { document.execCommand('copy'); done(); } catch { toast('Copy blocked by the browser'); }
  document.body.removeChild(ta);
}
let toastT;
function toast(msg) {
  const el = $('#toast');
  el.textContent = msg; el.classList.add('show');
  clearTimeout(toastT); toastT = setTimeout(() => el.classList.remove('show'), 2200);
}

/* ================= UPDATE ================= */
function update() {
  state.result = solve();
  renderSummary(state.result);
  renderPipeline(state.result);
  renderROI(state.result);
  renderTable(state.result);
}

/* ================= EVENTS ================= */
function bind() {
  $('#niche-grid').addEventListener('click', (e) => {
    const b = e.target.closest('[data-niche]'); if (!b) return;
    state.niche = b.dataset.niche;
    [...$('#niche-grid').children].forEach((c) => c.setAttribute('aria-checked', c === b));
    update();
  });

  const budget = $('#budget'), volume = $('#volume'), rate = $('#rate');
  const syncBudget = () => {
    state.budget = +budget.value;
    $('#budget-val').textContent = money(state.budget) + (state.budget === 500 ? '+' : '');
    document.querySelectorAll('[data-budget]').forEach((c) => c.classList.toggle('on', +c.dataset.budget === state.budget));
  };
  budget.addEventListener('input', () => { syncBudget(); update(); });
  volume.addEventListener('input', () => { state.volume = +volume.value; $('#volume-val').textContent = state.volume; update(); });
  rate.addEventListener('input', () => { state.rate = +rate.value; $('#rate-val').textContent = money(state.rate); update(); });

  $('#budget-presets').addEventListener('click', (e) => {
    const c = e.target.closest('[data-budget]'); if (!c) return;
    budget.value = c.dataset.budget; syncBudget(); update();
  });

  $('#annual').addEventListener('change', (e) => { state.annual = e.target.checked; update(); });
  $('#devmode').addEventListener('change', (e) => { state.dev = e.target.checked; update(); });
  $('#copy-stack').addEventListener('click', copySummary);

  $('#stage-filters').addEventListener('click', (e) => {
    const c = e.target.closest('[data-filter]'); if (!c) return;
    state.filter = c.dataset.filter; renderFilters(); renderTable(state.result);
  });

  document.querySelectorAll('[data-scroll]').forEach((b) => b.addEventListener('click', () => {
    document.getElementById(b.dataset.scroll)?.scrollIntoView({ behavior: 'smooth', block: 'start' });
  }));

  const html = document.documentElement;
  if (window.matchMedia('(prefers-color-scheme: light)').matches) html.setAttribute('data-theme', 'light');
  $('#theme-toggle').addEventListener('click', () => {
    html.setAttribute('data-theme', html.getAttribute('data-theme') === 'dark' ? 'light' : 'dark');
  });

  syncBudget();
}

/* ================= INIT ================= */
function init() {
  $('#hs-tiers').textContent = TOOLS.reduce((s, t) => s + t.tiers.length, 0);
  renderNiches();
  renderFilters();
  $('#changelog').innerHTML = CHANGELOG_2026.map((c) =>
    `<li class="${c.tone}"><span class="cl-tag">${c.tag}</span><span>${c.text}</span></li>`).join('');
  bind();
  update();
}
init();