<div style="display:flex;gap:12px;margin-bottom:20px;align-items:center">
  <a href="/admin/members" class="btn btn-ghost btn-sm"><i class="bi bi-arrow-left"></i> Back</a>
  <% if (member.is_active) { %>
    <button class="btn btn-sm btn-warning" onclick="suspendMember(<%= member.id %>)"><i class="bi bi-pause-circle-fill"></i> Suspend</button>
  <% } else { %>
    <button class="btn btn-sm btn-success" onclick="activateMember(<%= member.id %>)"><i class="bi bi-play-circle-fill"></i> Activate</button>
  <% } %>
  <% if (member.membership_status === 'trial' && member.is_trial) { %>
    <button class="btn btn-sm btn-outline-primary" onclick="extendTrial()"><i class="bi bi-plus-circle"></i> Extend Trial</button>
    <button class="btn btn-sm btn-success" onclick="convertTrial()"><i class="bi bi-check-circle"></i> Convert to Paid</button>
  <% } else if (member.membership_status !== 'active') { %>
    <button class="btn btn-sm btn-success" onclick="approveMember(<%= member.id %>)"><i class="bi bi-check-circle-fill"></i> Approve Membership</button>
  <% } %>
</div>

<div class="member-detail-grid">
  <!-- Profile Card -->
  <div class="form-card">
    <h3><i class="bi bi-building"></i> Organization</h3>
    <div class="detail-list">
      <div class="dl-row"><span>Name</span><strong><%= member.org_name || '—' %></strong></div>
      <div class="dl-row"><span>Location</span><strong><%= [member.city, member.state].filter(Boolean).join(', ') || '—' %></strong></div>
      <% if (member.org_slug) { %><div class="dl-row"><span>Profile</span><a href="/directory/<%= member.org_slug %>" target="_blank">/directory/<%= member.org_slug %></a></div><% } %>
    </div>
    <h3 style="margin-top:20px"><i class="bi bi-person-fill"></i> Account</h3>
    <div class="detail-list">
      <div class="dl-row"><span>Name</span><strong><%= member.first_name %> <%= member.last_name %></strong></div>
      <div class="dl-row"><span>Email</span><a href="mailto:<%= member.email %>"><%= member.email %></a></div>
      <div class="dl-row"><span>Role</span><span class="badge badge-secondary"><%= member.role %></span></div>
      <div class="dl-row"><span>Verified</span><span class="badge badge-<%= member.is_verified ? 'success' : 'warning' %>"><%= member.is_verified ? 'Yes' : 'No' %></span></div>
      <div class="dl-row"><span>Account Status</span><span class="badge badge-<%= member.is_active ? 'success' : 'danger' %>"><%= member.is_active ? 'Active' : 'Suspended' %></span></div>
      <div class="dl-row"><span>Last Login</span><strong><%= member.last_login ? moment(member.last_login).format('MMM D, YYYY h:mm A') : 'Never' %></strong></div>
      <div class="dl-row"><span>Joined</span><strong><%= moment(member.created_at).format('MMMM D, YYYY') %></strong></div>
    </div>
  </div>

  <!-- Membership Card -->
  <div class="form-card">
    <h3><i class="bi bi-patch-check-fill"></i> Membership</h3>
    <div class="detail-list">
      <div class="dl-row"><span>Status</span>
        <% if (member.is_trial) { %>
          <span class="badge badge-trial">Free Trial</span>
        <% } else { %>
          <span class="badge badge-<%= member.membership_status === 'active' ? 'success' : member.membership_status === 'pending' ? 'warning' : 'danger' %>"><%= member.membership_status %></span>
        <% } %>
      </div>
      <% if (member.is_trial) { %>
      <div class="dl-row"><span>Trial Start</span><strong><%= member.trial_start ? moment(member.trial_start).format('MMM D, YYYY') : '—' %></strong></div>
      <div class="dl-row"><span>Trial End</span><strong><%= member.trial_end ? moment(member.trial_end).format('MMM D, YYYY') : '—' %></strong></div>
      <div class="dl-row"><span>Days Remaining</span>
        <% const daysLeft = moment(member.trial_end).diff(moment(),'days'); %>
        <strong class="<%= daysLeft <= 3 ? 'text-danger' : daysLeft <= 7 ? 'text-warning' : '' %>"><%= daysLeft >= 0 ? daysLeft + ' days' : 'Expired' %></strong>
      </div>
      <div class="dl-row"><span>Converted</span><span class="badge badge-<%= member.converted_from_trial ? 'success' : 'secondary' %>"><%= member.converted_from_trial ? 'Yes' : 'No' %></span></div>
      <% } else { %>
      <div class="dl-row"><span>Start Date</span><strong><%= member.start_date ? moment(member.start_date).format('MMM D, YYYY') : '—' %></strong></div>
      <div class="dl-row"><span>End Date</span><strong><%= member.end_date ? moment(member.end_date).format('MMM D, YYYY') : '—' %></strong></div>
      <% } %>
      <div class="dl-row"><span>Amount</span><strong>$<%= parseFloat(member.amount || 299).toFixed(2) %>/year</strong></div>
    </div>

  </div>

  <!-- Transactions -->
  <div class="form-card">
    <h3><i class="bi bi-receipt"></i> Transaction History</h3>
    <% if (transactions && transactions.length) { %>
    <table class="admin-table">
      <thead><tr><th>Date</th><th>Type</th><th>Amount</th><th>Status</th></tr></thead>
      <tbody>
        <% transactions.forEach(t => { %>
        <tr>
          <td style="font-size:.75rem"><%= moment(t.created_at).format('MMM D, YYYY') %></td>
          <td><span class="badge badge-secondary"><%= t.transaction_type %></span></td>
          <td><strong>$<%= parseFloat(t.amount).toFixed(2) %></strong></td>
          <td><span class="badge badge-<%= t.status==='completed'?'success':t.status==='pending'?'warning':'danger' %>"><%= t.status %></span></td>
        </tr>
        <% }) %>
      </tbody>
    </table>
    <% } else { %><div style="text-align:center;padding:20px;color:#9ca3af;font-size:.85rem">No transactions yet.</div><% } %>
  </div>

  <!-- Support Tickets -->
  <div class="form-card">
    <h3><i class="bi bi-headset"></i> Support Tickets</h3>
    <% if (tickets && tickets.length) { %>
    <div style="display:flex;flex-direction:column;gap:0">
      <% tickets.forEach(t => { %>
      <a href="/admin/support/<%= t.id %>" style="display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid #f3f4f6;text-decoration:none;color:inherit">
        <span class="badge badge-<%= t.priority==='urgent'?'danger':t.priority==='high'?'warning':t.priority==='medium'?'info':'secondary' %>"><%= t.priority %></span>
        <span style="font-size:.82rem;font-weight:600"><%= t.subject %></span>
        <span class="badge badge-<%= t.status==='open'?'danger':t.status==='resolved'?'success':'secondary' %>" style="margin-left:auto"><%= t.status %></span>
      </a>
      <% }) %>
    </div>
    <% } else { %><div style="text-align:center;padding:20px;color:#9ca3af;font-size:.85rem">No support tickets.</div><% } %>
  </div>
</div>

<script>
async function approveMember(id) { if(!confirm('Approve this membership?'))return; const r=await fetch(`/admin/members/${id}/approve`,{method:'POST',headers:{'Content-Type':'application/json'}}); if((await r.json()).success) location.reload(); }
async function suspendMember(id) { const reason=prompt('Suspension reason:'); if(reason===null)return; const r=await fetch(`/admin/members/${id}/suspend`,{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({reason})}); if((await r.json()).success) location.reload(); }
async function activateMember(id) { if(!confirm('Activate this member?'))return; const r=await fetch(`/admin/members/${id}/activate`,{method:'POST',headers:{'Content-Type':'application/json'}}); if((await r.json()).success) location.reload(); }
</script>

<style>
.member-detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.detail-list { display:flex; flex-direction:column; gap:0; }
.dl-row { display:flex; justify-content:space-between; align-items:center; padding:8px 0; border-bottom:1px solid #f3f4f6; font-size:.85rem; }
.dl-row:last-child { border-bottom:none; }
.dl-row span:first-child { color:#6b7280; }
.text-danger { color:#ef4444; }
.text-warning { color:#f59e0b; }
@media(max-width:768px){ .member-detail-grid{grid-template-columns:1fr} }
</style>
