<?php $teams = $teams ?? []; $search = $search ?? ''; ?>

<div class="page-header">
    <div class="page-header-left">
        <h1 class="page-title">Teams</h1>
        <p class="page-subtitle">Create and manage work teams with server access</p>
    </div>
    <div class="page-header-right">
        <a href="/teams/create" class="btn btn-primary">
            <i class="fas fa-plus"></i> Create Team
        </a>
    </div>
</div>

<div class="teams-toolbar">
    <div class="teams-search">
        <i class="fas fa-search teams-search-icon"></i>
        <input type="text" id="teamSearch" class="form-input teams-search-input"
               placeholder="Search teams..." value="<?= htmlspecialchars($search) ?>">
        <button class="teams-search-clear" id="searchClear" onclick="filterTeams('')" style="display:none">&times;</button>
    </div>
</div>

<div id="teamsContainer">
    <?php if (empty($teams)): ?>
        <div class="empty-state" id="emptyState">
            <i class="fas fa-users-cog"></i>
            <p id="emptyText">No teams created yet.</p>
            <a href="/teams/create" class="btn btn-primary">Create Your First Team</a>
        </div>
    <?php else: ?>
        <div class="teams-grid" id="teamsGrid">
            <?php foreach ($teams as $team): ?>
                <div class="team-card" data-name="<?= htmlspecialchars(mb_strtolower($team['name'] ?? '')) ?>"
                     data-desc="<?= htmlspecialchars(mb_strtolower($team['description'] ?? '')) ?>">
                    <div class="team-card-header">
                        <div class="team-card-icon">
                            <i class="fas fa-users"></i>
                        </div>
                        <h3 class="team-card-title">
                            <a href="/teams/<?= $team['id'] ?>"><?= htmlspecialchars($team['name']) ?></a>
                        </h3>
                    </div>
                    <p class="team-card-desc">
                        <?= htmlspecialchars(mb_substr($team['description'] ?? 'No description', 0, 100)) ?>
                    </p>
                    <div class="team-card-stats">
                        <span class="team-stat">
                            <i class="fas fa-user"></i> <?= (int) ($team['member_count'] ?? 0) ?> members
                        </span>
                        <span class="team-stat">
                            <i class="fas fa-server"></i> <?= (int) ($team['server_count'] ?? 0) ?> servers
                        </span>
                    </div>
                    <div class="team-card-actions">
                        <a href="/teams/<?= $team['id'] ?>" class="btn btn-sm btn-primary">
                            <i class="fas fa-cog"></i> Manage
                        </a>
                        <button class="btn btn-sm btn-danger" title="Delete"
                                onclick="deleteTeam(<?= $team['id'] ?>, '<?= htmlspecialchars(addslashes($team['name'])) ?>')">
                            <i class="fas fa-trash"></i>
                        </button>
                    </div>
                </div>
            <?php endforeach; ?>
        </div>
    <?php endif; ?>
</div>

<form id="deleteForm" method="POST" style="display:none">
    <input type="hidden" name="_csrf_token" value="<?= $this->csrfToken() ?>">
</form>

<script>
const allCards = document.querySelectorAll('.team-card');

function filterTeams(query) {
    const q = query.toLowerCase().trim();
    const grid = document.getElementById('teamsGrid');
    const empty = document.getElementById('emptyState');
    const clearBtn = document.getElementById('searchClear');
    let visible = 0;

    clearBtn.style.display = q ? 'block' : 'none';

    if (grid) {
        allCards.forEach(function(card) {
            const name = card.dataset.name || '';
            const desc = card.dataset.desc || '';
            const match = !q || name.includes(q) || desc.includes(q);
            card.style.display = match ? '' : 'none';
            if (match) visible++;
        });

        if (visible === 0) {
            if (!empty) {
                const container = document.getElementById('teamsContainer');
                const div = document.createElement('div');
                div.className = 'empty-state';
                div.id = 'emptyState';
                div.innerHTML = '<i class="fas fa-users-cog"></i><p>No teams match your search.</p>';
                container.appendChild(div);
            } else {
                empty.querySelector('p').textContent = 'No teams match your search.';
                empty.style.display = '';
            }
        } else {
            if (empty) empty.style.display = 'none';
        }
    }

    // Update URL without reload
    const url = q ? '?search=' + encodeURIComponent(query) : window.location.pathname;
    window.history.replaceState({}, '', url);
}

document.getElementById('teamSearch')?.addEventListener('input', function() {
    filterTeams(this.value);
});

// Restore search on page load
document.addEventListener('DOMContentLoaded', function() {
    const searchInput = document.getElementById('teamSearch');
    if (searchInput && searchInput.value) {
        filterTeams(searchInput.value);
    }
});

function deleteTeam(id, name) {
    if (confirm('Delete team "' + name + '"?\nThis will remove access for all members.')) {
        const form = document.getElementById('deleteForm');
        form.action = '/teams/' + id + '/delete';
        form.submit();
    }
}
</script>
