---
import Layout from '../layouts/Layout.astro';
---

<Layout title="Manacore Release Plan v.0.2">
	<style is:inline>
		* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}

		body {
			font-family:
				-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
			background: linear-gradient(135deg, #0f0f0f 0%, #1a1a1a 100%);
			color: #e0e0e0;
			min-height: 100vh;
			padding: 20px;
		}

		.container {
			max-width: 800px;
			margin: 0 auto;
			padding: 20px;
		}

		h1 {
			text-align: center;
			margin-bottom: 10px;
			font-size: 1.8rem;
			color: #ffffff;
			font-weight: 600;
		}

		.version {
			text-align: center;
			color: #666;
			font-size: 0.85rem;
			margin-bottom: 30px;
		}

		.add-button {
			width: 100%;
			padding: 15px;
			margin-bottom: 30px;
			background: linear-gradient(135deg, #00d4ff 0%, #0099cc 100%);
			border: none;
			border-radius: 12px;
			color: white;
			font-size: 1rem;
			font-weight: 600;
			cursor: pointer;
			transition: all 0.3s ease;
		}

		.add-button:hover {
			transform: translateY(-2px);
			box-shadow: 0 10px 30px rgba(0, 212, 255, 0.4);
		}

		.release-list {
			list-style: none;
		}

		.release-item {
			background: rgba(255, 255, 255, 0.05);
			backdrop-filter: blur(10px);
			border: 1px solid rgba(255, 255, 255, 0.1);
			border-radius: 12px;
			padding: 20px;
			margin-bottom: 15px;
			cursor: move;
			transition: all 0.3s ease;
			display: flex;
			align-items: center;
			gap: 15px;
		}

		.release-item:hover {
			background: rgba(255, 255, 255, 0.08);
			transform: translateX(5px);
		}

		.release-item.dragging {
			opacity: 0.5;
			transform: scale(0.95);
		}

		.release-item.drag-over {
			background: rgba(102, 126, 234, 0.2);
			border-color: #667eea;
		}

		/* Past events styling */
		.release-item.past {
			opacity: 0.5;
		}

		/* Upcoming event highlights */
		.release-item.upcoming-soon {
			border-color: #ef4444;
			background: rgba(239, 68, 68, 0.15);
			box-shadow: 0 0 20px rgba(239, 68, 68, 0.3);
		}

		.release-item.upcoming-near {
			border-color: #f97316;
			background: rgba(249, 115, 22, 0.12);
			box-shadow: 0 0 15px rgba(249, 115, 22, 0.25);
		}

		.release-item.upcoming-moderate {
			border-color: #eab308;
			background: rgba(234, 179, 8, 0.1);
			box-shadow: 0 0 10px rgba(234, 179, 8, 0.2);
		}

		/* Today marker */
		.today-marker {
			position: relative;
			margin: 30px 0;
			text-align: center;
			color: #667eea;
			font-size: 0.9rem;
			font-weight: 600;
			text-transform: uppercase;
			letter-spacing: 2px;
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 20px;
		}

		.today-marker::before,
		.today-marker::after {
			content: '';
			flex: 1;
			height: 2px;
			background: linear-gradient(90deg, transparent, #667eea);
		}

		.today-marker::after {
			background: linear-gradient(270deg, transparent, #667eea);
		}

		.drag-handle {
			color: #666;
			font-size: 1.2rem;
			cursor: grab;
		}

		.drag-handle:active {
			cursor: grabbing;
		}

		.release-content {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 15px;
		}

		.release-main {
			display: flex;
			align-items: center;
			gap: 15px;
			flex: 1;
		}

		.release-actions {
			display: flex;
			align-items: center;
			gap: 10px;
		}

		.date-weekday-wrapper {
			display: flex;
			align-items: center;
			background: rgba(255, 255, 255, 0.1);
			border: 1px solid rgba(255, 255, 255, 0.2);
			border-radius: 8px;
			padding: 0;
			transition: all 0.3s ease;
			width: 260px;
			min-width: 260px;
		}

		.date-weekday-wrapper:hover {
			background: rgba(255, 255, 255, 0.15);
			border-color: #667eea;
		}

		.weekday {
			padding: 8px 12px;
			background: rgba(102, 126, 234, 0.2);
			border-radius: 8px 0 0 8px;
			font-size: 0.85rem;
			color: #a0b4f3;
			font-weight: 500;
			border-right: 1px solid rgba(255, 255, 255, 0.1);
			white-space: nowrap;
			width: 110px;
			text-align: center;
		}

		.date-input {
			background: transparent;
			border: none;
			border-radius: 0 8px 8px 0;
			padding: 8px 12px;
			color: #e0e0e0;
			font-size: 0.95rem;
			cursor: pointer;
			transition: all 0.3s ease;
			flex: 1;
		}

		.date-input:focus {
			outline: none;
		}

		/* Style the calendar icon */
		.date-input::-webkit-calendar-picker-indicator {
			filter: invert(1);
			cursor: pointer;
			margin-right: 4px;
		}

		.date-input::-webkit-datetime-edit {
			padding-left: 4px;
		}

		.project-name {
			flex: 1;
			font-weight: 600;
			font-size: 1.1rem;
			color: #fff;
			background: transparent;
			border: 1px solid transparent;
			padding: 8px 12px;
			border-radius: 8px;
			transition: all 0.3s ease;
		}

		.project-name:hover {
			background: rgba(255, 255, 255, 0.1);
			border-color: rgba(255, 255, 255, 0.2);
		}

		.project-name:focus {
			background: rgba(255, 255, 255, 0.1);
			border-color: #667eea;
			outline: none;
		}

		.delete-btn {
			background: rgba(239, 68, 68, 0.2);
			border: 1px solid rgba(239, 68, 68, 0.3);
			color: #ef4444;
			border-radius: 8px;
			padding: 8px 12px;
			cursor: pointer;
			transition: all 0.3s ease;
			font-size: 0.9rem;
		}

		.delete-btn:hover {
			background: rgba(239, 68, 68, 0.3);
			border-color: #ef4444;
		}

		.menu-btn {
			background: transparent;
			border: none;
			color: #666;
			font-size: 1.2rem;
			cursor: pointer;
			padding: 4px 8px;
			border-radius: 6px;
			transition: all 0.3s ease;
			position: relative;
		}

		.menu-btn:hover {
			background: rgba(255, 255, 255, 0.1);
			color: #999;
		}

		.menu-dropdown {
			position: absolute;
			right: 0;
			top: 100%;
			margin-top: 5px;
			background: rgba(30, 30, 30, 0.95);
			backdrop-filter: blur(10px);
			border: 1px solid rgba(255, 255, 255, 0.1);
			border-radius: 8px;
			padding: 5px;
			min-width: 120px;
			box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
			z-index: 1000;
			display: none;
		}

		.menu-dropdown.show {
			display: block;
		}

		.menu-item {
			padding: 8px 12px;
			border-radius: 6px;
			cursor: pointer;
			transition: all 0.2s ease;
			color: #ef4444;
			font-size: 0.9rem;
		}

		.menu-item:hover {
			background: rgba(239, 68, 68, 0.2);
		}

		.empty-state {
			text-align: center;
			padding: 60px 20px;
			color: #666;
			font-size: 1.1rem;
		}

		@media (max-width: 600px) {
			.release-content {
				flex-direction: column;
				align-items: stretch;
			}

			.project-name {
				width: 100%;
			}
		}
	</style>

	<div class="container">
		<h1>💧 Manacore Release Plan</h1>
		<div class="version">v.0.2</div>
		<button class="add-button" onclick="addNewRelease()">+ Neues Release hinzufügen</button>
		<ul class="release-list" id="releaseList"></ul>
		<div class="empty-state" id="emptyState" style="display: none;">
			Keine Releases geplant. Füge dein erstes Release hinzu!
		</div>
	</div>

	<script is:inline>
		// Initial data
		let releases = [
			{ date: '2025-08-18', name: 'Memoro Closed Beta' },
			{ date: '2025-09-02', name: 'Memoro Open Beta' },
			{ date: '2025-09-05', name: 'Märchenzauber Closed Beta' },
			{ date: '2025-09-08', name: 'Memoro Release' },
			{ date: '2025-09-13', name: 'Märchenzauber Open Beta' },
			{ date: '2025-09-18', name: 'Manadeck Closed Beta' },
			{ date: '2025-09-23', name: 'Märchenzauber Release' },
			{
				date: '2025-09-28',
				name: 'AI News Closed Beta (Kann auch vorgeschoben werden, einfach ohne auth)',
			},
			{ date: '2025-10-01', name: 'Manadeck Open Beta' },
		];

		let draggedElement = null;
		let draggedIndex = null;

		function getWeekday(dateString) {
			const days = [
				'Sonntag',
				'Montag',
				'Dienstag',
				'Mittwoch',
				'Donnerstag',
				'Freitag',
				'Samstag',
			];
			const date = new Date(dateString);
			return days[date.getDay()];
		}

		function formatDateForDisplay(dateString) {
			const date = new Date(dateString);
			const day = String(date.getDate()).padStart(2, '0');
			const month = String(date.getMonth() + 1).padStart(2, '0');
			const year = String(date.getFullYear()).slice(-2);
			return `${day}.${month}.${year}`;
		}

		function formatTodayDate() {
			const today = new Date();
			const weekday = getWeekday(today.toISOString().split('T')[0]);
			const formatted = formatDateForDisplay(today.toISOString().split('T')[0]);
			return `${weekday}, ${formatted}`;
		}

		function renderReleases() {
			const list = document.getElementById('releaseList');
			const emptyState = document.getElementById('emptyState');

			if (releases.length === 0) {
				list.style.display = 'none';
				emptyState.style.display = 'block';
				return;
			}

			list.style.display = 'block';
			emptyState.style.display = 'none';

			// Sort releases by date
			releases.sort((a, b) => new Date(a.date) - new Date(b.date));

			const today = new Date();
			today.setHours(0, 0, 0, 0);

			let todayMarkerAdded = false;
			let firstUpcomingIndex = -1;

			list.innerHTML = '';

			releases.forEach((release, index) => {
				const releaseDate = new Date(release.date);
				releaseDate.setHours(0, 0, 0, 0);
				const daysUntil = Math.ceil((releaseDate - today) / (1000 * 60 * 60 * 24));

				// Add today marker
				if (!todayMarkerAdded && daysUntil >= 0) {
					todayMarkerAdded = true;
					if (index > 0) {
						// Only add marker if there are past events
						list.innerHTML += `<div class="today-marker" id="todayMarker">Heute - ${formatTodayDate()}</div>`;
					}
					if (firstUpcomingIndex === -1) {
						firstUpcomingIndex = index;
					}
				}

				// Determine CSS classes
				let classes = 'release-item';
				if (daysUntil < 0) {
					classes += ' past';
				} else if (daysUntil <= 3) {
					classes += ' upcoming-soon';
				} else if (daysUntil <= 7) {
					classes += ' upcoming-near';
				} else if (daysUntil <= 14) {
					classes += ' upcoming-moderate';
				}

				list.innerHTML += `
                    <li class="${classes}" draggable="true" data-index="${index}">
                        <span class="drag-handle">⋮⋮</span>
                        <div class="release-content">
                            <div class="release-main">
                                <input type="text" class="project-name" value="${release.name}" 
                                       onchange="updateName(${index}, this.value)"
                                       placeholder="Projektname">
                                <div class="date-weekday-wrapper">
                                    <span class="weekday">${getWeekday(release.date)}</span>
                                    <input type="date" class="date-input" value="${release.date}" 
                                           onchange="updateDate(${index}, this.value)">
                                </div>
                            </div>
                            <div class="release-actions">
                                <div style="position: relative;">
                                    <button class="menu-btn" onclick="toggleMenu(event, ${index})">⋯</button>
                                    <div class="menu-dropdown" id="menu-${index}">
                                        <div class="menu-item" onclick="deleteRelease(${index})">Löschen</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                `;
			});

			// Add drag and drop event listeners
			document.querySelectorAll('.release-item').forEach((item) => {
				item.addEventListener('dragstart', handleDragStart);
				item.addEventListener('dragover', handleDragOver);
				item.addEventListener('drop', handleDrop);
				item.addEventListener('dragend', handleDragEnd);
				item.addEventListener('dragenter', handleDragEnter);
				item.addEventListener('dragleave', handleDragLeave);
			});

			// Scroll to today marker after a short delay
			setTimeout(() => {
				const marker = document.getElementById('todayMarker');
				if (marker) {
					marker.scrollIntoView({ behavior: 'smooth', block: 'center' });
				} else if (firstUpcomingIndex >= 0) {
					// If no marker (no past events), scroll to first upcoming
					const firstUpcoming = document.querySelector(
						`.release-item:nth-child(${firstUpcomingIndex + 1})`
					);
					if (firstUpcoming) {
						firstUpcoming.scrollIntoView({ behavior: 'smooth', block: 'center' });
					}
				}
			}, 100);
		}

		function handleDragStart(e) {
			draggedElement = this;
			draggedIndex = parseInt(this.dataset.index);
			this.classList.add('dragging');
			e.dataTransfer.effectAllowed = 'move';
		}

		function handleDragOver(e) {
			if (e.preventDefault) {
				e.preventDefault();
			}
			e.dataTransfer.dropEffect = 'move';
			return false;
		}

		function handleDragEnter(e) {
			if (this !== draggedElement) {
				this.classList.add('drag-over');
			}
		}

		function handleDragLeave(e) {
			this.classList.remove('drag-over');
		}

		function handleDrop(e) {
			if (e.stopPropagation) {
				e.stopPropagation();
			}

			const dropIndex = parseInt(this.dataset.index);

			if (draggedIndex !== dropIndex) {
				const draggedRelease = releases[draggedIndex];
				releases.splice(draggedIndex, 1);

				if (draggedIndex < dropIndex) {
					releases.splice(dropIndex - 1, 0, draggedRelease);
				} else {
					releases.splice(dropIndex, 0, draggedRelease);
				}

				saveToLocalStorage();
				renderReleases();
			}

			return false;
		}

		function handleDragEnd(e) {
			document.querySelectorAll('.release-item').forEach((item) => {
				item.classList.remove('dragging');
				item.classList.remove('drag-over');
			});
		}

		function updateDate(index, newDate) {
			// Find the actual release by matching the original index
			const sortedReleases = [...releases].sort((a, b) => new Date(a.date) - new Date(b.date));
			const releaseToUpdate = sortedReleases[index];
			const originalIndex = releases.indexOf(releaseToUpdate);

			if (originalIndex !== -1) {
				releases[originalIndex].date = newDate;
				saveToLocalStorage();
				renderReleases();
			}
		}

		function updateName(index, newName) {
			// Find the actual release by matching the original index
			const sortedReleases = [...releases].sort((a, b) => new Date(a.date) - new Date(b.date));
			const releaseToUpdate = sortedReleases[index];
			const originalIndex = releases.indexOf(releaseToUpdate);

			if (originalIndex !== -1) {
				releases[originalIndex].name = newName;
				saveToLocalStorage();
			}
		}

		function deleteRelease(index) {
			closeAllMenus();
			if (confirm('Möchtest du dieses Release wirklich löschen?')) {
				releases.splice(index, 1);
				renderReleases();
				saveToLocalStorage();
			}
		}

		function toggleMenu(event, index) {
			event.stopPropagation();
			const menu = document.getElementById(`menu-${index}`);
			const isOpen = menu.classList.contains('show');

			closeAllMenus();

			if (!isOpen) {
				menu.classList.add('show');
			}
		}

		function closeAllMenus() {
			document.querySelectorAll('.menu-dropdown').forEach((menu) => {
				menu.classList.remove('show');
			});
		}

		// Close menus when clicking outside
		document.addEventListener('click', closeAllMenus);

		function addNewRelease() {
			const today = new Date();
			const dateString = today.toISOString().split('T')[0];
			releases.push({
				date: dateString,
				name: 'Neues Release',
			});
			renderReleases();
			saveToLocalStorage();

			// Focus on the new item's name input
			setTimeout(() => {
				const inputs = document.querySelectorAll('.project-name');
				if (inputs.length > 0) {
					inputs[inputs.length - 1].focus();
					inputs[inputs.length - 1].select();
				}
			}, 100);
		}

		function saveToLocalStorage() {
			localStorage.setItem('releases', JSON.stringify(releases));
		}

		function loadFromLocalStorage() {
			const saved = localStorage.getItem('releases');
			if (saved) {
				releases = JSON.parse(saved);
			}
		}

		// Initialize
		loadFromLocalStorage();
		renderReleases();
	</script>
</Layout>
