import {setupPopover} from './popover';

const roi: Promise<{lastModified: Date, profits: Profit[]}> = (async function () {
	const response = await fetch('/roi.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 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);
}

async function render() {
	const formatDecimal = new Intl.NumberFormat(undefined,
			{maximumFractionDigits: 2, maximumSignificantDigits: 6, roundingPriority: 'lessPrecision'}).format;
	const formatWhole = new Intl.NumberFormat(undefined, {maximumFractionDigits: 0}).format;
	const tbody = document.querySelector('tbody')!;
	tbody.innerHTML = '';

	const {lastModified, profits} = await roi;
	for (const p of profits) {
		const volumeRatio = p.output_per_day / p.average_traded_7d;
		if (!lowVolume.checked && volumeRatio > 0.05)
			continue;
		if (expertiseSelect.value !== '' && p.expertise !== expertiseSelect.value)
			continue;
		const tr = document.createElement('tr');
		const profit_per_area = p.profit_per_day / p.area;
		const break_even = p.profit_per_day > 0 ? p.capex / p.profit_per_day : Infinity;
		tr.innerHTML = `
			<td>${p.output}</td>
			<td>${expertise[p.expertise]}</td>
			<td style="color: ${color(profit_per_area, 0, 250)}">${formatDecimal(profit_per_area)}</td>
			<td><span style="color: ${color(break_even, 30, 3)}">${formatDecimal(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;
		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)`;
}

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

interface Profit {
	output: string
	recipe: string
	expertise: keyof typeof expertise
	profit_per_day: number
	area: number
	capex: number
	cost_per_day: number
	logistics_per_area: number
	output_per_day: number
	average_traded_7d: number
}