{% extends "base.html" %}
{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h1>{{ _('My Games') }}</h1>
    <div>
        <a href="{{ url_for('export_games') }}" class="btn btn-outline-secondary">⬇️ {{ _('Export CSV') }}</a>
        <a href="{{ url_for('export_pdf') }}" class="btn btn-outline-secondary">⬇️ Export PDF (for sharing)</a>
        <a href="{{ url_for('import_games') }}" class="btn btn-outline-secondary">⬆️ {{ _('Import CSV') }}</a>
        <a href="{{ url_for('add_game') }}" class="btn btn-primary">+ {{ _('Add New Game') }}</a>
    </div>
</div>

{% if games %}
<div class="table-responsive">
    <table class="table table-hover align-middle">
        <thead class="table-dark">
            <tr>
                <th>{{ _('Cover') }}</th>
                <th>{{ _('Name') }}</th>
                <th>{{ _('Key') }}</th>
                <th>{{ _('Status') }}</th>
                <th>{{ _('Created') }}</th>
                <th>{{ _('Redeem by') }}</th>
                <th>{{ _('Shop') }}</th>
                <th>{{ _('Actions') }}</th>
            </tr>
        </thead>
        <tbody>
            {% for game in games %}
            <tr>
                <td>
                {% if game.steam_appid %}
                <img src="https://cdn.cloudflare.steamstatic.com/steam/apps/{{ game.steam_appid }}/header.jpg"
                     alt="Steam Header" 
                     class="game-cover"
                     {% if loop.first %}fetchpriority="high"{% endif %}
                     width="368" 
                     height="172"
                     loading="lazy">
                {% elif game.url and 'gog.com' in game.url %}
                <img src="{{ url_for('static', filename='gog_logo.webp') }}"
                     alt="GOG Logo" 
                     class="game-cover"
                     width="368"
                     height="172"
                     loading="lazy">
                {% endif %}
                </td>
                <td>{{ game.name }}</td>
                <td class="font-monospace">{{ game.steam_key }}</td>
                <td>
                    {% if game.status == 'nicht eingelöst' %}
                        <span class="badge bg-warning text-dark">{{ _('Not redeemed') }}</span>
                    {% elif game.status == 'verschenkt' %}
                        <span class="badge bg-success">{{ _('Gifted') }}</span>
                    {% elif game.status == 'eingelöst' %}
                        <span class="badge bg-secondary">{{ _('Redeemed') }}</span>
                    {% endif %}
                </td>
                <td>{{ format_date(game.created_at) }}</td>
                <td>
                    {% if game.redeem_date %}
                        <span class="badge bg-danger">{{ format_date(game.redeem_date) }}</span>
                    {% endif %}
                </td>
                <td>
                    {% if game.url %}
                        <a href="{{ game.url }}" target="_blank" class="btn btn-sm btn-outline-info">🔗 {{ _('Shop') }}</a>
                    {% endif %}
                </td>
                <td class="text-nowrap">
                    {% if game.status == 'verschenkt' %}
                    <button class="btn btn-sm btn-success generate-redeem" 
                            data-game-id="{{ game.id }}"
                            title="{{ _('Generate redeem link') }}">
                        🔗
                    </button>
                    {% endif %}
                    <a href="{{ url_for('edit_game', game_id=game.id) }}" class="btn btn-sm btn-warning">✏️</a>
                    <form method="POST" action="{{ url_for('delete_game', game_id=game.id) }}" class="d-inline">
                        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                        <button type="submit" class="btn btn-sm btn-danger" onclick="return confirm('{{ _('Really delete?') }}')">🗑️</button>
                    </form>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>

<script>
const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

document.querySelectorAll('.generate-redeem').forEach(btn => {
    btn.addEventListener('click', async function() {
        const gameId = this.dataset.gameId;
        try {
            const response = await fetch('/generate_redeem/' + gameId, {
                method: 'POST',
                headers: {
                    'X-CSRFToken': csrfToken
                }
            });
            if (!response.ok) throw new Error('Network error');
            const data = await response.json();
            if(data.url) {
                await navigator.clipboard.writeText(data.url);
                alert('{{ _("Redeem link copied to clipboard!") }}');
            }
        } catch (error) {
            console.error('Error:', error);
            alert('{{ _("Error generating link") }}');
        }
    });
});
</script>
{% else %}
<div class="alert alert-info">{{ _('No games yet') }}</div>
{% endif %}
{% endblock %}