{% extends "admin/base.html" %}
{% block title %}Social Media Management{% endblock %}
{% block content %}
<div style="padding:2rem;max-width:1200px;margin:0 auto">
  <h1 style="font-size:2rem;font-weight:700;margin-bottom:2rem;color:var(--accent)">🌐 Social Media Management</h1>
  
  <!-- Add New Social Media -->
  <div style="background:var(--surface-2);border-radius:16px;padding:1.5rem;margin-bottom:2rem">
    <h2 style="font-size:1.3rem;font-weight:600;margin-bottom:1rem;color:var(--accent)">➕ Add New</h2>
    <form method="POST" action="{{ url_for('admin.social_create') }}" style="display:grid;gap:1rem">
      <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem">
        <div>
          <label style="display:block;margin-bottom:0.5rem;font-weight:600;color:var(--accent)">Name</label>
          <input type="text" name="name" required placeholder="Twitter" 
                 style="width:100%;padding:0.75rem;background:var(--surface-3);border:2px solid transparent;border-radius:8px;color:var(--text);transition:border 0.2s" 
                 onfocus="this.style.borderColor='var(--accent)'" onblur="this.style.borderColor='transparent'" />
        </div>
        <div>
          <label style="display:block;margin-bottom:0.5rem;font-weight:600;color:var(--accent)">Icon/Emoji</label>
          <input type="text" name="icon" placeholder="🐦" 
                 style="width:100%;padding:0.75rem;background:var(--surface-3);border:2px solid transparent;border-radius:8px;color:var(--text);transition:border 0.2s" 
                 onfocus="this.style.borderColor='var(--accent)'" onblur="this.style.borderColor='transparent'" />
        </div>
        <div>
          <label style="display:block;margin-bottom:0.5rem;font-weight:600;color:var(--accent)">URL</label>
          <input type="url" name="url" required placeholder="https://twitter.com/fightskill" 
                 style="width:100%;padding:0.75rem;background:var(--surface-3);border:2px solid transparent;border-radius:8px;color:var(--text);transition:border 0.2s" 
                 onfocus="this.style.borderColor='var(--accent)'" onblur="this.style.borderColor='transparent'" />
        </div>
      </div>
      <button type="submit" style="padding:0.75rem 2rem;background:var(--accent);color:#000;border:none;border-radius:999px;font-weight:700;cursor:pointer;transition:transform 0.2s,box-shadow 0.2s;width:fit-content" 
              onmouseover="this.style.transform='translateY(-2px)';this.style.boxShadow='0 8px 20px rgba(110,231,183,0.3)'" 
              onmouseout="this.style.transform='translateY(0)';this.style.boxShadow='none'">Add Social Media</button>
    </form>
  </div>
  
  <!-- Social Media List -->
  <div style="background:var(--surface-2);border-radius:16px;padding:1.5rem">
    <h2 style="font-size:1.3rem;font-weight:600;margin-bottom:1.5rem;color:var(--accent)">📋 Current Social Links</h2>
    
    {% if socials %}
    <div style="display:grid;gap:1rem">
      {% for social in socials %}
      <div style="background:var(--surface-3);border-radius:12px;padding:1.5rem;border-left:4px solid var(--accent);display:flex;align-items:center;gap:1rem;justify-content:space-between">
        <div style="display:flex;align-items:center;gap:1rem;flex:1">
          <span style="font-size:2rem">{{ social.icon }}</span>
          <div style="flex:1">
            <h3 style="font-weight:600;margin:0 0 0.25rem 0;color:var(--accent)">{{ social.name }}</h3>
            <a href="{{ social.url }}" target="_blank" style="color:var(--text-muted);text-decoration:none;font-size:0.9rem;transition:color 0.2s" 
               onmouseover="this.style.color='var(--accent)'" onmouseout="this.style.color='var(--text-muted)'">{{ social.url }}</a>
          </div>
          <div style="display:flex;align-items:center;gap:0.5rem">
            <span style="padding:0.25rem 0.75rem;background:{{ 'var(--accent)' if social.is_active else 'var(--surface-4)' }};color:#000;border-radius:999px;font-size:0.85rem;font-weight:600">
              {{ 'Active' if social.is_active else 'Inactive' }}
            </span>
          </div>
        </div>
        
        <div style="display:flex;gap:0.5rem">
          <button onclick="editSocial({{ social.id }}, '{{ social.name }}', '{{ social.url }}', '{{ social.icon }}', {{ '1' if social.is_active else '0' }})" 
                  style="padding:0.5rem 1rem;background:var(--accent);color:#000;border:none;border-radius:8px;font-weight:600;cursor:pointer;transition:opacity 0.2s" 
                  onmouseover="this.style.opacity='0.8'" onmouseout="this.style.opacity='1'">Edit</button>
          <form method="POST" action="{{ url_for('admin.social_delete', sid=social.id) }}" style="display:inline" 
                onsubmit="return confirm('Delete {{ social.name }}?')">
            <button type="submit" style="padding:0.5rem 1rem;background:#EF4444;color:#fff;border:none;border-radius:8px;font-weight:600;cursor:pointer;transition:opacity 0.2s" 
                    onmouseover="this.style.opacity='0.8'" onmouseout="this.style.opacity='1'">Delete</button>
          </form>
        </div>
      </div>
      {% endfor %}
    </div>
    {% else %}
    <div style="text-align:center;padding:3rem;color:var(--text-muted)">
      <p style="font-size:1.1rem">No social media links added yet</p>
    </div>
    {% endif %}
  </div>
</div>

<!-- Edit Modal -->
<div id="editModal" style="display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.8);z-index:1000;align-items:center;justify-content:center">
  <div style="background:var(--surface-2);border-radius:16px;padding:2rem;max-width:500px;width:90%">
    <h2 style="font-size:1.5rem;font-weight:700;margin-bottom:1.5rem;color:var(--accent)">Edit Social Media</h2>
    <form id="editForm" method="POST" style="display:grid;gap:1rem">
      <div>
        <label style="display:block;margin-bottom:0.5rem;font-weight:600;color:var(--accent)">Name</label>
        <input type="text" name="name" id="edit_name" required 
               style="width:100%;padding:0.75rem;background:var(--surface-3);border:2px solid transparent;border-radius:8px;color:var(--text)" />
      </div>
      <div>
        <label style="display:block;margin-bottom:0.5rem;font-weight:600;color:var(--accent)">Icon/Emoji</label>
        <input type="text" name="icon" id="edit_icon" 
               style="width:100%;padding:0.75rem;background:var(--surface-3);border:2px solid transparent;border-radius:8px;color:var(--text)" />
      </div>
      <div>
        <label style="display:block;margin-bottom:0.5rem;font-weight:600;color:var(--accent)">URL</label>
        <input type="url" name="url" id="edit_url" required 
               style="width:100%;padding:0.75rem;background:var(--surface-3);border:2px solid transparent;border-radius:8px;color:var(--text)" />
      </div>
      <div>
        <label style="display:block;margin-bottom:0.5rem;font-weight:600;color:var(--accent)">
          <input type="checkbox" name="is_active" id="edit_active" value="1" style="margin-right:0.5rem" />
          Active
        </label>
      </div>
      <div style="display:flex;gap:1rem;justify-content:flex-end">
        <button type="button" onclick="closeEditModal()" style="padding:0.75rem 1.5rem;background:var(--surface-3);color:var(--text);border:none;border-radius:8px;font-weight:600;cursor:pointer">Cancel</button>
        <button type="submit" style="padding:0.75rem 1.5rem;background:var(--accent);color:#000;border:none;border-radius:8px;font-weight:700;cursor:pointer">Save Changes</button>
      </div>
    </form>
  </div>
</div>

<script>
function editSocial(id, name, url, icon, active) {
  document.getElementById('editForm').action = '/admin/social/' + id + '/edit';
  document.getElementById('edit_name').value = name;
  document.getElementById('edit_url').value = url;
  document.getElementById('edit_icon').value = icon;
  document.getElementById('edit_active').checked = active == 1;
  document.getElementById('editModal').style.display = 'flex';
}

function closeEditModal() {
  document.getElementById('editModal').style.display = 'none';
}

// Close modal on outside click
document.getElementById('editModal').addEventListener('click', function(e) {
  if (e.target === this) closeEditModal();
});
</script>
{% endblock %}