{% extends spa_base or "base.html"%}
{% block title %}Admin - Redes Sociais{% endblock %}
{% block extra_head %}
<style>
    .admin-header { margin-bottom: 24px; }
    .admin-header h1 { font-size: 1.5em; font-weight: 700; margin:0 0 4px; }
    .admin-header p { color: var(--text-muted); font-size: 0.9em; margin:0; }
    .admin-nav-pills { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:24px; }
    .admin-nav-pills a { padding:8px 16px; border-radius:100px; background:var(--bg-surface); color:var(--text-secondary); text-decoration:none; font-size:0.85em; font-weight:600; transition:var(--transition); }
    .admin-nav-pills a:hover, .admin-nav-pills a.active { background:var(--primary); color:#fff; }
    .admin-section { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); margin-bottom:24px; overflow:hidden; }
    .section-header { padding:16px 20px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; }
    .section-header h2 { font-size:1em; font-weight:700; margin:0; }
    .admin-table { width:100%; border-collapse:collapse; }
    .admin-table th, .admin-table td { padding:12px 16px; text-align:left; border-bottom:1px solid var(--border); font-size:0.85em; }
    .admin-table th { background:var(--bg-surface); color:var(--text-muted); font-weight:600; text-transform:uppercase; font-size:0.75em; letter-spacing:0.5px; }
    .admin-table tr:last-child td { border-bottom:none; }
    .admin-table tr:hover td { background:rgba(255,255,255,0.02); }
    .icon-preview { display:inline-block; width:32px; height:32px; border-radius:8px; background:var(--bg-surface); display:inline-flex; align-items:center; justify-content:center; color:var(--text-muted); }
    .icon-preview svg { width:18px; height:18px; }
    .action-btn { padding:6px 14px; border-radius:100px; border:1px solid var(--border); background:transparent; color:var(--text-secondary); cursor:pointer; font-size:0.8em; font-weight:600; transition:var(--transition); text-decoration:none; display:inline-flex; align-items:center; gap:4px; }
    .action-btn:hover { border-color:var(--text-secondary); color:var(--text-primary); }
    .action-btn.green { border-color:rgba(70,211,105,0.3); color:var(--green); }
    .action-btn.green:hover { background:rgba(70,211,105,0.1); }
    .action-btn.red { border-color:rgba(229,9,20,0.3); color:var(--primary); }
    .action-btn.red:hover { background:rgba(229,9,20,0.1); }
    .action-btn.yellow { border-color:rgba(245,197,24,0.3); color:var(--gold); }
    .add-form { padding:20px; display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end; }
    .add-form .form-group { display:flex; flex-direction:column; gap:4px; }
    .add-form .form-group label { font-size:0.75em; color:var(--text-muted); text-transform:uppercase; font-weight:600; letter-spacing:0.5px; }
    .add-form .form-group input, .add-form .form-group textarea { padding:10px 12px; background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius-md); color:var(--text-primary); font-size:0.85em; min-width:160px; }
    .add-form .form-group textarea { min-width:300px; min-height:60px; font-family:monospace; font-size:0.75em; }
    .add-form .form-group input:focus, .add-form .form-group textarea:focus { outline:none; border-color:var(--text-secondary); }
    .badge-active { color:var(--green); font-weight:600; }
    .badge-inactive { color:var(--text-muted); }
    .inline-form { display:inline; }
    .edit-modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.7); z-index:9999; align-items:center; justify-content:center; }
    .edit-modal-overlay.active { display:flex; }
    .edit-modal { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:24px; width:90%; max-width:520px; max-height:80vh; overflow-y:auto; }
    .edit-modal h3 { margin:0 0 16px; font-size:1.1em; }
    .edit-modal .form-group { margin-bottom:12px; display:flex; flex-direction:column; gap:4px; }
    .edit-modal .form-group label { font-size:0.75em; color:var(--text-muted); text-transform:uppercase; font-weight:600; letter-spacing:0.5px; }
    .edit-modal .form-group input, .edit-modal .form-group textarea { padding:10px 12px; background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius-md); color:var(--text-primary); font-size:0.85em; }
    .edit-modal .form-group textarea { min-height:80px; font-family:monospace; font-size:0.75em; }
    .edit-modal .form-group input:focus, .edit-modal .form-group textarea:focus { outline:none; border-color:var(--text-secondary); }
    .edit-modal .checkbox-group { display:flex; align-items:center; gap:8px; }
    .edit-modal .checkbox-group label { text-transform:none; font-size:0.85em; }
    .edit-modal .modal-actions { display:flex; gap:8px; justify-content:flex-end; margin-top:16px; }
    .edit-modal .btn { padding:10px 20px; border-radius:100px; border:none; cursor:pointer; font-weight:600; font-size:0.85em; }
    .edit-modal .btn.primary { background:var(--primary); color:#fff; }
    .edit-modal .btn.primary:hover { background:var(--primary-hover); }
    .edit-modal .btn.secondary { background:var(--bg-surface); color:var(--text-secondary); border:1px solid var(--border); }
    .edit-modal .btn.secondary:hover { border-color:var(--text-secondary); color:var(--text-primary); }
</style>
{% endblock %}
{% block content %}
<div class="admin-header">
    <h1>Redes Sociais</h1>
    <p>Gerencie os links de redes sociais exibidos no rodape do site.</p>
</div>

<div class="admin-nav-pills">
    <a href="{{ url_for('admin_social') }}" class="active">Redes Sociais</a>
    <a href="{{ url_for('admin_panel') }}">← Voltar</a>
</div>

<div class="admin-section">
    <div class="section-header">
        <h2>Adicionar Rede Social</h2>
    </div>
    <form method="POST" action="{{ url_for('admin_social_add') }}" class="add-form">
        <div class="form-group">
            <label>Nome</label>
            <input type="text" name="name" placeholder="Ex: Telegram" required>
        </div>
        <div class="form-group">
            <label>URL</label>
            <input type="url" name="url" placeholder="https://t.me/..." required>
        </div>
        <div class="form-group">
            <label>Ordem</label>
            <input type="number" name="sort_order" value="0" style="min-width:80px;">
        </div>
        <div class="form-group" style="flex:1; min-width:300px;">
            <label>SVG do icone</label>
            <textarea name="icon_svg" placeholder="<svg viewBox=...></svg>"></textarea>
        </div>
        <button type="submit" class="action-btn green">+ Adicionar</button>
    </form>
</div>

<div class="admin-section">
    <div class="section-header">
        <h2>Links Cadastrados</h2>
        <span class="count">{{ links|length }} redes</span>
    </div>
    <table class="admin-table">
        <thead>
            <tr>
                <th style="width:40px;">Icone</th>
                <th>Nome</th>
                <th>URL</th>
                <th style="width:60px;">Ordem</th>
                <th style="width:80px;">Status</th>
                <th style="width:180px;">Acoes</th>
            </tr>
        </thead>
        <tbody>
            {% for link in links %}
            <tr>
                <td><div class="icon-preview">{{ link.icon_svg|safe if link.icon_svg else '' }}</div></td>
                <td><strong>{{ link.name }}</strong></td>
                <td style="max-width:300px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text-muted); font-size:0.8em;">{{ link.url }}</td>
                <td>{{ link.sort_order }}</td>
                <td>{% if link.is_active %}<span class="badge-active">Ativo</span>{% else %}<span class="badge-inactive">Inativo</span>{% endif %}</td>
                <td>
                    <button class="action-btn" onclick="openEditModal({{ link.id }})">✏️ Editar</button>
                    <a href="{{ url_for('admin_social_toggle', link_id=link.id) }}" class="action-btn yellow">{% if link.is_active %}Desativar{% else %}Ativar{% endif %}</a>
                    <form method="POST" action="{{ url_for('admin_social_delete', link_id=link.id) }}" class="inline-form" onsubmit="return confirm('Remover {{ link.name }}?')">
                        <button type="submit" class="action-btn red" aria-label="Excluir link {{ link.name|e }}">🗑</button>
                    </form>
                </td>
            </tr>
            {% else %}
            <tr>
                <td colspan="6" style="text-align:center; color:var(--text-muted); padding:32px;">Nenhuma rede social cadastrada.</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>

{% for link in links %}
<div class="edit-modal-overlay" id="editModal{{ link.id }}">
    <div class="edit-modal">
        <h3>Editar {{ link.name }}</h3>
        <form method="POST" action="{{ url_for('admin_social_edit', link_id=link.id) }}">
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
            <div class="form-group">
                <label>Nome</label>
                <input type="text" name="name" value="{{ link.name }}" required>
            </div>
            <div class="form-group">
                <label>URL</label>
                <input type="url" name="url" value="{{ link.url }}" required>
            </div>
            <div class="form-group">
                <label>Ordem</label>
                <input type="number" name="sort_order" value="{{ link.sort_order }}">
            </div>
            <div class="form-group">
                <label>SVG do icone</label>
                <textarea name="icon_svg">{{ link.icon_svg }}</textarea>
            </div>
            <div class="checkbox-group">
                <input type="checkbox" name="is_active" id="active{{ link.id }}" {% if link.is_active %}checked{% endif %}>
                <label for="active{{ link.id }}">Ativo</label>
            </div>
            <div class="modal-actions">
                <button type="button" class="btn secondary" onclick="closeEditModal({{ link.id }})">Cancelar</button>
                <button type="submit" class="btn primary">Salvar</button>
            </div>
        </form>
    </div>
</div>
{% endfor %}

<script>
    function openEditModal(id) {
        document.getElementById('editModal' + id).classList.add('active');
    }
    function closeEditModal(id) {
        document.getElementById('editModal' + id).classList.remove('active');
    }
    document.querySelectorAll('.edit-modal-overlay').forEach(function(overlay) {
        overlay.addEventListener('click', function(e) {
            if (e.target === overlay) {
                overlay.classList.remove('active');
            }
        });
    });
</script>
{% endblock %}