@extends('backend.layout.exposcale')

@section('page_title', 'Ad Account — ' . ($adAccount->account_name ?? $adAccount->alias_name ?? $externalId))

@section('content')
@php
  $name       = $adAccount->account_name ?? $adAccount->alias_name ?? $externalId;
  $currency   = $adAccount->currency ?? 'USD';
  $balance    = (float)($adAccount->balance ?? 0);
  $provider   = $adAccount->provider ?? 'gradyn';
  $platform   = strtolower($adAccount->account_platform ?? 'meta');
  $statusRaw  = strtolower($adAccount->status ?? 'processing');
  $statusMap  = ['approved'=>'ba','active'=>'ba','accepted'=>'ba','disabled'=>'br','suspended'=>'br','deleted'=>'br'];
  $statusCls  = $statusMap[$statusRaw] ?? 'bpend';
  $statusTxt  = match($statusMap[$statusRaw] ?? 'bpend') {
    'ba'    => 'Approved',
    'br'    => in_array($statusRaw,['deleted']) ? 'Deleted' : 'Disabled',
    default => 'Processing',
  };
  $platIcons  = ['meta'=>'M','google'=>'G','tiktok'=>'T','snapchat'=>'S','twitter'=>'X','linkedin'=>'L'];
  $platIcon   = $platIcons[$platform] ?? 'M';
  $platLabel  = ucfirst($platform);
  $sym        = $currency === 'EUR' ? '€' : '$';
  $isActive   = in_array($statusRaw, ['approved','active','accepted']);

  // Owner
  $owner   = $adAccount->user;
  $hasOwner = !is_null($adAccount->user_id);
  $ownerName = $owner ? trim(($owner->first_name ?? '').' '.($owner->last_name ?? '')) : null;
  $ownerInitials = $owner ? strtoupper(substr($owner->first_name ?? '?',0,1).substr($owner->last_name ?? '',0,1)) : '?';
@endphp

<div class="page-body">
  <!-- Back Button -->
  <a href="{{ route('exposcale.ad-accounts') }}" class="back-btn">← Ad Accounts</a>

  <!-- Header card -->
  <div class="adpage-header" style="margin-bottom:14px;">
    <div style="display:flex;align-items:center;gap:14px;flex:1;">
      <div id="adpage-icon" class="adpage-meta-icon">{{ $platIcon }}</div>
      <div>
        <div id="adpage-name" class="adpage-name">{{ $name }}</div>
        <div class="adpage-currency">Currency: <span id="adpage-currency">{{ $currency }}</span></div>
      </div>
    </div>
    <div style="display:flex;align-items:center;gap:22px;">
      <div class="adpage-divider"></div>
      <div>
        <div class="adpage-stat-lbl">Balance</div>
        <div id="adpage-balance" class="adpage-stat-val" style="color:{{ $balance > 0 ? 'var(--gradyn)' : 'var(--muted)' }};">
          {{ $sym }}{{ number_format($balance, 2) }}
        </div>
      </div>
      <div class="adpage-divider"></div>
      <div>
        <div class="adpage-stat-lbl">Status</div>
        <div style="margin-top:4px;"><span id="adpage-status" class="badge {{ $statusCls }}">{{ $statusTxt }}</span></div>
      </div>
      <div class="adpage-divider"></div>
      <div>
        <div class="adpage-stat-lbl">Platform</div>
        <div style="margin-top:4px;"><span id="adpage-plat-badge" class="{{ $provider === 'rockads' ? 'plat-r' : 'plat-g' }}">{{ $platLabel }}</span></div>
      </div>
      <div class="adpage-divider"></div>
      <div>
        <div class="adpage-stat-lbl">Provider</div>
        <div style="margin-top:4px;">
          <span style="font-size:11px;font-weight:700;color:{{ $provider === 'rockads' ? 'var(--rockads)' : 'var(--gradyn)' }};">
            {{ $provider === 'rockads' ? 'Rockads' : 'Gradyn' }}
          </span>
        </div>
      </div>
      <div class="adpage-divider"></div>
      <div>
        <div class="adpage-stat-lbl">Top-ups</div>
        <div class="adpage-stat-count"><span>↑</span><span id="adpage-topup-count">—</span></div>
      </div>
      <div class="adpage-divider"></div>
      <div style="display:flex;gap:7px;">
        <button id="adpage-topup-btn" class="adpage-topup-btn" {{ !$isActive ? 'disabled' : '' }}>↑ Top Up</button>
        <button id="adpage-withdraw-btn" class="adpage-withdraw-btn" {{ !$isActive ? 'disabled' : '' }}>↓ Withdraw</button>
      </div>
    </div>
  </div>

  <!-- Two-column: owner card + history -->
  <div style="display:grid;grid-template-columns:280px 1fr;gap:14px;align-items:start;">
    <!-- Owner + Quick Stats column -->
    <div>
      <!-- Owner card -->
      <div style="background:var(--card);border:1px solid var(--border);border-radius:10px;overflow:hidden;margin-bottom:12px;">
        <div style="padding:11px 14px;border-bottom:1px solid var(--border);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:space-between;">
          Account Owner
          <div>
            <button id="assign-user-btn" onclick="openAssignModal()"
              style="font-size:10px;font-weight:600;padding:3px 9px;border-radius:6px;border:1px solid var(--purple);background:var(--pbg);color:var(--pl);cursor:pointer;">
              {{ $hasOwner ? 'Reassign' : 'Assign User' }}
            </button>
            <button id="remove-user-btn" onclick="removeUser()"
              style="font-size:10px;font-weight:600;padding:3px 9px;border-radius:6px;border:1px solid var(--red);background:var(--card);color:var(--red);cursor:pointer;margin-left:4px;display:{{ $hasOwner ? 'inline-block' : 'none' }};">
              Remove
            </button>
          </div>
        </div>
        <div id="adpage-owner-info" style="padding:12px 14px;display:flex;align-items:flex-start;gap:10px;">
          <div id="adpage-owner-avatar"
            style="width:32px;height:32px;border-radius:50%;background:var(--pbg);border:2px solid var(--purple);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--pl);flex-shrink:0;">
            {{ $ownerInitials }}
          </div>
          <div>
            <div id="adpage-owner-name" style="font-size:12px;font-weight:600;margin-bottom:2px;">
              {{ $hasOwner ? ($ownerName ?: $owner->email) : 'Not assigned' }}
            </div>
            <div id="adpage-owner-email" style="font-size:10px;color:var(--muted);margin-bottom:5px;">
              {{ $hasOwner ? $owner->email : '—' }}
            </div>
          </div>
        </div>
      </div>
      <!-- Quick stats -->
      <div style="background:var(--card);border:1px solid var(--border);border-radius:10px;overflow:hidden;">
        <div style="padding:11px 14px;border-bottom:1px solid var(--border);font-size:11px;font-weight:700;">Quick Stats</div>
        <div style="padding:12px 14px;display:grid;gap:10px;">
          <div>
            <div style="font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:3px;">Total Topped Up</div>
            <div id="qs-total-topup" style="font-size:16px;font-weight:700;color:var(--pl);">—</div>
          </div>
          <div>
            <div style="font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:3px;">Total Withdrawn</div>
            <div id="qs-total-wd" style="font-size:16px;font-weight:700;color:var(--red);">—</div>
          </div>
          <div>
            <div style="font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:3px;">Transactions</div>
            <div id="qs-tx-count" style="font-size:16px;font-weight:700;">—</div>
          </div>
        </div>
      </div>
    </div>

    <!-- Transaction history -->
    <div style="background:var(--card);border:1px solid var(--border);border-radius:10px;overflow:hidden;">
      <div style="display:flex;align-items:center;gap:10px;padding:11px 14px;border-bottom:1px solid var(--border);flex-wrap:wrap;">
        <span style="font-size:12px;font-weight:700;">Transaction History</span>
        <span id="adpage-entry-count" style="font-size:11px;color:var(--muted);background:var(--card2);border:1px solid var(--border);border-radius:20px;padding:2px 8px;">Loading…</span>
        <div style="display:flex;gap:5px;flex-wrap:wrap;">
          <button id="af-all" class="adpage-filter-btn active" onclick="setAdFilter('all',this)">All</button>
          <button class="adpage-filter-btn" onclick="setAdFilter('topup',this)">↑ Top-ups</button>
          <button class="adpage-filter-btn" onclick="setAdFilter('withdrawal',this)">↓ Withdrawals</button>
        </div>
        <div class="adpage-search-wrap" style="margin-left:auto;">
          <svg width="12" height="12" viewBox="0 0 16 16" fill="none" style="position:absolute;left:10px;top:50%;transform:translateY(-50%);pointer-events:none;">
            <circle cx="6.5" cy="6.5" r="4" stroke="#6b7280" stroke-width="1.3"/>
            <path d="M10 10l3 3" stroke="#6b7280" stroke-width="1.3" stroke-linecap="round"/>
          </svg>
          <input class="adpage-search" id="adpage-search" placeholder="Search history…" oninput="filterAdHistory(this.value)"/>
        </div>
        <button onclick="exportAdCSV()" style="background:var(--card2);border:1px solid var(--border);border-radius:6px;padding:5px 11px;font-size:10px;font-weight:600;color:var(--muted2);cursor:pointer;">⬇ CSV</button>
      </div>
      <div style="overflow-x:auto;">
        <table id="adpage-history-table" style="width:100%;">
          <thead>
            <tr>
              <th>Reference</th>
              <th>Amount</th>
              <th>Fee</th>
              <th>Date</th>
              <th>Description</th>
              <th>Type</th>
              <th>Status</th>
            </tr>
          </thead>
          <tbody id="adpage-history-tbody">
            <tr><td colspan="7" style="text-align:center;padding:30px;color:var(--muted);">Loading transactions…</td></tr>
          </tbody>
        </table>
        <div id="adpage-empty" style="display:none;padding:40px;text-align:center;color:var(--muted);font-size:12px;">No transactions found.</div>
      </div>
      <!-- Pagination -->
      <div id="adpage-pagination" style="display:none;justify-content:space-between;align-items:center;padding:12px 20px;border-top:1px solid var(--border);font-size:13px;">
        <div id="adpage-pag-info" style="color:var(--muted);"></div>
        <div id="adpage-pag-controls" style="display:flex;gap:6px;"></div>
      </div>
    </div>
  </div>
</div>

<!-- ── Assign User Modal ──────────────────────────────────────────────────── -->
<div id="assign-modal" style="display:none;position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.5);align-items:center;justify-content:center;">
  <div style="background:var(--card);border:1px solid var(--border);border-radius:12px;width:400px;max-width:96vw;padding:24px;box-shadow:0 20px 60px rgba(0,0,0,.4);">
    <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;">
      <span style="font-size:14px;font-weight:700;" id="assign-modal-title">{{ $hasOwner ? 'Reassign User' : 'Assign User' }}</span>
      <button onclick="closeAssignModal()" style="background:none;border:none;color:var(--muted);font-size:18px;cursor:pointer;line-height:1;">✕</button>
    </div>
    <div style="margin-bottom:16px;">
      <label style="font-size:11px;color:var(--muted);display:block;margin-bottom:6px;">Select User</label>
      <select id="assign-user-select" style="width:100%;padding:9px 12px;background:var(--card2);border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:12px;">
        <option value="">— Select a user —</option>
        @foreach($users as $user)
          <option value="{{ $user->id }}" {{ $hasOwner && $adAccount->user_id == $user->id ? 'selected' : '' }}>
            {{ trim(($user->first_name ?? '').' '.($user->last_name ?? '')) ?: $user->email }} ({{ $user->email }})
          </option>
        @endforeach
      </select>
    </div>
    <div id="assign-modal-error" style="display:none;color:var(--red);font-size:11px;margin-bottom:10px;"></div>
    <div style="display:flex;gap:8px;justify-content:flex-end;">
      <button onclick="closeAssignModal()" style="padding:8px 16px;border:1px solid var(--border);border-radius:8px;background:var(--card2);color:var(--text);font-size:12px;cursor:pointer;">Cancel</button>
      <button id="assign-submit-btn" onclick="submitAssignUser()" style="padding:8px 16px;border:none;border-radius:8px;background:var(--purple);color:#fff;font-size:12px;font-weight:600;cursor:pointer;">
        {{ $hasOwner ? 'Reassign' : 'Assign' }}
      </button>
    </div>
  </div>
</div>
@endsection

@section('page_scripts')
<script>
// ── Server-injected constants ─────────────────────────────────────────────────
const EXTERNAL_ID  = @json($externalId);
const TX_URL       = @json(route('exposcale.ad-account-detail.transactions', $externalId));
const ASSIGN_URL   = @json(route('exposcale.ad-account-detail.assign-user', $externalId));
const CSRF_TOKEN   = @json(csrf_token());
const ACCOUNT_CURRENCY = @json($currency);
const ACCOUNT_PROVIDER = @json($provider);

// State
const TX_PER_PAGE  = 15;
let currentAdFilter = 'all';
let currentTxPage   = 1;
let txLastPage      = 1;
let txTotal         = 0;
let hasOwner        = @json($hasOwner);

// ── Load transactions from backend ───────────────────────────────────────────
function loadTransactions(page) {
  page = page || 1;
  currentTxPage = page;
  const tbody   = document.getElementById('adpage-history-tbody');
  const emptyEl = document.getElementById('adpage-empty');
  tbody.innerHTML = '<tr><td colspan="7" style="text-align:center;padding:30px;color:var(--muted);">Loading…</td></tr>';
  emptyEl.style.display = 'none';
  document.getElementById('adpage-pagination').style.display = 'none';

  const params = new URLSearchParams({
    type:     currentAdFilter,
    page:     page,
    per_page: TX_PER_PAGE,
  });

  fetch(TX_URL + '?' + params.toString(), {
    headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' }
  })
  .then(r => {
    if (!r.ok) throw new Error('HTTP ' + r.status);
    return r.json();
  })
  .then(data => {
    const txs  = data.transactions || [];
    txTotal    = data.total    || 0;
    txLastPage = data.last_page || 1;

    // Update topup count stat
    document.getElementById('adpage-topup-count').textContent = txTotal;

    renderTransactions(txs);
    updateQuickStats(txs);
    renderTxPagination();
  })
  .catch(err => {
    console.error('Transactions fetch error:', err);
    tbody.innerHTML = '<tr><td colspan="7" style="text-align:center;padding:30px;color:var(--red);">Failed to load transactions. Check console for details.</td></tr>';
    document.getElementById('adpage-entry-count').textContent = 'Error';
  });
}

function updateQuickStats(txs) {
  const sym   = ACCOUNT_CURRENCY === 'EUR' ? '€' : '$';
  const topupTotal = txs.filter(t => t.type === 'topup').reduce((s, t) => s + Math.abs(t.amount || 0), 0);
  const wdTotal    = txs.filter(t => t.type === 'withdrawal').reduce((s, t) => s + Math.abs(t.amount || 0), 0);
  document.getElementById('qs-total-topup').textContent = sym + topupTotal.toLocaleString('de-DE', {minimumFractionDigits:2, maximumFractionDigits:2});
  document.getElementById('qs-total-wd').textContent    = wdTotal > 0 ? sym + wdTotal.toLocaleString('de-DE', {minimumFractionDigits:2, maximumFractionDigits:2}) : '—';
  document.getElementById('qs-tx-count').textContent    = txTotal;
}

function renderTransactions(txList) {
  const tbody   = document.getElementById('adpage-history-tbody');
  const emptyEl = document.getElementById('adpage-empty');
  const countEl = document.getElementById('adpage-entry-count');

  if (!txList || txList.length === 0) {
    tbody.innerHTML = '';
    emptyEl.style.display = 'block';
    countEl.textContent = '0 entries';
    return;
  }

  emptyEl.style.display = 'none';
  countEl.textContent = txTotal + ' entr' + (txTotal === 1 ? 'y' : 'ies');

  const typeMap = {
    topup:      {label:'Top-up',     cls:'tx-type-topup',     icon:'↑'},
    withdrawal: {label:'Withdrawal', cls:'tx-type-withdrawal', icon:'↓'},
    transfer:   {label:'Transfer',   cls:'tx-type-transfer',   icon:'↔'},
  };
  const statusMap = {
    approved:   '<span class="tx-status-done">✓ Approved</span>',
    processing: '<span class="tx-status-pending">⏳ Processing</span>',
    disabled:   '<span class="tx-status-reversed">✗ Disabled</span>',
  };

  tbody.innerHTML = txList.map(tx => {
    const t      = typeMap[tx.type] || {label: tx.type, cls: '', icon: '·'};
    const sym    = (tx.currency || 'EUR') === 'USD' ? '$' : '€';
    const absAmt = Math.abs(tx.amount || 0);
    const amtStr = (tx.type === 'topup' ? '+' : '-') + sym + absAmt.toFixed(2);
    const amtColor = tx.type === 'topup' ? 'color:var(--green);font-weight:700;' : 'color:var(--red);font-weight:700;';
    const fee    = tx.commission || 0;
    const feeStr = fee > 0 ? '-' + sym + fee.toFixed(2) : '—';
    const feeColor = fee > 0 ? 'color:var(--red);' : 'color:var(--muted);';
    const status = statusMap[tx.status] || `<span>${tx.status || '—'}</span>`;

    return `<tr data-type="${tx.type}" data-ref="${tx.reference}">
      <td style="font-family:monospace;font-size:10px;color:var(--pl);">${tx.reference}</td>
      <td style="${amtColor}">${amtStr}</td>
      <td style="${feeColor}">${feeStr}</td>
      <td style="color:var(--muted2);">${tx.tx_date}</td>
      <td style="font-size:11px;color:var(--muted);">${tx.description}</td>
      <td><span class="tx-type-badge ${t.cls}">${t.icon} ${t.label}</span></td>
      <td>${status}</td>
    </tr>`;
  }).join('');
}

function renderTxPagination() {
  const wrap     = document.getElementById('adpage-pagination');
  const info     = document.getElementById('adpage-pag-info');
  const controls = document.getElementById('adpage-pag-controls');

  if (txLastPage <= 1 && txTotal <= TX_PER_PAGE) { wrap.style.display = 'none'; return; }
  wrap.style.display = 'flex';

  const from = txTotal === 0 ? 0 : (currentTxPage - 1) * TX_PER_PAGE + 1;
  const to   = Math.min(currentTxPage * TX_PER_PAGE, txTotal);
  info.innerHTML = `Showing <strong>${from}</strong>–<strong>${to}</strong> of <strong>${txTotal}</strong> entries`;

  const base     = 'padding:5px 11px;border:1px solid var(--border);border-radius:6px;font-size:12px;font-weight:500;cursor:pointer;background:var(--card2);color:var(--text);';
  const active   = 'padding:5px 11px;border:1px solid var(--blue);border-radius:6px;font-size:12px;font-weight:600;background:var(--blue);color:#fff;';
  const disabled = 'padding:5px 11px;border:1px solid var(--border);border-radius:6px;font-size:12px;color:var(--muted);opacity:.5;cursor:not-allowed;background:var(--card2);';

  let html = currentTxPage > 1
    ? `<button style="${base}" onclick="loadTransactions(${currentTxPage - 1})">« Prev</button>`
    : `<span style="${disabled}">« Prev</span>`;

  for (let i = 1; i <= txLastPage; i++) {
    if (i === currentTxPage)
      html += `<span style="${active}">${i}</span>`;
    else if (i === 1 || i === txLastPage || Math.abs(i - currentTxPage) <= 1)
      html += `<button style="${base}" onclick="loadTransactions(${i})">${i}</button>`;
    else if (i === 2 || i === txLastPage - 1)
      html += `<span style="padding:5px 6px;color:var(--muted);font-size:12px;">…</span>`;
  }

  html += currentTxPage < txLastPage
    ? `<button style="${base}" onclick="loadTransactions(${currentTxPage + 1})">Next »</button>`
    : `<span style="${disabled}">Next »</span>`;

  controls.innerHTML = html;
}

// ── Filter / search ───────────────────────────────────────────────────────────
function setAdFilter(type, btn) {
  currentAdFilter = type;
  document.querySelectorAll('.adpage-filter-btn').forEach(b => b.classList.remove('active'));
  btn.classList.add('active');
  document.getElementById('adpage-search').value = '';
  loadTransactions(1);
}

function filterAdHistory(q) {
  const ql = q.toLowerCase().trim();
  document.querySelectorAll('#adpage-history-tbody tr[data-ref]').forEach(r => {
    r.style.display = (!ql || r.textContent.toLowerCase().includes(ql)) ? '' : 'none';
  });
}

// ── CSV export ────────────────────────────────────────────────────────────────
function exportAdCSV() {
  const rows = Array.from(document.querySelectorAll('#adpage-history-tbody tr[data-ref]'))
    .filter(r => r.style.display !== 'none')
    .map(r => Array.from(r.querySelectorAll('td')).map(c => '"' + c.textContent.trim().replace(/"/g,'""') + '"').join(','));
  const header = '"Reference","Amount","Fee","Date","Description","Type","Status"';
  const csv    = [header, ...rows].join('\n');
  const blob   = new Blob([csv], {type:'text/csv'});
  const a      = document.createElement('a');
  a.href       = URL.createObjectURL(blob);
  a.download   = EXTERNAL_ID + '-history.csv';
  a.click();
}

// ── Assign User Modal ─────────────────────────────────────────────────────────
function openAssignModal() {
  document.getElementById('assign-modal-title').textContent  = hasOwner ? 'Reassign User' : 'Assign User';
  document.getElementById('assign-submit-btn').textContent   = hasOwner ? 'Reassign' : 'Assign';
  document.getElementById('assign-modal-error').style.display = 'none';
  document.getElementById('assign-modal').style.display = 'flex';
}

function closeAssignModal() {
  document.getElementById('assign-modal').style.display = 'none';
}

function submitAssignUser() {
  const userId = document.getElementById('assign-user-select').value;
  const errEl  = document.getElementById('assign-modal-error');
  errEl.style.display = 'none';

  if (!userId) {
    errEl.textContent   = 'Please select a user.';
    errEl.style.display = 'block';
    return;
  }

  const btn        = document.getElementById('assign-submit-btn');
  btn.disabled     = true;
  btn.textContent  = 'Saving…';

  fetch(ASSIGN_URL, {
    method: 'POST',
    headers: {
      'Content-Type':     'application/json',
      'X-CSRF-TOKEN':     CSRF_TOKEN,
      'Accept':           'application/json',
      'X-Requested-With': 'XMLHttpRequest',
    },
    body: JSON.stringify({user_id: parseInt(userId)}),
  })
  .then(r => {
    if (!r.ok) throw new Error('HTTP ' + r.status);
    return r.json();
  })
  .then(data => {
    if (data.success) {
      hasOwner = data.has_owner;
      const o  = data.owner;
      if (o) {
        document.getElementById('adpage-owner-avatar').textContent = o.initials || '?';
        document.getElementById('adpage-owner-name').textContent   = o.name  || '—';
        document.getElementById('adpage-owner-email').textContent  = o.email || '—';
      }
      document.getElementById('assign-user-btn').textContent = hasOwner ? 'Reassign' : 'Assign User';
      const removeBtn = document.getElementById('remove-user-btn');
      if (removeBtn) removeBtn.style.display = hasOwner ? 'inline-block' : 'none';
      closeAssignModal();
      showToast('✅ ' + (data.message || 'User assigned.'), '#10b981');
    } else {
      errEl.textContent   = data.error || data.message || 'Failed to assign user.';
      errEl.style.display = 'block';
    }
  })
  .catch(err => {
    errEl.textContent   = 'An error occurred. Please try again.';
    errEl.style.display = 'block';
    console.error(err);
  })
  .finally(() => {
    btn.disabled    = false;
    btn.textContent = hasOwner ? 'Reassign' : 'Assign';
  });
}



function removeUser() {
  if (!confirm('Are you sure you want to remove the assigned user?')) return;
  
  const btn = document.getElementById('remove-user-btn');
  if (btn) btn.disabled = true;

  fetch(ASSIGN_URL, {
    method: 'POST',
    headers: {
      'Content-Type':     'application/json',
      'X-CSRF-TOKEN':     CSRF_TOKEN,
      'Accept':           'application/json',
      'X-Requested-With': 'XMLHttpRequest',
    },
    body: JSON.stringify({user_id: null}),
  })
  .then(r => {
    if (!r.ok) throw new Error('HTTP ' + r.status);
    return r.json();
  })
  .then(data => {
    if (data.success) {
      hasOwner = data.has_owner;
      document.getElementById('adpage-owner-avatar').textContent = '?';
      document.getElementById('adpage-owner-name').textContent   = 'Not assigned';
      document.getElementById('adpage-owner-email').textContent  = '—';
      
      document.getElementById('assign-user-btn').textContent = 'Assign User';
      if (btn) btn.style.display = 'none';
      showToast('✅ ' + (data.message || 'User removed successfully.'), '#10b981');
    } else {
      alert(data.error || data.message || 'Failed to remove user.');
    }
  })
  .catch(err => {
    alert('An error occurred. Please try again.');
    console.error(err);
  })
  .finally(() => {
    if (btn) btn.disabled = false;
  });
}

// Close assign modal on backdrop click
document.getElementById('assign-modal').addEventListener('click', function(e) {
  if (e.target === this) closeAssignModal();
});

// ── Modals wiring ─────────────────────────────────────────────────────────────
document.getElementById('adpage-topup-btn').addEventListener('click', function() {
  _tuData = {
    id: EXTERNAL_ID,
    name: document.getElementById('adpage-name').textContent,
    currency: ACCOUNT_CURRENCY,
    plat: ACCOUNT_PROVIDER === 'rockads' ? 'Rockads' : 'Gradyn',
    platLabel: document.getElementById('adpage-plat-badge').textContent,
    balance: document.getElementById('adpage-balance').textContent,
    clientFee: 4.0,
    owner: null
  };
  const d = _tuData;
  document.getElementById('tu-acct-name').textContent = d.name;
  document.getElementById('tu-currency').textContent = d.currency;
  document.getElementById('tu-platform').textContent = d.plat + ' · ' + d.platLabel;
  document.getElementById('tu-amount').placeholder = 'Amount (' + d.currency + ')';
  document.getElementById('tu-amount').value = '';
  const clientBalEl = document.getElementById('tu-client-balance');
  if (clientBalEl) clientBalEl.textContent = '—';
  const acctBalEl = document.getElementById('tu-acct-balance');
  if (acctBalEl) acctBalEl.textContent = d.balance || '—';
  updateTopUpCalc();
  document.getElementById('topup-modal').classList.add('open');
});

document.getElementById('adpage-withdraw-btn').addEventListener('click', function() {
  _wdData = {
    id: EXTERNAL_ID,
    name: document.getElementById('adpage-name').textContent,
    currency: ACCOUNT_CURRENCY,
    plat: ACCOUNT_PROVIDER === 'rockads' ? 'Rockads' : 'Gradyn',
    platLabel: document.getElementById('adpage-plat-badge').textContent,
    balance: document.getElementById('adpage-balance').textContent,
    clientFee: 4.0,
    owner: null
  };
  const d = _wdData;
  document.getElementById('wd-acct-name').textContent = d.name;
  document.getElementById('wd-balance').textContent = d.balance;
  document.getElementById('wd-currency').textContent = d.currency;
  document.getElementById('wd-amount').placeholder = 'Amount (' + d.currency + ')';
  document.getElementById('wd-amount').value = '';
  const clientBalEl = document.getElementById('wd-client-balance');
  if (clientBalEl) clientBalEl.textContent = '—';
  updateWdCalc();
  document.getElementById('withdraw-modal').classList.add('open');
});

// ── Init ──────────────────────────────────────────────────────────────────────
loadTransactions(1);
</script>
@endsection