{% extends "layout.html" %}
{% block content %}
<section class="game-section">
	<div class="content-card">
		<h2 class="section-title" style="margin: 0;"><i data-lucide="user"></i> Hallo, {{ player.display_name }}!</h2>
	</div>
	
	{% if not player.is_approved %}
	<div class="content-card notice-card warning-card">
		<h2 class="modal-title"><i data-lucide="hourglass"></i> Warten auf Freigabe</h2>
		<p class="notice-text">Die Spielleitung muss deinen Account noch aktivieren.</p>
	</div>
	{% elif game_status == 'pending' %}
	<div class="content-card notice-card">
		<h2 class="modal-title"><i data-lucide="clock"></i> Spiel startet in Kürze</h2>
	</div>
	{% elif game_status == 'finished' %}
	<div class="content-card leaderboard-card">
		<h2 class="section-title"><i data-lucide="trophy"></i> Rangliste</h2>
		<table class="data-table">
			<thead>
				<tr>
					<th>Platz</th>
					<th>Name</th>
					<th>Punkte</th>
				</tr>
			</thead>
			<tbody>
				{% for current_player in all_players %}
				<tr class="{% if current_player.player_identifier == session['player_identifier'] %}highlighted-row{% endif %}">
					<td>{{ loop.index }}</td>
					<td>{{ current_player.display_name }}</td>
					<td>{{ current_player.score }}</td>
				</tr>
				{% endfor %}
			</tbody>
		</table>
	</div>
	{% elif game_status in ['running', 'paused'] %}
	<div class="tab-container">
		<button class="tab-button active-tab" data-target="mission-panel"><i data-lucide="crosshair"></i> Ziel</button>
		<button class="tab-button" data-target="leaderboard-panel"><i data-lucide="bar-chart-2"></i> Punkte</button>
		<button class="tab-button" data-target="rules-panel"><i data-lucide="book-open"></i> Regeln</button>
	</div>
	
	<div id="mission-panel" class="tab-content active-content">
		{% if game_status == 'paused' %}
		<div class="content-card notice-card warning-card">
			<h2 class="modal-title"><i data-lucide="pause-circle"></i> Pausiert</h2>
			<p class="notice-text">Kills sind vorübergehend deaktiviert.</p>
		</div>
		{% endif %}
		
		{% if player.is_alive %}
		<div class="content-card target-card" style="text-align: center;">
			<h3 class="card-subtitle"><i data-lucide="target"></i> Ziel</h3>
			<h2 class="target-name">{{ target_player.display_name if target_player else 'Niemand' }}</h2>
			
			{% if game_status == 'running' %}
				{% if has_pending_kill_report %}
				<div class="notice-card warning-card" style="padding: var(--spacing-medium); border-radius: var(--border-radius-small); margin-top: var(--spacing-large);">
					<h3 style="margin-top: 0; display: flex; align-items: center; justify-content: center; gap: var(--spacing-small);"><i data-lucide="loader"></i> Kill gemeldet</h3>
					<p>Warte auf Bestätigung…</p>
					<button type="button" id="trigger-revoke-elimination" class="action-button secondary-button"><i data-lucide="rotate-ccw"></i> Zurückziehen</button>
				</div>
				{% else %}
				<button type="button" id="trigger-elimination" class="action-button danger-button large-button"><i data-lucide="crosshair"></i> Kill melden</button>
				{% endif %}
			{% else %}
				<button type="button" class="action-button secondary-button large-button" disabled><i data-lucide="lock"></i> Gesperrt</button>
			{% endif %}
		</div>
		{% elif player.late_joiner %}
		<div class="content-card notice-card warning-card">
			<h2 class="modal-title"><i data-lucide="users"></i> Warten auf Einwechslung</h2>
			<p class="notice-text">Die Spielleitung wechselt dich bald ein.</p>
		</div>
		{% else %}
		<div class="content-card notice-card danger-card">
			<h2 class="modal-title"><i data-lucide="skull"></i> Gekillt</h2>
		</div>
		{% endif %}
		
		<div class="content-card statistics-card">
			<h3 class="section-title"><i data-lucide="pie-chart"></i> Übersicht</h3>
			<p>Lebend: <strong>{{ alive_count }}</strong></p>
			<p>Kills: <strong>{{ player.score }}</strong></p>
			<p>Gesamt: <strong>{{ total_eliminations }}</strong></p>
			<p>Zeit: <strong id="game-stopwatch" data-start-time="{{ start_time }}">Lade...</strong></p>
		</div>
		
		<div class="content-card settings-card">
			<h3 class="section-title"><i data-lucide="user-cog"></i> Profil</h3>
			{% if player.pending_display_name %}
				<div class="notice-card warning-card" style="padding: var(--spacing-medium); border-radius: var(--border-radius-small);">
					<p class="notice-text" style="margin-top: 0;"><strong>{{ player.pending_display_name }}</strong> wird geprüft…</p>
					<form action="{{ url_for('handle_player_action') }}" method="POST" class="asynchronous-form">
						<input type="hidden" name="action_type" value="cancel_name_change">
						<button type="submit" class="action-button secondary-button small-button"><i data-lucide="x"></i> Abbrechen</button>
					</form>
				</div>
			{% else %}
				<button type="button" id="trigger-name-change-modal" class="action-button secondary-button"><i data-lucide="edit-3"></i> Name ändern</button>
			{% endif %}
		</div>
	</div>
	
	<div id="leaderboard-panel" class="tab-content">
		<div class="content-card">
			<table class="data-table">
				<thead>
					<tr>
						<th>Platz</th>
						<th>Name</th>
						<th>Punkte</th>
					</tr>
				</thead>
				<tbody>
					{% for current_player in all_players %}
					<tr class="{% if current_player.player_identifier == session['player_identifier'] %}highlighted-row{% endif %}">
						<td>{{ loop.index }}</td>
						<td>{{ current_player.display_name }}</td>
						<td>{{ current_player.score }}</td>
					</tr>
					{% endfor %}
				</tbody>
			</table>
		</div>
	</div>
	
	<div id="rules-panel" class="tab-content">
		<div class="content-card markdown-container">
			{{ rules_markup | safe }}
		</div>
	</div>
	
	<div id="elimination-confirm-modal" class="modal-overlay">
		<div class="modal-dialog">
			<h2 class="modal-title"><i data-lucide="alert-triangle"></i> Kill melden</h2>
			<p class="modal-description">Sicher, dass du den Kill melden möchtest?</p>
			<div class="modal-actions">
				<button type="button" id="proceed-elimination" class="action-button danger-button"><i data-lucide="crosshair"></i> Melden</button>
				<button type="button" id="cancel-elimination" class="action-button secondary-button"><i data-lucide="x"></i> Abbrechen</button>
			</div>
		</div>
	</div>
	
	<div id="rejection-modal" class="modal-overlay">
		<div class="modal-dialog">
			<h2 class="modal-title"><i data-lucide="x-octagon"></i> Abgelehnt</h2>
			<p class="modal-description">Das Ziel hat die Meldung abgelehnt. Bitte klären.</p>
			<div class="modal-actions">
				<button type="button" id="acknowledge-rejection" class="action-button primary-button"><i data-lucide="check"></i> Okay</button>
			</div>
		</div>
	</div>
	
	<div id="verification-modal" class="modal-overlay {% if player.pending_attacker_identifier %}active-modal{% endif %}">
		<div class="modal-dialog">
			<h2 class="modal-title"><i data-lucide="shield-alert"></i> Gekillt?</h2>
			<p class="modal-description">
				{% if pending_attacker_name %}
					Wurdest du von <strong>{{ pending_attacker_name }}</strong> gekillt?
				{% else %}
					Wurdest du gekillt?
				{% endif %}
			</p>
			<div class="modal-actions">
				<button type="button" id="confirm-elimination" class="action-button danger-button"><i data-lucide="check"></i> Ja</button>
				<button type="button" id="reject-elimination" class="action-button secondary-button"><i data-lucide="x"></i> Nein</button>
			</div>
		</div>
	</div>
	
	<div id="name-change-modal" class="modal-overlay">
		<div class="modal-dialog">
			<h2 class="modal-title"><i data-lucide="edit-3"></i> Name ändern</h2>
			<p class="modal-description">Der Name wird vorher von der Spielleitung geprüft.</p>
			<form action="{{ url_for('handle_player_action') }}" method="POST" class="input-form asynchronous-form">
				<input type="hidden" name="action_type" value="request_name_change">
				<div class="form-group" style="text-align: left;">
					<label for="pending_display_name" class="input-label">Neuer Name</label>
					<input type="text" id="pending_display_name" name="pending_display_name" class="text-input" required>
				</div>
				<div class="modal-actions">
					<button type="submit" class="action-button primary-button"><i data-lucide="send"></i> Speichern</button>
					<button type="button" id="cancel-name-change-modal" class="action-button secondary-button"><i data-lucide="x"></i> Abbrechen</button>
				</div>
			</form>
		</div>
	</div>
	{% endif %}
</section>
{% endblock %}