<?php
$navSuspended = false;
$navSuspensionReason = '';
$navSuspendedUntil = null;
$navAvatarUrl = null;
$navAvatarInitial = '?';

require_once $_SERVER['DOCUMENT_ROOT'] . '/includes/user_avatar.php';

$sessionUsername = (string)($_SESSION['username'] ?? '');
$navAvatarInitial = og_avatar_initial($sessionUsername);

if (!empty($_SESSION['logged_in']) && !empty($_SESSION['user_id']) && function_exists('og_session_get_pdo')) {
	require_once $_SERVER['DOCUMENT_ROOT'] . '/includes/account_suspension.php';
	try {
		$pdoNav = og_session_get_pdo();
		if ($pdoNav instanceof PDO) {
			$state = og_is_current_user_suspended($pdoNav);
			$navSuspended = (bool)($state['is_suspended'] ?? false);
			$navSuspensionReason = (string)($state['reason'] ?? '');
			$navSuspendedUntil = $state['suspended_until'] ?? null;

			$avatarFile = og_get_user_avatar_file($pdoNav, (int)$_SESSION['user_id']);
			if ($avatarFile) {
				$navAvatarUrl = og_avatar_file_to_url($avatarFile);
			}
		}
	} catch (Throwable $e) {
		$navSuspended = false;
	}
}
?>
<nav class="navigation"<?php if ($navSuspended): ?> style="flex-wrap:wrap;height:auto;min-height:100px;align-content:center;"<?php endif; ?>>
	<div class="logo">
		<a href="https://togethere.cloud/home/"><img src="/img/logo_temp.png" class="logo-img" alt="Logo Wspólnie"/></a>
	</div>
	<ul class="linksLogged">
		<li><a href="https://togethere.cloud/home/">Start</a></li>
		<li><a href="https://togethere.cloud/disciplines/">Dyscypliny</a></li>
		<!-- DISABLED: <li><a href="https://togethere.cloud/teams/">Drużyny</a></li> -->
		<li><a href="https://togethere.cloud/matches/">Mecze</a></li>
		<!-- DISABLED: <li><a href="https://togethere.cloud/leagues/">Ligi</a></li> -->
		<!-- DISABLED: <li><a href="https://togethere.cloud/tournaments/">Turnieje</a></li> -->
		<!-- DISABLED: <li><a href="https://togethere.cloud/bok/">BOK</a></li> -->
		<li class="account-menu" id="accountMenuItem">
			<button type="button" class="account-menu-trigger" id="accountMenuTrigger" aria-haspopup="true" aria-expanded="false">
				<span class="account-mini-avatar" aria-hidden="true">
					<?php if ($navAvatarUrl): ?>
						<img src="<?php echo htmlspecialchars($navAvatarUrl, ENT_QUOTES, 'UTF-8'); ?>" alt="">
					<?php else: ?>
						<?php echo htmlspecialchars($navAvatarInitial, ENT_QUOTES, 'UTF-8'); ?>
					<?php endif; ?>
				</span>
				<span>Konto</span>
			</button>
			<div class="account-dropdown" id="accountDropdown" role="menu" aria-label="Menu konta">
				<a href="https://togethere.cloud/account/profile/" role="menuitem">Mój Profil</a>
				<a href="https://togethere.cloud/my/my_matches/" role="menuitem">Moje Mecze</a>
				<!-- DISABLED: <a href="https://togethere.cloud/my/my_tournaments/" role="menuitem">Moje Turnieje</a> -->
				<!-- DISABLED: <a href="https://togethere.cloud/my/my_leagues/" role="menuitem">Moje Ligi</a> -->
				<a href="https://togethere.cloud/account/wallet/" role="menuitem">Mój portfel</a>
				<!-- DISABLED: <a href="https://togethere.cloud/my/my_tickets/" role="menuitem">Moje zgłoszenia</a> -->
				<?php if (isset($_SESSION['role']) && $_SESSION['role'] === 'admin'): ?>
					<a href="https://togethere.cloud/administration/" role="menuitem">Administrator</a>
				<?php endif; ?>
				<a href="https://togethere.cloud/account/settings/" role="menuitem">Ustawienia</a>
				<a href="https://togethere.cloud/account/logout.php" role="menuitem">Wyloguj</a>
			</div>
		</li>
	</ul>
	<div class="hamburger">
		<div class="line"></div>
		<div class="line"></div>
		<div class="line"></div>
	</div>
	<?php if ($navSuspended): ?>
	<div class="nav-suspension-bar" data-account-suspended="1" data-suspension-reason="<?php echo htmlspecialchars($navSuspensionReason, ENT_QUOTES, 'UTF-8'); ?>" data-suspended-until="<?php echo htmlspecialchars((string)($navSuspendedUntil ?: ''), ENT_QUOTES, 'UTF-8'); ?>">
		<span class="nav-susp-icon">⛔</span>
		<span class="nav-susp-text">
			<strong>Konto zawieszone.</strong>
			<?php if ($navSuspensionReason !== ''): ?>
				Powód: <em><?php echo htmlspecialchars($navSuspensionReason, ENT_QUOTES, 'UTF-8'); ?></em>.
			<?php endif; ?>
			<?php if (!empty($navSuspendedUntil)): ?>
				Do: <?php echo htmlspecialchars((string)$navSuspendedUntil, ENT_QUOTES, 'UTF-8'); ?>.
			<?php else: ?>
				Bezterminowe.
			<?php endif; ?>
			Dostęp do gier i zmian konta jest zablokowany.
		</span>
	</div>
	<?php endif; ?>
</nav>
<style>
	.nav-suspension-bar {
		width: 100%;
		flex-basis: 100%;
		display: flex;
		align-items: center;
		gap: 10px;
		padding: 7px 30px;
		background: linear-gradient(90deg, #b71c1c 0%, #c62828 100%);
		color: #fff;
		font-size: 13px;
		line-height: 1.5;
		border-top: 1px solid rgba(255,255,255,0.15);
		margin-top: 10px;
		animation: navSuspPulse 2s ease-in-out infinite;
	}

	.nav-susp-icon {
		flex-shrink: 0;
		font-size: 16px;
	}

	.nav-susp-text em {
		font-style: normal;
		font-weight: 700;
	}

	@keyframes navSuspPulse {
		0%, 100% { opacity: 1; }
		50% { opacity: 0.82; }
	}

	.linksLogged {
		display: flex;
		align-items: center;
	}

	.linksLogged > li {
		display: flex;
		align-items: center;
	}

	.account-menu {
		position: relative;
	}

	.account-menu-trigger {
		appearance: none;
		border: 0;
		background: transparent;
		color: #007BFF;
		font-weight: 600;
		padding: 6px 10px;
		border-radius: 5px;
		transition: all 0.3s ease;
		cursor: pointer;
		font-family: inherit;
		font-size: 1em;
		line-height: 1;
		letter-spacing: normal;
		font-style: normal;
		display: inline-flex;
		align-items: center;
		gap: 8px;
		margin: 0;
		position: relative;
		top: 0;
	}

	.account-mini-avatar {
		width: 28px;
		height: 28px;
		border-radius: 50%;
		display: grid;
		place-items: center;
		font-size: 0.86em;
		font-weight: 700;
		color: #ffffff;
		background: linear-gradient(135deg, #42a5f5, #1976d2);
		overflow: hidden;
		box-shadow: 0 4px 10px rgba(33, 150, 243, 0.3);
	}

	.account-mini-avatar img {
		width: 100%;
		height: 100%;
		display: block;
		object-fit: cover;
	}

	.account-menu-trigger:hover,
	.account-menu-trigger:focus-visible {
		background: #007BFF;
		color: #ffffff;
		outline: none;
	}

	.account-dropdown {
		display: none;
		position: absolute;
		top: calc(100% + 8px);
		right: 0;
		min-width: 220px;
		background: #ffffff;
		border: 1px solid rgba(0, 123, 255, 0.2);
		border-radius: 10px;
		box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
		padding: 8px;
		display: none;
		grid-template-columns: 1fr;
		gap: 2px;
		z-index: 10010;
	}

	.account-dropdown a {
		display: flex;
		align-items: center;
		padding: 10px 12px;
		min-height: 44px;
		line-height: 1.3;
		border-radius: 7px;
		text-decoration: none;
		color: #007BFF;
		font-weight: 600;
	}

	.account-dropdown a:hover,
	.account-dropdown a:focus-visible {
		background: #007BFF;
		color: #ffffff;
		outline: none;
	}

	.account-menu:hover .account-dropdown,
	.account-menu:focus-within .account-dropdown,
	.account-menu.open .account-dropdown {
		display: grid;
	}

	@media (max-width: 800px) {
		.linksLogged.active {
			align-items: stretch;
		}

		.linksLogged.active > li {
			width: 90%;
			justify-content: center;
		}

		.linksLogged.active .account-menu {
			width: 90%;
			position: relative;
			display: flex;
			flex-direction: column;
			align-items: center;
		}

		.linksLogged.active .account-menu-trigger {
			display: block;
			width: auto;
			text-align: center;
		}

		.linksLogged.active .account-dropdown {
			position: absolute;
			top: calc(100% + 8px);
			left: 50%;
			right: auto;
			transform: translateX(-50%);
			min-width: 220px;
			max-width: calc(100vw - 24px);
			margin-top: 0;
			box-shadow: none;
			border-radius: 8px;
			border-color: rgba(0, 123, 255, 0.25);
			background: #ffffff;
		}

		.account-dropdown a {
			justify-content: center;
			text-align: center;
		}
	}
</style>
<script>
	document.addEventListener('DOMContentLoaded', function () {
		var menuItem = document.getElementById('accountMenuItem');
		var trigger = document.getElementById('accountMenuTrigger');
		var suspensionBanner = document.querySelector('[data-account-suspended="1"]');
		var hoverCloseTimer = null;
		var HOVER_CLOSE_DELAY_MS = 1500;
		if (!menuItem || !trigger) return;

		if (suspensionBanner) {
			var blockedGameLinks = Array.from(document.querySelectorAll('a[href*="/matches/"]'));
			var reason = suspensionBanner.getAttribute('data-suspension-reason') || '';
			var until = suspensionBanner.getAttribute('data-suspended-until') || '';
			var msg = 'Twoje konto jest zawieszone. Nie możesz wchodzić do gier.';
			if (reason) {
				msg += '\nPowód: ' + reason;
			}
			if (until) {
				msg += '\nZawieszenie do: ' + until;
			}

			blockedGameLinks.forEach(function (linkEl) {
				linkEl.addEventListener('click', function (event) {
					event.preventDefault();
					alert(msg);
				});
			});
		}

		function setOpen(isOpen) {
			menuItem.classList.toggle('open', isOpen);
			trigger.setAttribute('aria-expanded', isOpen ? 'true' : 'false');
		}

		trigger.addEventListener('click', function (e) {
			e.preventDefault();
			e.stopPropagation();
			if (hoverCloseTimer) {
				clearTimeout(hoverCloseTimer);
				hoverCloseTimer = null;
			}
			setOpen(!menuItem.classList.contains('open'));
		});

		menuItem.addEventListener('mouseenter', function () {
			if (hoverCloseTimer) {
				clearTimeout(hoverCloseTimer);
				hoverCloseTimer = null;
			}
			setOpen(true);
		});

		menuItem.addEventListener('mouseleave', function () {
			if (hoverCloseTimer) {
				clearTimeout(hoverCloseTimer);
			}
			hoverCloseTimer = setTimeout(function () {
				setOpen(false);
				hoverCloseTimer = null;
			}, HOVER_CLOSE_DELAY_MS);
		});

		document.addEventListener('click', function (e) {
			if (!menuItem.contains(e.target)) {
				if (hoverCloseTimer) {
					clearTimeout(hoverCloseTimer);
					hoverCloseTimer = null;
				}
				setOpen(false);
			}
		});

		document.addEventListener('keydown', function (e) {
			if (e.key === 'Escape') {
				if (hoverCloseTimer) {
					clearTimeout(hoverCloseTimer);
					hoverCloseTimer = null;
				}
				setOpen(false);
			}
		});
	});
</script>
<script src="/js/nav.js"></script>