<div class="community-page">
  <div class="community-tabs">
    <button class="ctab active" data-tab="network">Networking</button>
    <button class="ctab" data-tab="groups">Groups</button>
    <button class="ctab" data-tab="messages">Messages</button>
    <button class="ctab" data-tab="matches">Business Matches</button>
  </div>

  <!-- Networking Tab -->
  <div class="ctab-content active" id="tab-network">
    <h3 class="section-title">Your Connections</h3>
    <% if (connections && connections.length) { %>
    <div class="connections-grid">
      <% connections.forEach(c => { %>
      <a href="/member/directory/<%= c.slug %>" class="connection-card">
        <% if (c.logo) { %><img src="<%= c.logo %>" alt="<%= c.org_name %>" class="conn-logo"><% } else { %><div class="conn-logo-placeholder"><%= c.org_name[0] %></div><% } %>
        <h4><%= c.org_name %></h4>
        <span class="badge badge-success"><i class="bi bi-check-circle-fill"></i> Connected</span>
      </a>
      <% }) %>
    </div>
    <% } else { %><div class="empty-state-sm"><i class="bi bi-diagram-2"></i><p>No connections yet. Browse the <a href="/member/directory">directory</a> to connect with businesses.</p></div><% } %>

    <h3 class="section-title" style="margin-top:32px">Recent Messages</h3>
    <% if (messages && messages.length) { %>
    <div class="messages-preview">
      <% messages.forEach(m => { %>
      <div class="msg-preview">
        <div class="msg-avatar"><% if (m.avatar) { %><img src="<%= m.avatar %>"><% } else { %><span><%= m.first_name[0] %></span><% } %></div>
        <div class="msg-body">
          <div class="msg-header"><span class="msg-sender"><%= m.first_name %> <%= m.last_name %></span><span class="msg-time"><%= moment(m.created_at).fromNow() %></span></div>
          <p class="msg-preview-text"><%= m.content.substring(0, 80) %>...</p>
        </div>
        <% if (!m.is_read) { %><span class="unread-dot"></span><% } %>
      </div>
      <% }) %>
    </div>
    <a href="/member/community/messages" class="btn btn-outline-primary btn-sm">View All Messages</a>
    <% } else { %><div class="empty-state-sm"><i class="bi bi-chat-dots"></i><p>No messages yet. <a href="/member/community/messages">Send a message</a> to another member.</p></div><% } %>
  </div>

  <!-- Groups Tab -->
  <div class="ctab-content" id="tab-groups">
    <div class="tab-actions"><a href="/member/community/groups" class="btn btn-primary btn-sm"><i class="bi bi-grid-3x3-gap-fill"></i> All Groups</a></div>
    <% if (groups && groups.length) { %>
    <div class="groups-grid">
      <% groups.forEach(g => { %>
      <div class="group-card">
        <div class="gc-icon"><i class="bi bi-people-fill"></i></div>
        <h4><a href="/member/community/groups/<%= g.id %>"><%= g.name %></a></h4>
        <p><%= g.description?.substring(0,80) || '' %></p>
        <div class="gc-meta"><span><i class="bi bi-people-fill"></i> <%= g.member_count %> members</span></div>
        <% if (g.is_member) { %><span class="btn btn-sm btn-success btn-block" style="margin-top:8px"><i class="bi bi-check"></i> Joined</span>
        <% } else { %><button class="btn btn-sm btn-outline-primary btn-block join-group-btn" data-id="<%= g.id %>">Join Group</button><% } %>
      </div>
      <% }) %>
    </div>
    <% } else { %><div class="empty-state-sm"><i class="bi bi-people"></i><p>No groups yet. Be the first to create one!</p></div><% } %>
  </div>

  <!-- Messages Tab -->
  <div class="ctab-content" id="tab-messages">
    <div class="message-compose">
      <h3>Send a Message</h3>
      <div class="form-group"><label>To (User ID or email)</label><input type="text" id="msgRecipient" placeholder="Enter recipient user ID..."></div>
      <div class="form-group"><label>Subject</label><input type="text" id="msgSubject" placeholder="Subject (optional)"></div>
      <div class="form-group"><label>Message *</label><textarea id="msgContent" rows="5" placeholder="Write your message..."></textarea></div>
      <button class="btn btn-primary" id="sendMsg"><i class="bi bi-send-fill"></i> Send Message</button>
    </div>
  </div>

  <!-- Matches Tab -->
  <div class="ctab-content" id="tab-matches">
    <p class="text-muted" style="margin-bottom:16px">Businesses that could be great partners, vendors, or customers for your business.</p>
    <% if (suggestedConnections && suggestedConnections.length) { %>
    <div class="suggestions-grid">
      <% suggestedConnections.forEach(org => { %>
      <div class="suggestion-card">
        <% if (org.logo) { %><img src="<%= org.logo %>" alt="" class="sug-logo"><% } else { %><div class="sug-logo-placeholder"><%= org.name[0] %></div><% } %>
        <div class="sug-info">
          <h4><a href="/member/directory/<%= org.slug %>"><%= org.name %></a></h4>
          <p class="sug-category"><%= org.category_name || 'Business' %></p>
          <% if (org.city) { %><p class="sug-location"><i class="bi bi-geo-alt-fill"></i> <%= org.city %><%= org.state ? ', ' + org.state : '' %></p><% } %>
        </div>
        <button class="btn btn-sm btn-primary connect-btn" data-id="<%= org.id %>"><i class="bi bi-person-plus-fill"></i> Connect</button>
      </div>
      <% }) %>
    </div>
    <% } else { %><div class="empty-state-sm"><i class="bi bi-person-check"></i><p>No suggestions at this time. Complete your profile to get better matches.</p></div><% } %>
  </div>
</div>

<script>
document.querySelectorAll('.ctab').forEach(tab => {
  tab.addEventListener('click', () => {
    document.querySelectorAll('.ctab,.ctab-content').forEach(el => el.classList.remove('active'));
    tab.classList.add('active');
    document.getElementById('tab-' + tab.dataset.tab).classList.add('active');
  });
});
document.querySelectorAll('.join-group-btn').forEach(btn => {
  btn.addEventListener('click', async () => {
    const res = await fetch(`/member/community/groups/${btn.dataset.id}/join`, { method: 'POST' });
    if ((await res.json()).success) { btn.className = 'btn btn-sm btn-success btn-block'; btn.innerHTML = '<i class="bi bi-check"></i> Joined'; }
  });
});
document.getElementById('sendMsg').addEventListener('click', async () => {
  const recipient_id = document.getElementById('msgRecipient').value;
  const content = document.getElementById('msgContent').value;
  if (!recipient_id || !content) return showToast('Please fill in recipient and message.', 'error');
  const res = await fetch('/member/community/messages', { method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({ recipient_id, subject: document.getElementById('msgSubject').value, content }) });
  const data = await res.json();
  showToast(data.success ? data.message : data.error, data.success ? 'success' : 'error');
  if (data.success) { document.getElementById('msgContent').value = ''; document.getElementById('msgRecipient').value = ''; }
});
document.querySelectorAll('.connect-btn').forEach(btn => {
  btn.addEventListener('click', async () => {
    const res = await fetch(`/member/directory/${btn.dataset.id}/connect`, { method: 'POST', headers: {'Content-Type':'application/json'}, body: JSON.stringify({connection_type:'general',message:''}) });
    const data = await res.json();
    showToast(data.success ? 'Connection request sent!' : data.error, data.success ? 'success' : 'error');
    if (data.success) btn.disabled = true;
  });
});
</script>
