// Teams Daten (im localStorage speichern für Session-Persistierung)
const STORAGE_KEY = 'teamManagerData';

// Initialisieren
document.addEventListener('DOMContentLoaded', () => {
    loadTeams();
});

// Team hinzufügen
function addTeam(group) {
    const nameInput = document.getElementById(`${group}-name`);
    const chantInput = document.getElementById(`${group}-chant`);

    const name = nameInput.value.trim();
    const chant = chantInput.value.trim();

    // Validierung
    if (!name) {
        alert('Bitte gib einen Team-Namen ein!');
        nameInput.focus();
        return;
    }

    if (!chant) {
        alert('Bitte gib einen Schlachtruf ein!');
        chantInput.focus();
        return;
    }

    // Daten laden
    const data = loadData();

    // Neues Team erstellen
    const team = {
        id: Date.now(),
        name: name,
        chant: chant,
        createdAt: new Date().toLocaleString('de-DE')
    };

    // Zum entsprechenden Gruppe hinzufügen
    if (!data[group]) {
        data[group] = [];
    }
    data[group].push(team);

    // Speichern
    saveData(data);

    // Eingabefelder leeren
    nameInput.value = '';
    chantInput.value = '';
    nameInput.focus();

    // UI aktualisieren
    renderTeams(group);
}

// Team löschen
function deleteTeam(group, teamId) {
    if (!confirm('Möchtest du dieses Team wirklich löschen?')) {
        return;
    }

    const data = loadData();
    data[group] = data[group].filter(team => team.id !== teamId);
    saveData(data);
    renderTeams(group);
}

// Teams rendern
function renderTeams(group) {
    const data = loadData();
    const container = document.getElementById(`${group}-teams`);
    const teams = data[group] || [];

    if (teams.length === 0) {
        container.innerHTML = '<div class="empty-message">Noch keine Teams hinzugefügt</div>';
        return;
    }

    container.innerHTML = teams.map(team => `
        <div class="team-card">
            <h3>🎽 ${escapeHtml(team.name)}</h3>
            <p>"${escapeHtml(team.chant)}"</p>
            <button onclick="deleteTeam('${group}', ${team.id})">Löschen</button>
        </div>
    `).join('');
}

// Alle Teams laden
function loadTeams() {
    renderTeams('bundesliga');
    renderTeams('championsleague');
}

// Alle Teams löschen
function resetAll() {
    if (!confirm('Möchtest du wirklich ALLE Teams löschen?')) {
        return;
    }

    localStorage.removeItem(STORAGE_KEY);
    loadTeams();
}

// LocalStorage Hilfsfunktionen
function loadData() {
    const stored = localStorage.getItem(STORAGE_KEY);
    return stored ? JSON.parse(stored) : { bundesliga: [], championsleague: [] };
}

function saveData(data) {
    localStorage.setItem(STORAGE_KEY, JSON.stringify(data));
}

// XSS-Schutz
function escapeHtml(text) {
    const div = document.createElement('div');
    div.textContent = text;
    return div.innerHTML;
}