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;

// EXTREME DETAIL: We replace the distinct `formatWhole` and `formatDecimal` formatters with a unified 
// `formatSigFig` formatter. Utilizing the `compact` notation automatically caps the output at 
// 3 significant figures and organically appends "K", "M", etc. to large numbers.
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') || '';

let currentSortKey: keyof ProfitWithMetrics | 'outputs' = (localStorage.getItem('roi-sort-key') as any) || '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';

// EXTREME DETAIL: Track the state of the user's working capital input. Default to 3 days.
let workingCapitalDays: number = parseInt(localStorage.getItem('roi-working-capital') || '3', 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';
		// EXTREME DETAIL: Added the numerical input `<input type="number">` allowing users to configure
		// exactly how many days of OpEx should be buffered into their CapEx.
		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>
				<input type="number" id="working-capital" min="0" step="1" style="width: 50px;"> Days OpEx
			</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('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();
		});
		metricControlsInitialized = true;
	}

	if (!headersInitialized) {
		const ths = document.querySelectorAll('th');
		const keys: (keyof ProfitWithMetrics | 'outputs')[] = [
			'outputs', 'expertise', 'profit_per_base', 'break_even', 
			'capex_val', 'opex_val', '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.';
				} 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), 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] === '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.';
				} 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 (days of OpEx) 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 = ''; 

	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;
		
		// EXTREME DETAIL: CapEx now completely absorbs the working capital (days of OpEx).
		// Because we moved the addition directly into `capex_val`, it will be explicitly rendered 
		// inside the CapEx column on the dashboard, making the break-even math visually apparent.
		let capex_val = (p.capex[capexMetric] / bases) + (opex_val * workingCapitalDays);
		
		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 };
	});

	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 volumeRatio = p.output_per_day / p.average_traded_7d;
		const tr = document.createElement('tr');
		
		// EXTREME DETAIL: We replaced all formatDecimal/formatWhole calls with formatSigFig.
		// Additionally, we append the newly generated bottleneck string onto the Logistics cell.
		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)}</td>
			<td><span style="color: ${color(p.break_even, 30, 3)}">${formatSigFig(p.break_even)}</span>d</td>
			<td style="color: ${color(p.capex_val, 3_000_000, 400_000)}">${formatSigFig(p.capex_val)}</td>
			<td style="color: ${color(p.opex_val, 400_000, 10_000)}">${formatSigFig(p.opex_val)}</td>
			<td style="color: ${color(p.logistics_per_base, 1000, 100)}">${formatSigFig(p.logistics_per_base)} ${p.logistics_bottleneck}</td>
			<td style="color: ${color(p.market_capacity_base, 0.04, 1)}">${formatSigFig(p.market_capacity_base)}</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)}`;

		// EXTREME DETAIL: Because working capital is now part of CapEx, we break down
		// the constituent components in the tooltip so the math is transparent.
		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 (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();
}

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());
}

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
	logistics_bottleneck: string // Extracted from backend
	output_per_day: number
	average_traded_7d: number
	market_capacity_base: number
	ship_capex_per_base: number
}

interface ProfitWithMetrics extends Profit {
	capex_val: number;
	opex_val: number;
	revenue_val: number;
	profit_per_day: number;
	profit_per_base: number;
	break_even: 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;
}