---
import { ObjectId } from "mongodb";
import LoggedIn from "../../../layouts/LoggedIn.astro";
import locationManager from "../../../lib/classes/managers/LocationManager";

const currentSystemId = Astro.cookies.get('currentSystem')?.value ?? null;
if(currentSystemId === null) return Astro.redirect('/game/systemManager/select');

const currentSystem = locationManager.getSystem(new ObjectId(currentSystemId));
if(currentSystem === undefined) {
    Astro.cookies.delete('currentSystem');
    return Astro.redirect('/game/systemManager/select');
}

if(Astro.request.method === "POST") {
    const selectedPlanetId = (await Astro.request.formData()).get('planetId') as string | null;

    if(selectedPlanetId !== null) {
        Astro.cookies.set('currentPlanet', selectedPlanetId, {
            path: '/',
            expires: new Date(Date.now() + 1000 * 60 * 60 * 24 * 7),
            sameSite: 'lax',
            secure: true
        });
    }

    return Astro.redirect('/game/systemManager');
}
---
<LoggedIn id="systemManager" title="System Manager">
    <h1>Selected system: {currentSystem.data.name} in {currentSystem.data.sector.name} in {currentSystem.data.sector.galaxy.name} <a href="/game/systemManager/select">(change)</a></h1>
    <div class="system-links">
        <a href="/game/systemManager">Overview</a>
        <a href="/game/systemManager/structures">System-wide structures</a>
        <a href="/game/systemManager/spaceStations">Space stations</a>
        <a href="/game/systemManager/asteroids">Asteroids</a>
    </div>
    <div class="planet-list">
        <div class="system-card">
            <h2 style="color: red;">{currentSystem.data.name}<div><form method="post"><input type="hidden" name="planetId" value={currentSystem.data._id.toString()} /><input type="submit" value="Select" /></form></div></h2>
                <h3>Resources:</h3>
                <div>
                    {currentSystem.resources.resources.length === 0 ? <span>None</span> : currentSystem.resources.resources.map(res => (
                        <p>{res.data.id} - {res.amount}</p>
                    ))}
                </div>
                <h3>Ships: </h3>
                <div>
                    {currentSystem.ships.ships.length === 0 ? <span>None</span> : currentSystem.ships.ships.map(ship => (
                        <p>{ship.data.id} - {ship.amount}</p>
                    ))}
                </div>
        </div>
        {currentSystem.planets.length === 0 ? <span>No planets in this sector</span> : currentSystem.planets.map(planet => (
            <div class="planet-card">
                <h2>{planet.name}<div><form method="post"><input type="hidden" name="planetId" value={planet._id.toString()} /><input type="submit" value="Select" /></form></div></h2>
                <p>Fields: {planet.fields}</p>
                <h3>Buildings:</h3>
                <div>
                    {planet.buildings.buildings.length === 0 ? <span>None</span> : planet.buildings.buildings.map(building => (
                        <p>{building.data.id} - {building.level}</p>
                    ))}
                </div>
                <h3>Ships: </h3>
                <div>
                    {planet.ships.ships.length === 0 ? <span>None</span> : planet.ships.ships.map(ship => (
                        <p>{ship.data.id} - {ship.amount}</p>
                    ))}
                </div>
            </div>
        ))}
    </div>
</LoggedIn>
<style>
* {
    color: white;
}

h1 {
    text-align: center;
    color: white;
}

h1 a {
    color: lime;
}

.system-links {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-bottom: 1rem;
}

.system-links a {
    color: white;
    background-color: #555;
    padding: 0.5rem;
    margin: 0 1rem;
    border-radius: 5px;
    text-decoration: none;
}

.resources {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-bottom: 1rem;
}

.ships {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-bottom: 1rem;
}

.planet-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
    color: white;
}

.system-card input {
    background-color: #555;
    color: white;
    border: none;
    padding: 0.5rem;
    border-radius: 5px;
    cursor: pointer;
}

.system-card div {
    margin-top: auto;
    margin-bottom: auto;
    margin-left: 2rem;
}
</style>