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

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 formatDecimal = new Intl.NumberFormat(undefined,
		{maximumFractionDigits: 2, maximumSignificantDigits: 6, roundingPriority: 'lessPrecision'}).format;
const formatWhole = new Intl.NumberFormat(undefined, {maximumFractionDigits: 0}).format;

// EXTREME DETAIL: These state variables track the current interactive table sort configuration.
// By defaulting to 'break_even' and 'true' (ascending), the initial page load mirrors the old default behavior.
let currentSortKey: keyof Profit | 'outputs' = 'break_even';
let currentSortAsc: boolean = true;
let headersInitialized = false;

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];

	// EXTREME DETAIL: On the very first render, we grab all table headers and wire them up with click listeners.
	// The `keys` array maps 1:1 with the columns defined in the HTML structure.
	if (!headersInitialized) {
		const ths = document.querySelectorAll('th');
		const keys: (keyof Profit | 'outputs')[] = [
			'outputs', 'expertise', 'profit_per_area', 'break_even', 
			'capex', 'cost_per_day', 'logistics_per_area', 'output_per_day'
		];
		
		ths.forEach((th, i) => {
			if (keys[i]) {
				th.style.cursor = 'pointer';
				th.title = 'Click to sort';
				th.addEventListener('click', () => {
					if (currentSortKey === keys[i]) {
						// Flip the sort direction if clicking the same column twice
						currentSortAsc = !currentSortAsc;
					} else {
						// Switch to a new column
						currentSortKey = keys[i];
						// Break Even defaults to Lowest-to-Highest. All other numbers default to Highest-to-Lowest.
						currentSortAsc = keys[i] === 'break_even' ? true : false;
					}
					// Re-trigger the render loop with the new sorting state
					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;
	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 = '';

	// EXTREME DETAIL: We extract the filtering logic into an explicit filter pass prior to rendering.
	// This separates data culling from the actual DOM string-building loop.
	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;
	});

	// EXTREME DETAIL: We execute the interactive sorting logic based on the user's header click state.
	// 'outputs' requires special handling because it is an Array of MatPrice objects, not a primitive string/number.
	filteredProfits.sort((a, b) => {
		let valA: any = a[currentSortKey as keyof Profit];
		let valB: any = b[currentSortKey as keyof Profit];
		
		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 filteredProfits) {
		const volumeRatio = p.output_per_day / p.average_traded_7d;
		const tr = document.createElement('tr');
		
		// EXTREME DETAIL: We no longer recalculate profitPerArea and breakEven here. 
		// We simply read the properties established by the Python backend via the JSON contract.
		tr.innerHTML = `
			<td>${p.outputs.map(o => o.ticker).join(', ')}</td>
			<td>${expertise[p.expertise]}</td>
			<td style="color: ${color(p.profit_per_area, 0, 300)}">${formatDecimal(p.profit_per_area)}</td>
			<td><span style="color: ${color(p.break_even, 30, 3)}">${formatDecimal(p.break_even)}</span>d</td>
			<td style="color: ${color(p.capex, 300_000, 40_000)}">${formatWhole(p.capex)}</td>
			<td style="color: ${color(p.cost_per_day, 40_000, 1_000)}">${formatWhole(p.cost_per_day)}</td>
			<td style="color: ${color(p.logistics_per_area, 2, 0.2)}">${formatDecimal(p.logistics_per_area)}</td>
			<td>
				${formatDecimal(p.output_per_day)}<br>
				<span style="color: ${color(volumeRatio, 0.05, 0.002)}">${formatWhole(p.average_traded_7d)}</span>
			</td>
		`;

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

		const profitCell = tr.querySelectorAll('td')[2];
		const revenue = p.outputs.reduce((sum, o) => sum + o.amount * o.vwap_7d, 0);
		const inputCost = p.input_costs.reduce((sum, o) => sum + o.amount * o.vwap_7d, 0);
		profitCell.dataset.tooltip = formatMatPrices(p.outputs) + '\n\n' +
			formatMatPrices(p.input_costs) + '\n' +
			'worker consumables: ' + formatWhole(p.worker_consumable_cost_per_day) + '\n\n' +
			`(${formatWhole(revenue)} - ${formatWhole(inputCost)}) × ${formatDecimal(p.runs_per_day)} runs ` +
			`- ${formatWhole(p.worker_consumable_cost_per_day)} = ${formatDecimal(p.profit_per_day)}\n` +
			`${formatDecimal(p.profit_per_day)} / ${formatWhole(p.area)} area = ${formatDecimal(p.profit_per_area)}`;

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

function color(n: number, low: number, high: number): string {
	// scale n from low..high to 0..1 clamped
	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[]): string {
	return matPrices.map(({ticker, amount, vwap_7d}) =>
		`${ticker}: ${amount} × ${formatDecimal(vwap_7d)} = ${formatWhole(amount * vwap_7d)}`).join('\n');
}

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

interface Profit {
	outputs: MatPrice[]
	recipe: string
	expertise: keyof typeof expertise
	building: string
	profit_per_day: number
	area: number
	capex: number
	cost_per_day: number
	input_costs: MatPrice[]
	worker_consumable_cost_per_day: number
	runs_per_day: number
	logistics_per_area: number
	output_per_day: number
	average_traded_7d: number
	profit_per_area: number    // Added pre-calculated property tracking
	break_even: number         // Added pre-calculated property tracking
}

interface MatPrice {
	ticker: string
	amount: number
	vwap_7d: number
}

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