---
import LoggedIn from '../../layouts/LoggedIn.astro';
import locationManager from '../../lib/classes/managers/LocationManager';
import User from '../../lib/classes/User';
import { getUserSpyReports } from '../../lib/db/users';

const user: User = Astro.locals.user;

const allGalaxies = locationManager.galaxies;

let i = 0;
const galaxies = allGalaxies.map(galaxy => {
	return {
		numericId: i++,
		name: galaxy.name,
		style: {
			left: galaxy.coords.x,
			top: galaxy.coords.y,
			color: "white"
		},
		sectors: galaxy.sectors.map(sector => {
			return {
				id: sector._id.toString(),
				name: sector.name
			};
		})
	};
});

const spyReportsDB = await getUserSpyReports(user.id);

const spyReports = spyReportsDB.map(spy => {
	const user = locationManager.getUser(spy.victimId);
	const system = locationManager.getSystem(spy.systemId);

	return {
		username: user?.username ?? "Unknown",
		systemName: system?.data.name ?? "Unknown",
		sectorId: system?.data.sector._id.toString(),
		scannedAt: spy.scannedAt,
		research: spy.research,
		resources: spy.resources,
		structures: spy.structures,
		ships: spy.ships,
		defense: spy.defense,
		planets: system?.planets.map(planet => {
			const report = spy.planets.find(p => p.id.equals(planet._id));

			return {
				id: planet._id.toString(),
				name: planet.name,
				scanned: spy.planets.find(p => p.id.equals(planet._id))?.scanned ?? false,
				scannedAt: report?.scannedAt ?? "Unknown",
				resources: report?.resources ?? [],
				buildings: report?.buildings ?? [],
				ships: report?.ships ?? [],
				defense: report?.defense ?? []
			};
		})
	}
});
---
<LoggedIn id="galaxyView" title="Galaxy view">
	<div id="report-modal-background">
		<div id="report-modal-details">
			<h3>Spy report from <span id="report-modal-date"></span> at <span id="report-modal-name"></span></h3>
			<div id="report-modal-content">
				<div class="report-modal-row">
					<div class="report-modal-card">
						<h3>Resources:</h3>
						<div id="report-modal-resources"></div>
					</div>
					<div class="report-modal-card">
						<h3 id="report-modal-structure-title">Structures:</h3>
						<div id="report-modal-structures"></div>
					</div>
				</div>
				<div class="report-modal-row">
					<div class="report-modal-card">
						
						<h3>Ships:</h3>
						<div id="report-modal-ships"></div>
					</div>
					<div class="report-modal-card">						
						<h3>Defense:</h3>
						<div id="report-modal-defense"></div>
					</div>
				</div>
				<div class="report-modal-row" id="report-modal-row-systeminfo">
					<div class="report-modal-card">
						<h3>Research:</h3>
						<div id="report-modal-research"></div>						
					</div>
					<div class="report-modal-card">
						<h3>Planets:</h3>
						<div id="report-modal-planets"></div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="container">
		<div class="galaxy-container">
			{galaxies.map(galaxy => <>
				<a href="#">
					<div class="galaxy-icon" style={`left: ${galaxy.style.left}px; top: ${galaxy.style.top}px; background-color: ${galaxy.style.color};`}>
						<div class="galaxy-name" data-sectors={JSON.stringify(galaxy.sectors)}>{galaxy.name}</div>
					</div>
				</a>
			</>)}
		</div>
		<div class="sidebar-details">
			<h2></h2>
			<div class="sidebar-list"></div>
		</div>
	</div>
</LoggedIn>
<style is:global>
.container {
	display: flex;
	flex-direction: row;
	color: white;
}

.galaxy-container {
	width: 70%;
	height: 500px;
	background-color: blue;
	margin-left: 50px;
	margin-right: auto;
	margin-top: 50px;
	position: relative;
}

.galaxy-icon {
	position:absolute;
	width: 40px;
	height: 40px;
	background-color: white;
	border-radius: 20px;
}

.galaxy-icon:hover {
	background-color: yellow !important;
}

.galaxy-name {
	position: absolute;
	top: 40px;
	left: -5px;
	color: white;
}

.sidebar-details {
	width: 23%;
	height: 500px;
	margin-top: 50px;
	margin-right: 50px;
}

.sidebar-details h2 {
	text-align: center;
}

.sidebar-list {
	display: flex;
	flex-direction: column;
}

.sidebar-list div {
	text-align: center;
	background-color: gray;
	margin-top: 10px;
	border-radius: 10px;
	padding-top: 10px;
	padding-bottom: 10px;
}

.sidebar-list .sidebar-planet {
	margin-left: 32px;
}

.sidebar-list div:hover {
	background-color: #888888;
}


#report-modal-background {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	z-index: 100;
}

#report-modal-details {
	display: none;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 80%;
	max-width: 800px;
	background: rgba(0, 0, 0, 0.9);
	border-radius: 8px;
	padding: 1rem;
	z-index: 10000;
	color: white;
}

.report-modal-row {
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
}

.report-modal-card {
	width: 45%;
}
</style>
<script define:vars={{ spyReports }}>
	function gvinit() {
		const galaxyIcons = document.querySelectorAll('.galaxy-icon');
		const sidebarDetails = document.querySelector('.sidebar-details');
		const sidebarList = document.querySelector('.sidebar-list');

		if(!galaxyIcons) return;
		if(!sidebarDetails) return;
		if(!sidebarList) return;

		galaxyIcons.forEach(icon => {
			icon.addEventListener('click', (e) => {
				const galaxy = icon.querySelector('.galaxy-name');
				if(!galaxy) return;

				const sectors = JSON.parse(galaxy.getAttribute('data-sectors') ?? "[]");
				const galaxyNameField = sidebarDetails.querySelector('h2');
				if(!galaxyNameField) return;
				galaxyNameField.innerText = icon.querySelector('.galaxy-name')?.innerText;
				sidebarList.innerHTML = "";
				sectors.forEach(sector => {
					const sectorDiv = document.createElement('div');
					const reportsInSector = spyReports.filter(spy => sector.id === spy.sectorId);
					sectorDiv.innerText = `${sector.name} (${reportsInSector.length})`;
					sectorDiv.setAttribute('data-id', sector.id);
					sectorDiv.addEventListener('click', (e) => {
						galaxyNameField.innerText = `${sector.name} (${reportsInSector.length})`;
						sidebarList.innerHTML = "";
						reportsInSector.forEach(report => {
							const reportDiv = document.createElement('div');
							reportDiv.innerText = `${report.username} - ${report.scannedAt}`;
							sidebarList.appendChild(reportDiv);

							report.planets.forEach(planet => {
								const planetDiv = document.createElement('div');
								planetDiv.innerText = `${planet.name} - ${planet.scanned ? "Scanned" : "Not scanned"}`;
								planetDiv.classList.add('sidebar-planet');

								planetDiv.addEventListener('click', () => {
									// modal
									const modalDiv = document.getElementById('report-modal-details');
									if(!modalDiv) return;
									modalDiv.style.display = 'block';

									console.log(planet)

									document.getElementById('report-modal-date').innerHTML = planet.scannedAt;
									document.getElementById('report-modal-name').innerHTML = planet.name;
									document.getElementById('report-modal-resources').innerHTML = planet.resources.map(res => `${res.id}: ${res.amount}`).join('<br>');
									document.getElementById('report-modal-structure-title').innerHTML = "Buildings:";
									document.getElementById('report-modal-structures').innerHTML = planet.buildings.map(str => `${str.id}: ${str.level}`).join('<br>');
									document.getElementById('report-modal-ships').innerHTML = planet.ships.map(ship => `${ship.id}: ${ship.amount}`).join('<br>');
									document.getElementById('report-modal-defense').innerHTML = planet.defense.map(def => `${def.id}: ${def.amount}`).join('<br>');
									document.getElementById('report-modal-row-systeminfo').style.display = 'none';

									// background
									const backgroundDiv = document.getElementById('report-modal-background');
									if(!backgroundDiv) return;
									backgroundDiv.style.display = 'block';
								});

								sidebarList.appendChild(planetDiv);
							});

							reportDiv.addEventListener('click', () => {
								// modal
								const modalDiv = document.getElementById('report-modal-details');
								if(!modalDiv) return;
								modalDiv.style.display = 'block';

								document.getElementById('report-modal-date').innerHTML = report.scannedAt;
								document.getElementById('report-modal-name').innerHTML = report.systemName;
								document.getElementById('report-modal-research').innerHTML = report.research.map(res => `${res.id}: ${res.level}`).join('<br>');
								document.getElementById('report-modal-resources').innerHTML = report.resources.map(res => `${res.id}: ${res.amount}`).join('<br>');
								document.getElementById('report-modal-structure-title').innerHTML = "Structures:";
								document.getElementById('report-modal-structures').innerHTML = report.structures.map(str => `${str.id}: ${str.level}`).join('<br>');
								document.getElementById('report-modal-ships').innerHTML = report.ships.map(ship => `${ship.id}: ${ship.amount}`).join('<br>');
								document.getElementById('report-modal-defense').innerHTML = report.defense.map(def => `${def.id}: ${def.amount}`).join('<br>');
								document.getElementById('report-modal-planets').innerHTML = report.planets.map(planet => `${planet.name} - ${planet.scanned ? "Scanned" : "Not scanned"}`).join('<br>');
								document.getElementById('report-modal-row-systeminfo').style.display = 'flex';

								// background
								const backgroundDiv = document.getElementById('report-modal-background');
								if(!backgroundDiv) return;
								backgroundDiv.style.display = 'block';
							});
						});
					});
					sidebarList.appendChild(sectorDiv);
				});
			});
		});
	}

	gvinit();	

    // close modal on background click
    const bg = document.getElementById('report-modal-background');
    
    bg?.addEventListener('click', () => {
        const modalDiv = document.getElementById('report-modal-details');
        if(!modalDiv) return;
        modalDiv.style.display = 'none';
    	bg.style.display = 'none';
    });
</script>