<div class="page-actions" style="margin-bottom:20px;display:flex;gap:10px;align-items:center">
  <button class="btn btn-primary" onclick="openNewPerkModal()"><i class="bi bi-plus-circle-fill"></i> Add Partner Perk</button>
</div>

<!-- Summary cards -->
<div class="stats-grid" style="margin-bottom:24px">
  <div class="stat-card">
    <div class="stat-icon" style="background:#eff6ff"><i class="bi bi-gift-fill" style="color:#1a56db"></i></div>
    <div><p class="stat-label">Active Perks</p><p class="stat-value"><%= perks.filter(p=>p.is_active).length %></p></div>
  </div>
  <div class="stat-card">
    <div class="stat-icon" style="background:#f0fdf4"><i class="bi bi-hand-index-thumb-fill" style="color:#16a34a"></i></div>
    <div><p class="stat-label">Total Claims</p><p class="stat-value"><%= perks.reduce((s,p)=>s+(p.claim_count||0),0) %></p></div>
  </div>
  <div class="stat-card">
    <div class="stat-icon" style="background:#fefce8"><i class="bi bi-award-fill" style="color:#ca8a04"></i></div>
    <div><p class="stat-label">Exclusive Perks</p><p class="stat-value"><%= perks.filter(p=>p.is_exclusive).length %></p></div>
  </div>
</div>

<div class="admin-card">
  <table class="admin-table">
    <thead>
      <tr>
        <th>Partner</th>
        <th>Category</th>
        <th>Offer</th>
        <th>Token Price</th>
        <th>Claims</th>
        <th>Valid Until</th>
        <th>Status</th>
        <th>Actions</th>
      </tr>
    </thead>
    <tbody>
      <% if (perks && perks.length) { %>
      <% perks.forEach(p => { %>
      <tr>
        <td>
          <div style="display:flex;align-items:center;gap:10px">
            <% if (p.partner_logo) { %>
            <img src="<%= p.partner_logo %>" alt="" style="width:32px;height:32px;object-fit:contain;border-radius:4px;border:1px solid #e5e7eb">
            <% } else { %>
            <div style="width:32px;height:32px;border-radius:4px;background:#e5e7eb;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.75rem;color:#6b7280"><%= p.partner_name[0] %></div>
            <% } %>
            <div>
              <div style="font-weight:600;font-size:.85rem"><%= p.partner_name %></div>
              <a href="<%= p.partner_url %>" target="_blank" style="font-size:.72rem;color:#6b7280;text-decoration:none"><%= p.partner_url.replace(/^https?:\/\//,'').split('/')[0] %> <i class="bi bi-box-arrow-up-right"></i></a>
            </div>
          </div>
        </td>
        <td><span class="badge badge-info"><%= p.category %></span><% if(p.is_exclusive){%> <span class="badge badge-warning" style="font-size:.65rem">Exclusive</span><%}%></td>
        <td style="max-width:220px">
          <div style="font-weight:600;font-size:.82rem"><%= p.headline %></div>
          <% if (p.discount_details) { %><div style="font-size:.72rem;color:#6b7280"><%= p.discount_details %></div><% } %>
        </td>
        <td style="font-weight:700;color:#7c3aed">
          <% if (p.token_price > 0) { %><%= parseFloat(p.token_price).toLocaleString() %> B2B<% } else { %><span style="color:#d1d5db">Free</span><% } %>
        </td>
        <td style="text-align:center">
          <button class="btn btn-xs btn-ghost" onclick="viewClaims(<%= p.id %>, '<%= p.partner_name.replace(/'/g,"\\'") %>')" title="View who claimed this"><%= p.claim_count || 0 %> <i class="bi bi-people"></i></button>
        </td>
        <td style="font-size:.78rem;white-space:nowrap">
          <% if (p.valid_until) { %>
            <% const daysLeft = Math.ceil((new Date(p.valid_until) - new Date()) / 86400000); %>
            <span style="color:<%= daysLeft < 14 ? '#dc2626' : daysLeft < 30 ? '#d97706' : '#374151' %>">
              <%= moment(p.valid_until).format('MMM D, YYYY') %>
              <% if(daysLeft > 0) { %>(<%= daysLeft %>d)<% } else { %><br><span style="color:#dc2626;font-size:.7rem">Expired</span><% } %>
            </span>
          <% } else { %><span style="color:#9ca3af">No expiry</span><% } %>
        </td>
        <td><span class="badge badge-<%= p.is_active ? 'success' : 'secondary' %>"><%= p.is_active ? 'Active' : 'Inactive' %></span></td>
        <td>
          <div style="display:flex;gap:6px">
            <button class="btn btn-xs btn-secondary edit-perk-btn" data-perk="<%= JSON.stringify(p).replace(/"/g,'&quot;') %>"><i class="bi bi-pencil"></i></button>
            <% if (p.is_active) { %>
            <button class="btn btn-xs btn-danger deactivate-perk" data-id="<%= p.id %>"><i class="bi bi-x-circle"></i></button>
            <% } %>
          </div>
        </td>
      </tr>
      <% }) %>
      <% } else { %>
      <tr><td colspan="8" style="text-align:center;padding:40px;color:#9ca3af">No partner perks yet. Add your first partner!</td></tr>
      <% } %>
    </tbody>
  </table>
</div>

<!-- New/Edit Perk Modal -->
<div class="modal" id="perkModal" style="display:none">
  <div class="modal-backdrop" onclick="closePerkModal()"></div>
  <div class="modal-content modal-lg">
    <div class="modal-header">
      <h3 id="perkModalTitle">Add Partner Perk</h3>
      <button onclick="closePerkModal()" class="modal-close"><i class="bi bi-x-lg"></i></button>
    </div>
    <div class="modal-body">
      <input type="hidden" id="perkId">
      <div class="form-row">
        <div class="form-group" style="flex:2">
          <label>Partner Name *</label>
          <input type="text" id="perkPartnerName" placeholder="e.g., QuickBooks Online">
        </div>
        <div class="form-group" style="flex:1">
          <label>Category *</label>
          <input type="text" id="perkCategory" placeholder="e.g., Accounting, CRM, Marketing" list="perkCategoryList">
          <datalist id="perkCategoryList">
            <option value="Accounting"></option><option value="CRM"></option><option value="Email Marketing"></option>
            <option value="Design"></option><option value="HR & Payroll"></option><option value="Legal"></option>
            <option value="Video Conferencing"></option><option value="Project Management"></option>
            <option value="E-Commerce"></option><option value="Cybersecurity"></option><option value="General"></option>
          </datalist>
        </div>
      </div>
      <div class="form-group">
        <label>Partner Website URL * <span style="font-size:.75rem;color:#6b7280">(where the member clicks through to)</span></label>
        <input type="url" id="perkUrl" placeholder="https://partner.com/signup">
      </div>
      <div class="form-group">
        <label>Partner Logo URL <span style="font-size:.75rem;color:#6b7280">(optional — paste a direct image URL)</span></label>
        <input type="url" id="perkLogo" placeholder="https://...">
      </div>
      <div class="form-group">
        <label>Offer Headline * <span style="font-size:.75rem;color:#6b7280">(short, punchy — shown on the card)</span></label>
        <input type="text" id="perkHeadline" placeholder="e.g., 3 months free on QuickBooks">
      </div>
      <div class="form-group">
        <label>Description</label>
        <textarea id="perkDescription" rows="3" placeholder="Brief description of the partner and the offer..."></textarea>
      </div>
      <div class="form-row">
        <div class="form-group">
          <label>B2B Token Price <span style="font-size:.75rem;color:#6b7280">(tokens member pays to purchase)</span></label>
          <input type="number" id="perkTokenPrice" placeholder="e.g., 500" min="0" step="1">
        </div>
        <div class="form-group" style="flex:2">
          <label>Purchase Terms <span style="font-size:.75rem;color:#6b7280">(shown to member)</span></label>
          <input type="text" id="perkDiscountDetails" placeholder="e.g., Pay with B2B tokens to unlock access. Tokens are non-refundable.">
        </div>
      </div>
      <div class="form-row">
        <div class="form-group">
          <label>Valid From</label>
          <input type="date" id="perkValidFrom">
        </div>
        <div class="form-group">
          <label>Valid Until</label>
          <input type="date" id="perkValidUntil">
        </div>
        <div class="form-group">
          <label>Sort Order</label>
          <input type="number" id="perkSortOrder" placeholder="0 = top" min="0">
        </div>
      </div>
      <div class="form-row">
        <div class="form-group" style="flex-direction:row;align-items:center;gap:10px">
          <input type="checkbox" id="perkExclusive" style="width:auto;margin:0">
          <label for="perkExclusive" style="margin:0;cursor:pointer">Mark as <strong>Exclusive to Biz2Biz Members</strong></label>
        </div>
        <div class="form-group" id="perkActiveGroup" style="flex-direction:row;align-items:center;gap:10px;display:none">
          <input type="checkbox" id="perkIsActive" style="width:auto;margin:0" checked>
          <label for="perkIsActive" style="margin:0;cursor:pointer">Active (visible to members)</label>
        </div>
      </div>
      <div class="modal-actions" style="margin-top:20px">
        <button class="btn btn-primary" onclick="savePerk()"><i class="bi bi-check-lg"></i> <span id="perkSaveBtnText">Add Partner Perk</span></button>
        <button class="btn btn-ghost" onclick="closePerkModal()">Cancel</button>
      </div>
    </div>
  </div>
</div>

<!-- Claims Modal -->
<div class="modal" id="claimsModal" style="display:none">
  <div class="modal-backdrop" onclick="document.getElementById('claimsModal').style.display='none'"></div>
  <div class="modal-content modal-md">
    <div class="modal-header">
      <h3 id="claimsModalTitle">Perk Claims</h3>
      <button onclick="document.getElementById('claimsModal').style.display='none'" class="modal-close"><i class="bi bi-x-lg"></i></button>
    </div>
    <div class="modal-body" id="claimsModalBody">
      <p style="color:#6b7280;text-align:center">Loading...</p>
    </div>
  </div>
</div>

<script>
let editingPerkId = null;

function openNewPerkModal() {
  editingPerkId = null;
  document.getElementById('perkModalTitle').textContent = 'Add Partner Perk';
  document.getElementById('perkSaveBtnText').textContent = 'Add Partner Perk';
  document.getElementById('perkActiveGroup').style.display = 'none';
  ['perkId','perkPartnerName','perkUrl','perkLogo','perkCategory','perkHeadline','perkDescription','perkTokenPrice','perkDiscountDetails','perkValidFrom','perkValidUntil','perkSortOrder'].forEach(id => document.getElementById(id).value = '');
  document.getElementById('perkExclusive').checked = false;
  document.getElementById('perkIsActive').checked = true;
  document.getElementById('perkModal').style.display = 'flex';
}

function closePerkModal() { document.getElementById('perkModal').style.display = 'none'; }

document.querySelectorAll('.edit-perk-btn').forEach(btn => {
  btn.addEventListener('click', () => {
    const p = JSON.parse(btn.dataset.perk);
    editingPerkId = p.id;
    document.getElementById('perkModalTitle').textContent = 'Edit Partner Perk';
    document.getElementById('perkSaveBtnText').textContent = 'Save Changes';
    document.getElementById('perkActiveGroup').style.display = 'flex';
    document.getElementById('perkId').value = p.id;
    document.getElementById('perkPartnerName').value = p.partner_name || '';
    document.getElementById('perkUrl').value = p.partner_url || '';
    document.getElementById('perkLogo').value = p.partner_logo || '';
    document.getElementById('perkCategory').value = p.category || '';
    document.getElementById('perkHeadline').value = p.headline || '';
    document.getElementById('perkDescription').value = p.description || '';
    document.getElementById('perkTokenPrice').value = p.token_price || 0;
    document.getElementById('perkDiscountDetails').value = p.discount_details || '';
    document.getElementById('perkValidFrom').value = p.valid_from ? p.valid_from.substring(0,10) : '';
    document.getElementById('perkValidUntil').value = p.valid_until ? p.valid_until.substring(0,10) : '';
    document.getElementById('perkSortOrder').value = p.sort_order || 0;
    document.getElementById('perkExclusive').checked = !!p.is_exclusive;
    document.getElementById('perkIsActive').checked = !!p.is_active;
    document.getElementById('perkModal').style.display = 'flex';
  });
});

async function savePerk() {
  const body = {
    partner_name: document.getElementById('perkPartnerName').value.trim(),
    partner_url:  document.getElementById('perkUrl').value.trim(),
    partner_logo: document.getElementById('perkLogo').value.trim(),
    category:     document.getElementById('perkCategory').value.trim() || 'General',
    headline:     document.getElementById('perkHeadline').value.trim(),
    description:  document.getElementById('perkDescription').value.trim(),
    token_price:  document.getElementById('perkTokenPrice').value || 0,
    discount_details: document.getElementById('perkDiscountDetails').value.trim(),
    valid_from:   document.getElementById('perkValidFrom').value || null,
    valid_until:  document.getElementById('perkValidUntil').value || null,
    sort_order:   document.getElementById('perkSortOrder').value || 0,
    is_exclusive: document.getElementById('perkExclusive').checked ? 'true' : 'false',
    is_active:    document.getElementById('perkIsActive').checked ? 'true' : 'false'
  };
  if (!body.partner_name || !body.partner_url || !body.headline) return alert('Partner name, URL, and headline are required.');
  const url    = editingPerkId ? `/admin/partner-perks/${editingPerkId}` : '/admin/partner-perks';
  const method = editingPerkId ? 'PUT' : 'POST';
  const res    = await fetch(url, { method, headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) });
  const data   = await res.json();
  if (data.success) { closePerkModal(); location.reload(); }
  else alert(data.error || 'Failed to save perk.');
}

async function viewClaims(perkId, perkName) {
  document.getElementById('claimsModalTitle').textContent = `Claims — ${perkName}`;
  document.getElementById('claimsModalBody').innerHTML = '<p style="color:#6b7280;text-align:center">Loading...</p>';
  document.getElementById('claimsModal').style.display = 'flex';
  const res  = await fetch(`/admin/partner-perks/${perkId}/claims`);
  const data = await res.json();
  if (!data.claims || !data.claims.length) {
    document.getElementById('claimsModalBody').innerHTML = '<p style="color:#9ca3af;text-align:center;padding:20px">No members have claimed this perk yet.</p>';
    return;
  }
  let html = `<table class="admin-table"><thead><tr><th>Member</th><th>Organization</th><th>Claimed At</th></tr></thead><tbody>`;
  data.claims.forEach(c => {
    html += `<tr><td>${c.first_name} ${c.last_name}<br><span style="font-size:.75rem;color:#6b7280">${c.email}</span></td><td>${c.org_name||'—'}</td><td style="font-size:.78rem">${new Date(c.claimed_at).toLocaleString()}</td></tr>`;
  });
  html += '</tbody></table>';
  document.getElementById('claimsModalBody').innerHTML = html;
}

document.querySelectorAll('.deactivate-perk').forEach(btn => {
  btn.addEventListener('click', async () => {
    if (!confirm('Deactivate this partner perk? Members will no longer see it.')) return;
    const res = await fetch(`/admin/partner-perks/${btn.dataset.id}`, { method: 'DELETE' });
    if ((await res.json()).success) location.reload();
  });
});
</script>
