pruncalc/ts/roi.ts

import {setupPopover} from './popover';

const roiCache: Record<string, Promise<{lastModified: Date, profits: Profit[]}>> = {};
async function getROI(cx: string) {
	const response = await fetch(`/roi_${cx.toLowerCase()}.json`);
	const lastModified = new Date(response.headers.get('last-modified')!);
	const profits = await response.json();
	return {lastModified, profits};
}

type MetricType = 'vwap' | 'bid' | 'ask';

const lowVolume = document.querySelector('input#low-volume') as HTMLInputElement;

const cxSelect = document.querySelector('select#cx') as HTMLSelectElement;
const expertise = {
	AGRICULTURE: 'agri',
	CHEMISTRY: 'chem',
	CONSTRUCTION: 'const',
	ELECTRONICS: 'elec',
	FOOD_INDUSTRIES: 'food ind',
	FUEL_REFINING: 'fuel',
	MANUFACTURING: 'mfg',
	METALLURGY: 'metal',
	RESOURCE_EXTRACTION: 'res ext',
} as const;
const expertiseSelect = document.querySelector('select#expertise') as HTMLSelectElement;
for (const key of Object.keys(expertise)) {
	const option = document.createElement('option');
	option.value = key;
	option.textContent = key.replace('_', ' ').toLowerCase();
	expertiseSelect.appendChild(option);
}
const buildingSelect = document.querySelector('select#building') as HTMLSelectElement;

const formatSigFig = new Intl.NumberFormat(undefined, {
	notation: 'compact',
	maximumSignificantDigits: 3,
}).format;

if (localStorage.getItem('roi-cx')) cxSelect.value = localStorage.getItem('roi-cx')!;
if (localStorage.getItem('roi-expertise')) expertiseSelect.value = localStorage.getItem('roi-expertise')!;
if (localStorage.getItem('roi-low-volume')) lowVolume.checked = localStorage.getItem('roi-low-volume') === 'true';

let savedBuilding = localStorage.getItem('roi-building') || '';

// EXTREME DETAIL: Legacy cache migration. If the user had the old raw 'logistics_per_base' stored
// as their active sort, we organically migrate them to the new normalized property.
let storedSortKey = localStorage.getItem('roi-sort-key') as any;
if (storedSortKey === 'logistics_per_base') storedSortKey = 'normalized_logistics_per_base';
let currentSortKey: keyof ProfitWithMetrics | 'outputs' = storedSortKey || 'break_even';
let currentSortAsc: boolean = localStorage.getItem('roi-sort-asc') !== 'false';

let headersInitialized = false;
let metricControlsInitialized = false;

let capexMetric: MetricType = (localStorage.getItem('roi-capex-metric') as MetricType) || 'vwap';
let opexMetric: MetricType = (localStorage.getItem('roi-opex-metric') as MetricType) || 'vwap';
let revenueMetric: MetricType = (localStorage.getItem('roi-revenue-metric') as MetricType) || 'vwap';
let includeShips: boolean = localStorage.getItem('roi-include-ships') === 'true';
let workingCapitalDays: number = parseInt(localStorage.getItem('roi-working-capital') || '3', 10);
let targetPermit: number = parseInt(localStorage.getItem('roi-target-permit') || '2', 10);

async function render() {
	const tbody = document.querySelector('tbody')!;
	tbody.innerHTML = '';

	const cx = cxSelect.value;
	if (!roiCache[cx])
		roiCache[cx] = getROI(cx);
	const {lastModified, profits} = await roiCache[cx];

	if (!metricControlsInitialized) {
		const controls = document.createElement('div');
		controls.style.marginBottom = '15px';
		controls.innerHTML = `
			<label style="margin-right: 15px;">CapEx Price: 
				<select id="capex-metric"><option value="vwap">VWAP</option><option value="bid">Bid</option><option value="ask">Ask</option></select>
			</label>
			<label style="margin-right: 15px;">OpEx Price: 
				<select id="opex-metric"><option value="vwap">VWAP</option><option value="bid">Bid</option><option value="ask">Ask</option></select>
			</label>
			<label style="margin-right: 15px;">Revenue Price: 
				<select id="revenue-metric"><option value="vwap">VWAP</option><option value="bid">Bid</option><option value="ask">Ask</option></select>
			</label>
			<label style="margin-right: 15px;">
				<input type="checkbox" id="include-ships"> Include Ship CapEx
			</label>
			<label style="margin-right: 15px;">
				Days OpEx: <input type="number" id="working-capital" min="0" step="1" style="width: 50px;">
			</label>
			<label>
				Permit Number: <input type="number" id="target-permit" min="1" step="1" style="width: 50px;">
			</label>
		`;
		const table = document.querySelector('table');
		if (table) table.parentNode?.insertBefore(controls, table);

		(document.getElementById('capex-metric') as HTMLSelectElement).value = capexMetric;
		(document.getElementById('opex-metric') as HTMLSelectElement).value = opexMetric;
		(document.getElementById('revenue-metric') as HTMLSelectElement).value = revenueMetric;
		(document.getElementById('include-ships') as HTMLInputElement).checked = includeShips;
		(document.getElementById('working-capital') as HTMLInputElement).value = workingCapitalDays.toString();
		(document.getElementById('target-permit') as HTMLInputElement).value = targetPermit.toString();

		document.getElementById('capex-metric')!.addEventListener('change', (e) => {
			capexMetric = (e.target as HTMLSelectElement).value as MetricType;
			render();
		});
		document.getElementById('opex-metric')!.addEventListener('change', (e) => {
			opexMetric = (e.target as HTMLSelectElement).value as MetricType;
			render();
		});
		document.getElementById('revenue-metric')!.addEventListener('change', (e) => {
			revenueMetric = (e.target as HTMLSelectElement).value as MetricType;
			render();
		});
		document.getElementById('include-ships')!.addEventListener('change', (e) => {
			includeShips = (e.target as HTMLInputElement).checked;
			render();
		});
		document.getElementById('working-capital')!.addEventListener('change', (e) => {
			workingCapitalDays = parseInt((e.target as HTMLInputElement).value, 10);
			render();
		});
		document.getElementById('target-permit')!.addEventListener('change', (e) => {
			targetPermit = parseInt((e.target as HTMLInputElement).value, 10);
			render();
		});
		metricControlsInitialized = true;
	}

	if (!headersInitialized) {
		const ths = document.querySelectorAll('th');
		// EXTREME DETAIL: We swapped `logistics_per_base` for `normalized_logistics_per_base`.
		// Clicking the Logistics header now intrinsically triggers a sort utilizing the ship fraction,
		// ensuring that 1000m³ perfectly balances against 3000t.
		const keys: (keyof ProfitWithMetrics | 'outputs')[] = [
			'outputs', 'expertise', 'profit_per_base', 'break_even', 
			'capex_val', 'opex_val', 'normalized_logistics_per_base', 'market_capacity_base'
		];
		
		ths.forEach((th, i) => {
			if (keys[i]) {
				th.style.cursor = 'pointer';
				th.title = ''; 
				
				if (keys[i] === 'profit_per_base') {
					th.textContent = 'Profit/Base';
					th.dataset.tooltip = 'Click to sort.\n\nDaily profit scaled to a full 500-area planetary base.\n(Percentiles rank 0.00 as lowest numerical value to 1.00 as highest)';
				} else if (keys[i] === 'capex_val') {
					th.textContent = 'CapEx/Base';
					th.dataset.tooltip = 'Click to sort.\n\nTotal capital expenditure scaled to a full 500-area planetary base.\nIncludes base construction, working capital (days of OpEx), optional HQ Upgrade materials for the target permit, and optional Ship CapEx.';
				} else if (keys[i] === 'opex_val') {
					th.textContent = 'OpEx/Base';
					th.dataset.tooltip = 'Click to sort.\n\nDaily operational expenditure (input materials + worker consumables) scaled to a full 500-area planetary base.';
				} else if (keys[i] === 'normalized_logistics_per_base') {
					th.textContent = 'Logistics/Base';
					th.dataset.tooltip = 'Click to sort.\n\nDaily logistics bottleneck scaled to a full 500-area planetary base. The suffix indicates whether Weight (t) or Volume (m³) of Inputs (I) or Outputs (O) is the limiting bottleneck.\nSorts and percentiles are strictly normalized based on ship capacity limits (3000t or 1000m³).';
				} else if (keys[i] === 'market_capacity_base') {
					th.textContent = 'Market Cap (Bases)';
					th.dataset.tooltip = 'Click to sort.\n\nMarket Capacity: 7-day average traded volume ÷ daily output per base. Indicates how many full 500-area bases you can build before saturating the market.';
				} else if (keys[i] === 'break_even') {
					th.dataset.tooltip = 'Click to sort.\n\nBreak Even: CapEx ÷ daily profit. Note that CapEx dynamically includes working capital and HQ upgrades to accurately reflect operational readiness.';
				} else {
					th.dataset.tooltip = 'Click to sort.';
				}

				th.addEventListener('click', () => {
					if (currentSortKey === keys[i]) {
						currentSortAsc = !currentSortAsc;
					} else {
						currentSortKey = keys[i];
						currentSortAsc = keys[i] === 'break_even' ? true : false;
					}
					render();
				});
			}
		});
		headersInitialized = true;
	}

	const buildingTickers = new Set(profits.map(p => p.building));
	const buildings: {ticker: string, expertise: keyof typeof expertise}[] = Array.from(buildingTickers)
			.map((building) => ({ticker: building, expertise: profits.find(p => p.building === building)!.expertise}))
			.sort((a, b) => a.ticker.localeCompare(b.ticker));
	
	let selectedBuilding = buildingSelect.value || savedBuilding;
	let buildingFound = false;
	buildingSelect.innerHTML = '<option value="">(all)</option>';
	for (const building of buildings)
		if (expertiseSelect.value === '' || expertiseSelect.value === building.expertise) {
			const option = document.createElement('option');
			option.value = building.ticker;
			option.textContent = building.ticker;
			if (building.ticker === selectedBuilding) {
				buildingFound = true;
				option.selected = true;
			}
			buildingSelect.appendChild(option);
		}
	if (!buildingFound)
		selectedBuilding = '';
	
	savedBuilding = ''; 

	// EXTREME DETAIL: Because the percentile derivations evaluate the arrays *after* the filter executes,
	// any row removed by the "low volume" constraint is automatically excluded from the 
	// percentile population math, ensuring your rankings are entirely context-accurate.
	const filteredProfits = profits.filter(p => {
		const volumeRatio = p.output_per_day / p.average_traded_7d;
		if (!lowVolume.checked && volumeRatio > 0.05) return false;
		if (expertiseSelect.value !== '' && p.expertise !== expertiseSelect.value) return false;
		if (selectedBuilding !== '' && p.building !== selectedBuilding) return false;
		return true;
	});

	const profitsWithMetrics: ProfitWithMetrics[] = filteredProfits.map(p => {
		const bases = p.area / 500;
		const opex_val = p.opex[opexMetric] / bases;
		const revenue_val = p.revenue[revenueMetric] / bases;
		
		let capex_val = (p.capex[capexMetric] / bases) + (opex_val * workingCapitalDays);
		
		let hq_capex = 0;
		if (targetPermit >= 3) {
			const hqLevelStr = (targetPermit - 1).toString();
			if (p.hq_costs && p.hq_costs[hqLevelStr]) {
				hq_capex = p.hq_costs[hqLevelStr][capexMetric];
				capex_val += hq_capex;
			}
		}

		if (includeShips) {
			capex_val += p.ship_capex_per_base;
		}

		const profit_per_base = revenue_val - opex_val;
		const break_even = profit_per_base > 0 ? capex_val / profit_per_base : Infinity;
		
		return { ...p, capex_val, opex_val, revenue_val, profit_per_base, break_even, hq_capex };
	});

	// EXTREME DETAIL: We extract 6 sorted arrays of our active numeric values post-mapping.
	// Using a robust numeric sorting function protects against `NaN` crashes when dealing with `Infinity`.
	const numSort = (a: number, b: number) => (a < b ? -1 : a > b ? 1 : 0);
	const arrProfit = profitsWithMetrics.map(p => p.profit_per_base).sort(numSort);
	const arrBreak = profitsWithMetrics.map(p => p.break_even).sort(numSort);
	const arrCapex = profitsWithMetrics.map(p => p.capex_val).sort(numSort);
	const arrOpex = profitsWithMetrics.map(p => p.opex_val).sort(numSort);
	const arrLog = profitsWithMetrics.map(p => p.normalized_logistics_per_base).sort(numSort);
	const arrCap = profitsWithMetrics.map(p => p.market_capacity_base).sort(numSort);

	profitsWithMetrics.sort((a, b) => {
		let valA: any = a[currentSortKey as keyof ProfitWithMetrics];
		let valB: any = b[currentSortKey as keyof ProfitWithMetrics];
		
		if (currentSortKey === 'outputs') {
			valA = a.outputs.map(o => o.ticker).join(', ');
			valB = b.outputs.map(o => o.ticker).join(', ');
		}
		
		if (valA < valB) return currentSortAsc ? -1 : 1;
		if (valA > valB) return currentSortAsc ? 1 : -1;
		return 0;
	});

	for (const p of profitsWithMetrics) {
		const tr = document.createElement('tr');
		
		// Map the raw value to its percentile rank within the active filtered column.
		const pctProfit = getPercentile(p.profit_per_base, arrProfit);
		const pctBreak = getPercentile(p.break_even, arrBreak);
		const pctCapex = getPercentile(p.capex_val, arrCapex);
		const pctOpex = getPercentile(p.opex_val, arrOpex);
		const pctLog = getPercentile(p.normalized_logistics_per_base, arrLog);
		const pctCap = getPercentile(p.market_capacity_base, arrCap);
		
		// EXTREME DETAIL: We append the percentiles enclosed in a <small> tag.
		// Reducing the opacity slightly creates visual hierarchy, allowing the 3-sig-fig
		// metrics to remain the primary focal point of the table while the percentile acts as metadata.
		// Note: The Logistics color mapping natively targets `normalized_logistics_per_base` (0.1 to 1.0 ship bounds).
		tr.innerHTML = `
			<td>${p.outputs.map(o => o.ticker).join(', ')}</td>
			<td>${expertise[p.expertise]}</td>
			<td style="color: ${color(p.profit_per_base, 0, 150000)}">${formatSigFig(p.profit_per_base)} <span style="font-size: 0.85em; opacity: 0.6;">(${pctProfit})</span></td>
			<td><span style="color: ${color(p.break_even, 30, 3)}">${formatSigFig(p.break_even)}</span>d <span style="font-size: 0.85em; opacity: 0.6;">(${pctBreak})</span></td>
			<td style="color: ${color(p.capex_val, 3_000_000, 400_000)}">${formatSigFig(p.capex_val)} <span style="font-size: 0.85em; opacity: 0.6;">(${pctCapex})</span></td>
			<td style="color: ${color(p.opex_val, 400_000, 10_000)}">${formatSigFig(p.opex_val)} <span style="font-size: 0.85em; opacity: 0.6;">(${pctOpex})</span></td>
			<td style="color: ${color(p.normalized_logistics_per_base, 1.0, 0.1)}">${formatSigFig(p.logistics_per_base)} ${p.logistics_bottleneck} <span style="font-size: 0.85em; opacity: 0.6;">(${pctLog})</span></td>
			<td style="color: ${color(p.market_capacity_base, 0.04, 1)}">${formatSigFig(p.market_capacity_base)} <span style="font-size: 0.85em; opacity: 0.6;">(${pctCap})</span></td>
		`;

		const output = tr.querySelector('td')!;
		output.dataset.tooltip = p.recipe;

		const profitCell = tr.querySelectorAll('td')[2];
		const runs_per_base = p.runs_per_day / (p.area / 500);
		
		profitCell.dataset.tooltip = formatMatPrices(p.outputs, revenueMetric, runs_per_base) + '\n\n' +
			formatMatPrices(p.input_costs, opexMetric, runs_per_base) + '\n' +
			'+ worker consumables\n\n' +
			`(${formatSigFig(p.revenue_val)} - ${formatSigFig(p.opex_val)}) = ${formatSigFig(p.profit_per_base)}`;

		const capexCell = tr.querySelectorAll('td')[4];
		capexCell.dataset.tooltip = `Base Construction: ${formatSigFig(p.capex[capexMetric] / (p.area / 500))}`;
		capexCell.dataset.tooltip += `\nWorking Capital (${workingCapitalDays} days): ${formatSigFig(p.opex_val * workingCapitalDays)}`;
		
		if (p.hq_capex > 0) {
			capexCell.dataset.tooltip += `\nHQ Upgrade (Permit ${targetPermit}): ${formatSigFig(p.hq_capex)}`;
		}
		if (includeShips) {
			capexCell.dataset.tooltip += `\nShip CapEx: ${formatSigFig(p.ship_capex_per_base)} (${formatSigFig(p.ship_capex_per_base / 800_000)} ships)`;
		}

		const marketCell = tr.querySelectorAll('td')[7];
		marketCell.dataset.tooltip = `Market Capacity: ${formatSigFig(p.average_traded_7d)} traded/day ÷ ${formatSigFig(p.output_per_day / (p.area / 500))} produced/day/base = ${formatSigFig(p.market_capacity_base)} equivalent bases`;

		tbody.appendChild(tr);
	}
	document.getElementById('last-updated')!.textContent =
		`last updated: ${lastModified.toLocaleString(undefined, {dateStyle: 'full', timeStyle: 'long', hour12: false})}`;

	saveState();
}

// EXTREME DETAIL: O(N) simple percentile ranker. 
// Locates how many array items are strictly less than the target value.
// Bounding it against `sortedArr.length - 1` gracefully maps the output from 0.00 to 1.00.
function getPercentile(val: number, sortedArr: number[]): string {
	if (sortedArr.length < 2) return "1.00";
	let less = 0;
	for (let i = 0; i < sortedArr.length; i++) {
		if (sortedArr[i] < val) less++;
		else break; // Break early because array is guaranteed pre-sorted
	}
	return (less / (sortedArr.length - 1)).toFixed(2);
}

function saveState() {
	localStorage.setItem('roi-cx', cxSelect.value);
	localStorage.setItem('roi-expertise', expertiseSelect.value);
	localStorage.setItem('roi-building', buildingSelect.value);
	localStorage.setItem('roi-low-volume', lowVolume.checked.toString());
	localStorage.setItem('roi-sort-key', currentSortKey);
	localStorage.setItem('roi-sort-asc', currentSortAsc.toString());
	localStorage.setItem('roi-capex-metric', capexMetric);
	localStorage.setItem('roi-opex-metric', opexMetric);
	localStorage.setItem('roi-revenue-metric', revenueMetric);
	localStorage.setItem('roi-include-ships', includeShips.toString());
	localStorage.setItem('roi-working-capital', workingCapitalDays.toString());
	localStorage.setItem('roi-target-permit', targetPermit.toString());
}

function color(n: number, low: number, high: number): string {
	const scale = Math.min(Math.max((n - low) / (high - low), 0), 1);
	return `color-mix(in xyz, #0aa ${scale * 100}%, #f80)`;
}

function formatMatPrices(matPrices: MatPrice[], metric: MetricType, runs_per_day: number): string {
	return matPrices.map(({ticker, amount, vwap_7d, bid, ask}) => {
		const val = metric === 'vwap' ? vwap_7d : metric === 'bid' ? (bid ?? vwap_7d) : (ask ?? vwap_7d);
		const daily_amount = amount * runs_per_day;
		return `${ticker}: ${formatSigFig(daily_amount)} × ${formatSigFig(val)} = ${formatSigFig(daily_amount * val)}`;
	}).join('\n');
}

setupPopover();
lowVolume.addEventListener('change', render);
cxSelect.addEventListener('change', render);
expertiseSelect.addEventListener('change', render);
buildingSelect.addEventListener('change', render);
render();

interface Metrics {
	vwap: number;
	bid: number;
	ask: number;
}

interface Profit {
	outputs: MatPrice[]
	recipe: string
	expertise: keyof typeof expertise
	building: string
	area: number
	capex: Metrics
	opex: Metrics
	revenue: Metrics
	input_costs: MatPrice[]
	runs_per_day: number
	logistics_per_base: number
	normalized_logistics_per_base: number // Extracted from backend explicitly for sorting/percentiles
	logistics_bottleneck: string 
	output_per_day: number
	average_traded_7d: number
	market_capacity_base: number
	ship_capex_per_base: number
	hq_costs: Record<string, Metrics>
}

interface ProfitWithMetrics extends Profit {
	capex_val: number;
	opex_val: number;
	revenue_val: number;
	profit_per_day: number;
	profit_per_base: number;
	break_even: number;
	hq_capex: number;
}

interface MatPrice {
	ticker: string
	amount: number
	vwap_7d: number
	bid: number | null
	ask: number | null
}

interface Building {
	building_type: 'INFRASTRUCTURE' | 'PLANETARY' | 'PRODUCTION';
	building_ticker: string;
	expertise: keyof typeof expertise;
}