"use strict";

const FRANK = "Frank";
const SARACEN = "Saracen";
const ASSASSINS = "Assassins";
const ENEMY = { Saracen: "Frank", Frank: "Saracen" }
const POOL = "Pool";
const DEAD = "Dead";

let label_layout = window.localStorage['crusader-rex/label-layout'] || 'spread';

function set_spread_layout() {
	label_layout = 'spread';
	window.localStorage['crusader-rex/label-layout'] = label_layout;
	update_map();
}

function set_stack_layout() {
	label_layout = 'stack';
	window.localStorage['crusader-rex/label-layout'] = label_layout;
	update_map();
}

function toggle_blocks() {
	document.getElementById("map").classList.toggle("hide_blocks");
}

let map_orientation = window.localStorage['crusader-rex/map-orientation'] || 'tall';

function tall_map() {
	map_orientation = 'tall';
	document.querySelector(".map").classList.remove("wide");
	document.querySelector(".map").classList.add("tall");
	window.localStorage['crusader-rex/map-orientation'] = map_orientation;
	update_map_layout();
	update_map();
	zoom_map();
}

function wide_map() {
	map_orientation = 'wide';
	document.querySelector(".map").classList.add("wide");
	document.querySelector(".map").classList.remove("tall");
	window.localStorage['crusader-rex/map-orientation'] = map_orientation;
	update_map_layout();
	update_map();
	zoom_map();
}

let ui = {
	cards: {},
	towns: {},
	known: {},
	secret: { Frank: {}, Saracen: {}, Assassins: {} },
	battle_menu: {},
	battle_block: {},
	present: new Set(),
}

function on_focus_town(evt) {
	let where = evt.target.town;
	let text = where;
	document.getElementById("status").textContent = text;
}

function on_blur_town(evt) {
	document.getElementById("status").textContent = "";
}

function on_click_town(evt) {
	let where = evt.target.town;
	if (game.actions && game.actions.town && game.actions.town.includes(where))
		socket.emit('action', 'town', where);
}

const STEP_TEXT = [ 0, "I", "II", "III", "IIII" ];
const HEIR_TEXT = [ 0, '\u00b9', '\u00b2', '\u00b3', '\u2074', '\u2075' ];

function block_name(who) { return BLOCKS[who].name; }
function block_home(who) { return BLOCKS[who].home; }
function block_owner(who) { return BLOCKS[who].owner; }

function on_focus_secret_block(evt) {
	let owner = evt.target.owner;
	let text = owner;
	document.getElementById("status").textContent = text;
}

function on_blur_secret_block(evt) {
	document.getElementById("status").textContent = "";
}

function on_click_secret_block(evt) {
}

function on_focus_map_block(evt) {
	let b = evt.target.block;
	let s = game.known[b][1];
	let text = block_name(b) + " (" + block_home(b) + ") ";
	if (BLOCKS[b].move)
		text += BLOCKS[b].move + "-";
	text += STEP_TEXT[s] + "-" + BLOCKS[b].combat;
	document.getElementById("status").textContent = text;
}

function on_blur_map_block(evt) {
	document.getElementById("status").textContent = "";
}

function on_click_map_block(evt) {
	let b = evt.target.block;
	if (game.actions && game.actions.block && game.actions.block.includes(b))
		socket.emit('action', 'block', b);
}

function is_battle_reserve(who, list) {
	for (let [b, s, m] of list)
		if (who == b)
			return true;
	return false;
}

function on_focus_battle_block(evt) {
	let b = evt.target.block;
	let msg = block_name(b);
	if (is_battle_reserve(b, game.battle.FR))
		msg = "Frank Reserve";
	if (is_battle_reserve(b, game.battle.SR))
		msg = "Saracen Reserve";

	if (game.actions && game.actions.battle_fire && game.actions.battle_fire.includes(b))
		msg = "Fire with " + msg;
	else if (game.actions && game.actions.battle_retreat && game.actions.battle_retreat.includes(b))
		msg = "Retreat with " + msg;
	else if (game.actions && game.actions.battle_hit && game.actions.battle_hit.includes(b))
		msg = "Take hit on " + msg;

	document.getElementById("status").textContent = msg;
}

function on_blur_battle_block(evt) {
	document.getElementById("status").textContent = "";
}

function on_click_battle_block(evt) {
	let b = evt.target.block;
	if (game.actions && game.actions.block && game.actions.block.includes(b))
		socket.emit('action', 'block', b);
}

function on_focus_battle_fire(evt) {
	document.getElementById("status").textContent =
		"Fire with " + block_name(evt.target.block);
}

function on_focus_battle_retreat(evt) {
	document.getElementById("status").textContent =
		"Retreat with " + block_name(evt.target.block);
}

function on_focus_battle_harry(evt) {
	document.getElementById("status").textContent =
		"Harry with " + block_name(evt.target.block);
}

function on_focus_battle_charge(evt) {
	document.getElementById("status").textContent =
		"Charge with " + block_name(evt.target.block);
}

function on_focus_battle_hit(evt) {
	document.getElementById("status").textContent =
		"Take hit on " + block_name(evt.target.block);
}

function on_blur_battle_button(evt) {
	document.getElementById("status").textContent = "";
}

function on_click_battle_hit(evt) { socket.emit('action', 'battle_hit', evt.target.block); }
function on_click_battle_fire(evt) { socket.emit('action', 'battle_fire', evt.target.block); }
function on_click_battle_retreat(evt) { socket.emit('action', 'battle_retreat', evt.target.block); }
function on_click_battle_charge(evt) { socket.emit('action', 'battle_charge', evt.target.block); }
function on_click_battle_harry(evt) { socket.emit('action', 'battle_harry', evt.target.block); }

function on_click_card(evt) {
	let c = evt.target.id.split("+")[1] | 0;
	if (game.actions && game.actions.play && game.actions.play.includes(c))
		socket.emit('action', 'play', c);
}

function on_button_undo(evt) { send_action('undo'); }
function on_button_pass(evt) { send_action('pass'); }
function on_button_sea_move(evt) { send_action('sea_move'); }
function on_button_muster(evt) { send_action('muster'); }
function on_button_end_muster(evt) { send_action('end_muster'); }
function on_button_end_sea_move(evt) { send_action('end_sea_move'); }
function on_button_end_move_phase(evt) { send_action('end_move_phase'); }
function on_button_end_regroup(evt) { send_action('end_regroup'); }
function on_button_end_retreat(evt) { send_action('end_retreat'); }
function on_button_eliminate(evt) { send_action('eliminate'); }

function build_battle_button(menu, b, c, click, enter, img_src) {
	let img = new Image();
	img.draggable = false;
	img.classList.add("action");
	img.classList.add(c);
	img.setAttribute("src", img_src);
	img.addEventListener("click", click);
	img.addEventListener("mouseenter", enter);
	img.addEventListener("mouseleave", on_blur_battle_button);
	img.block = b;
	menu.appendChild(img);
}

function build_battle_block(b, block) {
	let element = document.createElement("div");
	element.classList.add("block");
	element.classList.add("known");
	element.classList.add(BLOCKS[b].owner);
	element.classList.add("block_" + block.image);
	element.addEventListener("mouseenter", on_focus_battle_block);
	element.addEventListener("mouseleave", on_blur_battle_block);
	element.addEventListener("click", on_click_battle_block);
	element.block = b;
	ui.battle_block[b] = element;

	let menu_list = document.createElement("div");
	menu_list.classList.add("battle_menu_list");

	build_battle_button(menu_list, b, "hit",
		on_click_battle_hit, on_focus_battle_hit,
		"/images/cross-mark.svg");
	build_battle_button(menu_list, b, "charge",
		on_click_battle_charge, on_focus_battle_charge,
		"/images/mounted-knight.svg");
	build_battle_button(menu_list, b, "fire",
		on_click_battle_fire, on_focus_battle_fire,
		"/images/pointy-sword.svg");
	build_battle_button(menu_list, b, "harry",
		on_click_battle_harry, on_focus_battle_harry,
		"/images/arrow-flights.svg");
	build_battle_button(menu_list, b, "retreat",
		on_click_battle_retreat, on_focus_battle_retreat,
		"/images/flying-flag.svg");

	let menu = document.createElement("div");
	menu.classList.add("battle_menu");
	menu.appendChild(element);
	menu.appendChild(menu_list);
	ui.battle_menu[b] = menu;
}

function build_known_block(b, block) {
	let element = document.createElement("div");
	element.classList.add("block");
	element.classList.add("known");
	element.classList.add(BLOCKS[b].owner);
	element.classList.add("block_" + block.image);
	element.addEventListener("mouseenter", on_focus_map_block);
	element.addEventListener("mouseleave", on_blur_map_block);
	element.addEventListener("click", on_click_map_block);
	element.block = b;
	return element;
}

function build_secret_block(b, block, secret_index) {
	let element = document.createElement("div");
	element.secret_index = secret_index;
	element.classList.add("block");
	element.classList.add("secret");
	element.classList.add(BLOCKS[b].owner);
	element.addEventListener("mouseenter", on_focus_secret_block);
	element.addEventListener("mouseleave", on_blur_secret_block);
	element.addEventListener("click", on_click_secret_block);
	element.owner = BLOCKS[b].owner;
	return element;
}

/*
let MAP_OFFSET_X = 30;
let MAP_OFFSET_Y = 30;
let MAP_HEIGHT = 1215;
*/
let MAP_OFFSET_X = 0;
let MAP_OFFSET_Y = 0;
let MAP_HEIGHT = 1275;

function town_x(t) {
	if (map_orientation == 'tall')
		return TOWNS[t].x - MAP_OFFSET_X;
	else
		return TOWNS[t].y - MAP_OFFSET_Y;
}

function town_y(t) {
	if (map_orientation == 'tall')
		return TOWNS[t].y - MAP_OFFSET_Y;
	else
		return MAP_HEIGHT - TOWNS[t].x + MAP_OFFSET_X;
}

function flip_x(x, y) {
	if (map_orientation == 'tall')
		return x - MAP_OFFSET_X;
	else
		return y - MAP_OFFSET_Y;
}

function flip_y(x, y) {
	if (map_orientation == 'tall')
		return y - MAP_OFFSET_Y;
	else
		return MAP_HEIGHT - x + MAP_OFFSET_X;
}

function build_town(t, town) {
	let element = document.createElement("div");
	element.town = t;
	element.classList.add("town");
	element.addEventListener("mouseenter", on_focus_town);
	element.addEventListener("mouseleave", on_blur_town);
	element.addEventListener("click", on_click_town);
	ui.towns_element.appendChild(element);
	return element;
}

function update_map_layout() {
	for (let t in TOWNS) {
		let element = ui.towns[t];
		element.style.left = (town_x(t) - 35) + "px";
		element.style.top = (town_y(t) - 35) + "px";
	}
}

function build_map() {
	let element;

	ui.blocks_element = document.getElementById("blocks");
	ui.offmap_element = document.getElementById("offmap");
	ui.towns_element = document.getElementById("towns");

	for (let c = 1; c <= 27; ++c) {
		ui.cards[c] = document.getElementById("card+"+c);
		ui.cards[c].addEventListener("click", on_click_card);
	}

	for (let name in TOWNS) {
		let town = TOWNS[name];
		ui.towns[name] = build_town(name, town);
		ui.secret.Frank[name] = [];
		ui.secret.Saracen[name] = [];
		ui.secret.Assassins[name] = [];
	}
	ui.secret.Frank.offmap = [];
	ui.secret.Saracen.offmap = [];
	ui.secret.Assassins.offmap = [];

	for (let b in BLOCKS) {
		let block = BLOCKS[b];
		build_battle_block(b, block);
		ui.known[b] = build_known_block(b, block);
		let e = build_secret_block(b, block, ui.secret[BLOCKS[b].owner].offmap.length);
		ui.secret[BLOCKS[b].owner].offmap.push(e);
	}

	update_map_layout();
}

function update_steps(b, steps, element) {
	element.classList.remove("r1");
	element.classList.remove("r2");
	element.classList.remove("r3");
	element.classList.add("r"+(BLOCKS[b].steps - steps));
}

function layout_blocks(location, secret, known) {
	if (label_layout == 'spread' || (location == POOL || location == DEAD))
		layout_blocks_spread(location, secret, known);
	else
		layout_blocks_stacked(location, secret, known);
}

function layout_blocks_spread(town, secret, known) {
	let wrap = TOWNS[town].wrap;
	let s = secret.length;
	let k = known.length;
	let n = s + k;
	let row, rows = [];
	let i = 0;

	function new_line() {
		rows.push(row = []);
		i = 0;
	}

	new_line();

	while (secret.length > 0) {
		if (i == wrap)
			new_line();
		row.push(secret.shift());
		++i;
	}

	// Break early if secret and known fit in exactly two rows, and more than three blocks total
	if (s > 0 && s <= wrap && k > 0 && k <= wrap && n > 3)
		new_line();

	while (known.length > 0) {
		if (i == wrap)
			new_line();
		row.push(known.shift());
		++i;
	}

	if (TOWNS[town].layout_minor > 0.5)
		rows.reverse();

	for (let j = 0; j < rows.length; ++j)
		for (i = 0; i < rows[j].length; ++i)
			position_block(town, j, rows.length, i, rows[j].length, rows[j][i]);
}

function position_block(town, row, n_rows, col, n_cols, element) {
	let space = TOWNS[town];
	let block_size = 60+6;
	let padding = 4;
	let offset = block_size + padding;
	let row_size = (n_rows-1) * offset;
	let col_size = (n_cols-1) * offset;
	let x = space.x;
	let y = space.y;

	if (space.layout_axis == 'X') {
		x -= col_size * space.layout_major;
		y -= row_size * space.layout_minor;
		x += col * offset;
		y += row * offset;
	} else {
		y -= col_size * space.layout_major;
		x -= row_size * space.layout_minor;
		y += col * offset;
		x += row * offset;
	}

	element.style.left = ((flip_x(x,y) - block_size/2)|0)+"px";
	element.style.top = ((flip_y(x,y) - block_size/2)|0)+"px";
}

function layout_blocks_stacked(location, secret, known) {
	let s = secret.length;
	let k = known.length;
	let both = secret.length > 0 && known.length > 0;
	let i = 0;
	while (secret.length > 0)
		position_block_stacked(location, i++, (s-1)/2, both ? 1 : 0, secret.shift());
	i = 0;
	while (known.length > 0)
		position_block_stacked(location, i++, (k-1)/2, 0, known.shift());
}

function position_block_stacked(location, i, c, k, element) {
	let space = TOWNS[location];
	let block_size = 60+6;
	let x, y;
	if (map_orientation == 'tall') {
		x = space.x + (i - c) * 12 + k * 12;
		y = space.y + (i - c) * 16 - k * 8;
	} else {
		x = space.x - (i - c) * 12 + k * 12;
		y = space.y + (i - c) * 16 + k * 8;
	}
	element.style.left = ((flip_x(x,y) - block_size/2)|0)+"px";
	element.style.top = ((flip_y(x,y) - block_size/2)|0)+"px";
}

function show_block(element) {
	if (element.parentElement != ui.blocks_element)
		ui.blocks_element.appendChild(element);
}

function hide_block(element) {
	if (element.parentElement != ui.offmap_element)
		ui.offmap_element.appendChild(element);
}

function show_block(element) {
	if (element.parentElement != ui.blocks_element)
		ui.blocks_element.appendChild(element);
}

function hide_block(element) {
	if (element.parentElement != ui.offmap_element)
		ui.offmap_element.appendChild(element);
}

function update_map() {
	let overflow = { Frank: [], Saracen: [], Assassins: [] };
	let layout = {};

	document.getElementById("turn").textContent = "Year " + game.year + " (" + (game.year-1186) + "/6)" ;

	for (let town in TOWNS)
		layout[town] = { secret: [], known: [] };

	// Move secret blocks to overflow queue if there are too many in a town
	for (let town in TOWNS) {
		for (let color of [FRANK, SARACEN, ASSASSINS]) {
			if (game.secret[color]) {
				let max = game.secret[color][town] ? game.secret[color][town][0] : 0;
				while (ui.secret[color][town].length > max) {
					overflow[color].push(ui.secret[color][town].pop());
				}
			}
		}
	}

	// Add secret blocks if there are too few in a location
	for (let town in TOWNS) {
		for (let color of [FRANK, SARACEN, ASSASSINS]) {
			if (game.secret[color]) {
				let max = game.secret[color][town] ? game.secret[color][town][0] : 0;
				while (ui.secret[color][town].length < max) {
					if (overflow[color].length > 0) {
						ui.secret[color][town].push(overflow[color].pop());
					} else {
						let element = ui.secret[color].offmap.pop();
						show_block(element);
						ui.secret[color][town].push(element);
					}
				}
			}
		}
	}

	// Remove any blocks left in the overflow queue
	for (let color of [FRANK, SARACEN, ASSASSINS]) {
		while (overflow[color].length > 0) {
			let element = overflow[color].pop();
			hide_block(element);
			ui.secret[color].offmap.push(element);
		}
	}

	// Hide formerly known blocks
	for (let b in BLOCKS) {
		if (!(b in game.known)) {
			hide_block(ui.known[b]);
		}
	}

	// Add secret blocks to layout
	for (let town in TOWNS) {
		for (let color of [FRANK, SARACEN, ASSASSINS]) {
			let i = 0, n = 0, m = 0;
			if (game.secret[color] && game.secret[color][town]) {
				n = game.secret[color][town][0];
				m = game.secret[color][town][1];
			}
			// Preserve block stacking order, but lets the user track block identities...
			if (label_layout == 'stack')
				ui.secret[color][town].sort((a,b) => b.secret_index - a.secret_index);
			for (let element of ui.secret[color][town]) {
				if (i++ < n - m)
					element.classList.remove("moved");
				else
					element.classList.add("moved");
				layout[town].secret.push(element);
			}
		}
	}

	// Add known blocks to layout
	for (let b in game.known) {
		let town = game.known[b][0];
		if (town) {
			let steps = game.known[b][1];
			let moved = game.known[b][2];
			let element = ui.known[b];

			show_block(element);
			layout[town].known.push(element);
			update_steps(b, steps, element);

			if (moved)
				element.classList.add("moved");
			else
				element.classList.remove("moved");
		}
	}

	// Layout blocks on map
	for (let town in TOWNS)
		layout_blocks(town, layout[town].secret, layout[town].known);

	for (let where in TOWNS) {
		if (ui.towns[where]) {
			ui.towns[where].classList.remove('highlight');
			ui.towns[where].classList.remove('where');
		}
	}
	if (game.actions && game.actions.town)
		for (let where of game.actions.town)
			ui.towns[where].classList.add('highlight');
	if (game.where)
		ui.towns[game.where].classList.add('where');

	for (let b in BLOCKS) {
		ui.known[b].classList.remove('highlight');
		ui.known[b].classList.remove('selected');
	}
	if (!game.battle) {
		if (game.actions && game.actions.block)
			for (let b of game.actions.block)
				ui.known[b].classList.add('highlight');
		if (game.who)
			ui.known[game.who].classList.add('selected');
	}
}

function update_cards() {
	let cards = game.hand;
	for (let c = 1; c <= 27; ++c) {
		ui.cards[c].classList.remove('enabled');
		if (cards && cards.includes(c))
			ui.cards[c].classList.add('show');
		else
			ui.cards[c].classList.remove('show');
	}

	if (game.actions && game.actions.play) {
		for (let c of game.actions.play)
			ui.cards[c].classList.add('enabled');
	}

	if (!game.f_card)
		document.querySelector("#frank_card").className = "small_card card_back";
	else
		document.querySelector("#frank_card").className = "small_card " + CARDS[game.f_card].image;
	if (!game.s_card)
		document.querySelector("#saracen_card").className = "small_card card_back";
	else
		document.querySelector("#saracen_card").className = "small_card " + CARDS[game.s_card].image;
}

function update_battle() {
	function fill_cell(name, list, reserve) {
		let cell = window[name];

		ui.present.clear();

		for (let [block, steps, moved] of list) {
			ui.present.add(block);

			if (block == game.who)
				ui.battle_block[block].classList.add("selected");
			else
				ui.battle_block[block].classList.remove("selected");

			ui.battle_block[block].classList.remove("highlight");
			ui.battle_menu[block].classList.remove('hit');
			ui.battle_menu[block].classList.remove('charge');
			ui.battle_menu[block].classList.remove('fire');
			ui.battle_menu[block].classList.remove('harry');
			ui.battle_menu[block].classList.remove('retreat');

			if (game.actions && game.actions.block && game.actions.block.includes(block))
				ui.battle_block[block].classList.add("highlight");
			if (game.actions && game.actions.battle_fire && game.actions.battle_fire.includes(block))
				ui.battle_menu[block].classList.add('fire');
			if (game.actions && game.actions.battle_retreat && game.actions.battle_retreat.includes(block))
				ui.battle_menu[block].classList.add('retreat');
			if (game.actions && game.actions.battle_harry && game.actions.battle_harry.includes(block))
				ui.battle_menu[block].classList.add('harry');
			if (game.actions && game.actions.battle_charge && game.actions.battle_charge.includes(block))
				ui.battle_menu[block].classList.add('charge');
			if (game.actions && game.actions.battle_hit && game.actions.battle_hit.includes(block))
				ui.battle_menu[block].classList.add('hit');
			if (game.actions && game.actions.battle_charge && game.actions.battle_charge.includes(block))
				ui.battle_menu[block].classList.add('charge');
			if (game.actions && game.actions.battle_treachery && game.actions.battle_treachery.includes(block))
				ui.battle_menu[block].classList.add('treachery');

			update_steps(block, steps, ui.battle_block[block], false);
			if (reserve)
				ui.battle_block[block].classList.add("secret");
			else
				ui.battle_block[block].classList.remove("secret");
			if (moved)
				ui.battle_block[block].classList.add("moved");
			else
				ui.battle_block[block].classList.remove("moved");
			if (reserve)
				ui.battle_block[block].classList.remove("known");
			else
				ui.battle_block[block].classList.add("known");
		}

		for (let b in BLOCKS) {
			if (ui.present.has(b)) {
				if (!cell.contains(ui.battle_menu[b]))
					cell.appendChild(ui.battle_menu[b]);
			} else {
				if (cell.contains(ui.battle_menu[b]))
					cell.removeChild(ui.battle_menu[b]);
			}
		}
	}

	if (player == FRANK) {
		fill_cell("FR", game.battle.FR, true);
		fill_cell("FA", game.battle.FA, false);
		fill_cell("FB", game.battle.FB, false);
		fill_cell("FC", game.battle.FC, false);
		fill_cell("EA", game.battle.SA, false);
		fill_cell("EB", game.battle.SB, false);
		fill_cell("EC", game.battle.SC, false);
		fill_cell("ER", game.battle.SR, true);
	} else {
		fill_cell("ER", game.battle.FR, true);
		fill_cell("EA", game.battle.FA, false);
		fill_cell("EB", game.battle.FB, false);
		fill_cell("EC", game.battle.FC, false);
		fill_cell("FA", game.battle.SA, false);
		fill_cell("FB", game.battle.SB, false);
		fill_cell("FC", game.battle.SC, false);
		fill_cell("FR", game.battle.SR, true);
	}
}

function on_update() {
	show_action_button("#pass_button", "pass");
	show_action_button("#undo_button", "undo");
	show_action_button("#sea_move_button", "sea_move");
	show_action_button("#muster_button", "muster");
	show_action_button("#end_muster_button", "end_muster");
	show_action_button("#end_sea_move_button", "end_sea_move");
	show_action_button("#end_move_phase_button", "end_move_phase");
	show_action_button("#end_regroup_button", "end_regroup");
	show_action_button("#end_retreat_button", "end_retreat");
	show_action_button("#eliminate_button", "eliminate");

	document.getElementById("frank_vp").textContent = game.f_vp;
	document.getElementById("saracen_vp").textContent = game.s_vp;

	update_cards();
	update_map();

	if (game.battle) {
		document.querySelector(".battle_header").textContent = game.battle.title;
		document.querySelector(".battle_message").textContent = game.battle.flash;
		document.querySelector(".battle").classList.add("show");
		update_battle();
	} else {
		document.querySelector(".battle").classList.remove("show");
	}
}

build_map();

document.querySelector(".map").classList.add(map_orientation);

drag_element_with_mouse(".battle", ".battle_header");
scroll_with_middle_mouse(".grid_center", 3);
init_map_zoom();
init_shift_zoom();
init_client(["Frank", "Saracen"]);