{% extends spa_base or "base.html"%}
{% block title %}Admin - Horas Free Diarias{% endblock %}
{% block extra_head %}
<style>
    .admin-header { margin-bottom: 24px; }
    .admin-header h1 { font-size: 1.6em; font-weight: 700; color: var(--text-primary); margin-bottom: 8px; }
    .admin-section { background: var(--bg-card); border-radius: var(--radius-lg); border: 1px solid var(--border); margin-bottom: 24px; overflow: hidden; }
    .section-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid var(--border); }
    .section-header h2 { font-size: 1em; font-weight: 600; color: var(--text-primary); }
    .admin-table { width: 100%; border-collapse: collapse; }
    .admin-table th { background: var(--bg-surface); color: var(--text-muted); padding: 12px 20px; text-align: left; font-size: 0.75em; font-weight: 600; text-transform: uppercase; border-bottom: 1px solid var(--border); }
    .admin-table td { padding: 14px 20px; border-bottom: 1px solid var(--border); font-size: 0.85em; color: var(--text-secondary); }
    .admin-table tr:hover td { background: rgba(255,255,255,0.02); }
    .badge { display: inline-flex; padding: 4px 10px; border-radius: 100px; font-size: 0.75em; font-weight: 600; }
    .badge-online { width: 8px; height: 8px; border-radius: 50%; background: var(--green); display: inline-block; }
    .badge-offline { width: 8px; height: 8px; border-radius: 50%; background: var(--text-muted); display: inline-block; }
    .action-btn { display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px; border-radius: var(--radius-sm); font-size: 0.75em; font-weight: 500; text-decoration: none; transition: var(--transition); border: 1px solid transparent; }
    .action-btn.blue { background: rgba(66,133,244,0.1); color: #4285f4; border-color: rgba(66,133,244,0.2); }
    .action-btn.green { background: rgba(70,211,105,0.1); color: var(--green); border-color: rgba(70,211,105,0.2); }
    .action-btn.red { background: rgba(229,9,20,0.1); color: var(--primary); border-color: rgba(229,9,20,0.2); }
    .action-btn.yellow { background: rgba(245,197,24,0.1); color: var(--gold); border-color: rgba(245,197,24,0.2); }
    .admin-nav-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--bg-card); color: var(--text-secondary); border: 1px solid var(--border); padding: 12px 20px; border-radius: var(--radius-md); text-decoration: none; font-size: 0.85em; font-weight: 500; transition: var(--transition); }
    .admin-nav-btn:hover { background: var(--bg-elevated); border-color: var(--border-hover); color: var(--text-primary); }
    .admin-nav { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 24px; }
</style>
{% endblock %}
{% block content %}
<div style="max-width: 1200px; margin: 0 auto; padding: 24px;">
    <div class="admin-header">
        <h1>⏰ Horas Free Diarias</h1>
    </div>
    <div class="admin-nav">
        <a href="{{ url_for('admin_panel') }}" class="admin-nav-btn">← Voltar ao Painel</a>
    </div>
    <div class="admin-section">
        <div class="section-header">
            <h2>⚙️ Configuracao Global</h2>
        </div>
        <div style="padding:16px 24px;">
            <form method="POST" action="{{ url_for('admin_free_hours') }}" style="display:flex; gap:12px; align-items:end; flex-wrap:wrap;">
                <div>
                    <label style="font-size:0.8em; color:var(--text-muted); display:block; margin-bottom:4px;">Horas por dia (usuarios free)</label>
                    <input type="number" name="free_daily_hours" value="{{ settings.free_daily_hours if settings and settings.free_daily_hours is defined else 4 }}" min="0.5" max="24" step="0.5" style="padding:8px 12px; background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius-sm); color:var(--text-primary); font-size:0.85em; width:100px;">
                </div>
                <button type="submit" class="action-btn blue" style="padding:8px 20px;">Aplicar a Todos</button>
                <span style="color:var(--text-muted); font-size:0.8em;">Altera o limite de todos os usuarios free</span>
            </form>
        </div>
    </div>
    <div class="admin-section">
        <div class="section-header">
            <h2>⏳ Remover Horas Gratis em Massa</h2>
        </div>
        <div style="padding:16px 24px;">
            <form method="POST" action="{{ url_for('bulk_remove_free_hours') }}" style="display:flex; gap:12px; align-items:end; flex-wrap:wrap;">
                <div>
                    <label style="font-size:0.8em; color:var(--text-muted); display:block; margin-bottom:4px;">Alvo</label>
                    <select name="target" style="padding:8px 12px; background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius-sm); color:var(--text-primary); font-size:0.85em;">
                        <option value="all_free">Apenas usuarios Free</option>
                        <option value="all">Todos (free + premium)</option>
                    </select>
                </div>
                <div>
                    <label style="font-size:0.8em; color:var(--text-muted); display:block; margin-bottom:4px;">Horas a remover</label>
                    <input type="number" name="hours" value="1" min="0.5" max="24" step="0.5" style="width:100px; padding:8px 12px; background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius-sm); color:var(--text-primary); font-size:0.85em;">
                </div>
                <button type="submit" class="action-btn red" style="padding:8px 20px;" onclick="return confirm('Remover horas de todos os usuarios selecionados?')">Remover Horas</button>
            </form>
        </div>
    </div>
    <div class="admin-section">
        <div class="section-header">
            <h2>📋 Usuarios Free</h2>
        </div>
        <div style="overflow-x:auto;">
            <table class="admin-table">
                <thead>
                    <tr><th>Usuario</th><th>Limite</th><th>Usado Hoje</th><th>Status</th></tr>
                </thead>
                <tbody>
                    {% for u in users %}
                    {% if not u.is_paid %}
                    <tr>
                        <td style="color:var(--text-primary); font-weight:500;">
                            {% if u.id in online_user_ids %}<span class="badge-online"></span>{% else %}<span class="badge-offline"></span>{% endif %}
                            {{ u.email }}
                        </td>
                        <td>{{ (u.free_daily_limit // 3600)|int }}h</td>
                        <td>{{ (u.free_daily_used // 3600)|int }}h {{ ((u.free_daily_used % 3600) // 60)|int }}m</td>
                        <td>
                            {% if u.free_daily_used >= u.free_daily_limit %}
                            <span style="color:var(--primary); font-weight:600;">Esgotado</span>
                            {% else %}
                            <span style="color:var(--green);">Disponivel</span>
                            {% endif %}
                        </td>
                    </tr>
                    {% endif %}
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>
{% endblock %}