{% extends "base.html" %}

{% block title %}Accounts — Friday Budgeting Pro{% endblock %}

{% block content %}
<div class="card">
  <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:1.25rem">
    <h1 style="margin:0">Accounts</h1>
    <a href="/link/start" class="btn btn-primary">+ Connect a bank</a>
  </div>

  {% if not grouped_accounts %}
  <p class="hint">No bank accounts connected yet. <a href="/link/start">Connect a bank</a> to get started.</p>
  {% else %}
  {% for institution, data in grouped_accounts.items() %}
  <section class="institution-group" style="margin-bottom:2rem">
    <div class="institution-header" style="display:flex;justify-content:space-between;align-items:center;border-bottom:2px solid #e2e8f0;padding-bottom:0.5rem;margin-bottom:0.75rem">
      <h2 style="margin:0;font-size:1.1rem;font-weight:600">── {{ institution }}</h2>
      <form method="post" action="/profile" style="display:inline;margin:0">
        <input type="hidden" name="action" value="disconnect_bank">
        <input type="hidden" name="bank_id" value="{{ data.connection_id }}">
        <button type="submit" class="btn btn-sm btn-danger"
          onclick="return confirm('Disconnect {{ institution }}? This will remove all linked accounts.')">
          Disconnect
        </button>
      </form>
    </div>
    <table style="width:100%;border-collapse:collapse">
      <thead>
        <tr style="text-align:left;color:#64748b;font-size:0.8rem;text-transform:uppercase;letter-spacing:0.04em">
          <th style="padding:0.35rem 0.6rem">Account</th>
          <th style="padding:0.35rem 0.6rem">Type</th>
          <th style="padding:0.35rem 0.6rem;text-align:right">Balance</th>
          <th style="padding:0.35rem 0.6rem"></th>
        </tr>
      </thead>
      <tbody>
        {% for acct in data.accounts %}
        <tr style="border-top:1px solid #f1f5f9" data-account-id="{{ acct.id }}">
          <td style="padding:0.55rem 0.6rem">
            <span class="acct-name" data-original="{{ acct.name or '' }}">{{ acct.name or '(unnamed)' }}</span>
            {% if acct.mask %}
            <span style="color:#94a3b8;font-size:0.78rem"> ···{{ acct.mask }}</span>
            {% endif %}
          </td>
          <td style="padding:0.55rem 0.6rem;color:#64748b;font-size:0.875rem">
            {{ acct.subtype or acct.type or '—' }}
          </td>
          <td style="padding:0.55rem 0.6rem;text-align:right;font-weight:600;font-variant-numeric:tabular-nums">
            {% set balance = acct.balance_current if acct.balance_current is not none else acct.balance_available %}
            {% if balance is not none %}
              {% set currency = acct.currency or 'CAD' %}
              {# Credit cards: Plaid returns amount owed as positive — negate for display #}
              {% set display_balance = -balance if acct.type == 'credit' else balance %}
              {% if currency == 'CAD' %}C$
              {% elif currency == 'USD' %}US$
              {% elif currency == 'GBP' %}£
              {% elif currency == 'EUR' %}€
              {% else %}{{ currency }} {% endif %}{{ "%.2f"|format(display_balance) }}
            {% else %}
              <span style="color:#94a3b8">—</span>
            {% endif %}
          </td>
          <td style="padding:0.55rem 0.6rem;text-align:right">
            <button class="btn btn-sm btn-secondary rename-btn" data-id="{{ acct.id }}">rename</button>
            <button class="btn btn-sm btn-secondary txn-toggle-btn" data-id="{{ acct.id }}" style="margin-left:0.25rem">transactions</button>
          </td>
        </tr>
        <tr class="txn-expand-row" id="txn-expand-{{ acct.id }}" style="display:none">
          <td colspan="4" style="padding:0;background:#f8fafc;border-top:1px solid #e2e8f0">
            <div id="txn-content-{{ acct.id }}" style="padding:0.5rem 1rem 0.75rem">
              <span style="color:#94a3b8;font-size:0.85rem">Loading…</span>
            </div>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </section>
  {% endfor %}
  {% endif %}
</div>

<style>
.btn {
  display: inline-block;
  padding: 0.35rem 0.8rem;
  border-radius: 5px;
  border: none;
  cursor: pointer;
  font-size: 0.875rem;
  text-decoration: none;
  transition: background 0.15s;
}
.btn-primary { background: #3b82f6; color: #fff; }
.btn-primary:hover { background: #2563eb; }
.btn-secondary { background: #e2e8f0; color: #475569; }
.btn-secondary:hover { background: #cbd5e1; }
.btn-danger { background: #fee2e2; color: #dc2626; border: 1px solid #fca5a5; }
.btn-danger:hover { background: #fecaca; }
.btn-sm { padding: 0.2rem 0.5rem; font-size: 0.8rem; }
.rename-input {
  font-size: 0.93rem;
  padding: 0.2rem 0.4rem;
  border: 1px solid #60a5fa;
  border-radius: 3px;
  width: 15rem;
  outline: none;
}
.rename-input:focus { box-shadow: 0 0 0 2px #bfdbfe; }
</style>

<script>
// ── Transaction list toggle ──────────────────────────────────────────────
const TXN_ENTRY_COLORS = {
  transfer: { bg: '#eff6ff', fg: '#2563eb', border: '#93c5fd' },
  spending:  { bg: '#fff1f2', fg: '#dc2626', border: '#fca5a5' },
  income:    { bg: '#f0fdf4', fg: '#16a34a', border: '#86efac' },
  savings:   { bg: '#fffbeb', fg: '#d97706', border: '#fcd34d' },
  skip:      { bg: '#f8fafc', fg: '#94a3b8', border: '#e2e8f0' },
};

function escHtml(s) {
  return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
}

function buildTxnTable(txns) {
  if (!txns || txns.length === 0) {
    return '<p style="color:#94a3b8;margin:0.25rem 0;font-size:0.85rem">No transactions found for this account.</p>';
  }
  let rows = txns.map(t => {
    const isPending = !!t.pending;
    const et  = !isPending ? (t.entry_type || null) : null;
    const clr = et ? (TXN_ENTRY_COLORS[et] || { bg:'#f8fafc', fg:'#64748b', border:'#e2e8f0' }) : null;
    const badge = isPending
      ? '<span style="background:#fefce8;color:#ca8a04;border:1px solid #fde047;padding:0.1rem 0.45rem;border-radius:3px;font-size:0.75rem;font-weight:700;letter-spacing:0.02em">Pending</span>'
      : et
        ? `<span style="background:${clr.bg};color:${clr.fg};border:1px solid ${clr.border};padding:0.1rem 0.45rem;border-radius:3px;font-size:0.75rem;font-weight:700;letter-spacing:0.02em">${et.charAt(0).toUpperCase()+et.slice(1)}</span>${t.uncertain ? ' <span title="Uncertain classification" style="color:#f59e0b">&#9888;</span>' : ''}`
        : '<span style="color:#94a3b8;font-size:0.8rem">—</span>';
    const currency = t.currency || 'CAD';
    const prefix   = currency === 'CAD' ? 'C$' : currency === 'USD' ? 'US$' : currency === 'GBP' ? '\u00a3' : currency === 'EUR' ? '\u20ac' : currency + '\u00a0';
    const amt      = t.amount;
    const amtStr   = prefix + Math.abs(amt).toFixed(2);
    const amtColor = amt < 0 ? '#16a34a' : (isPending ? '#94a3b8' : '#64748b');
    const sign     = amt < 0 ? '+' : '\u2212';
    const category = isPending
      ? '<span style="color:#94a3b8;font-size:0.8rem;font-style:italic">Pending — not yet categorized</span>'
      : t.line_item_name ? escHtml((t.ledger_name ? t.ledger_name + ' · ' : '') + t.line_item_name) : '<span style="color:#94a3b8">—</span>';
    const rowStyle = isPending ? 'border-top:1px solid #f1f5f9;background:#fefce8;opacity:0.9' : 'border-top:1px solid #f1f5f9';
    return `<tr style="${rowStyle}">
      <td style="padding:0.3rem 0.5rem;color:#64748b;white-space:nowrap;font-size:0.82rem" title="${escHtml(t.authorized_datetime||t.date||'')}">${(()=>{ if(t.authorized_datetime){ const d=new Date(t.authorized_datetime); if(!isNaN(d)){return escHtml(d.toLocaleDateString('en-CA')+' '+d.toLocaleTimeString('en-CA',{hour:'2-digit',minute:'2-digit'}));} } return escHtml(t.date||''); })()}</td>
      <td style="padding:0.3rem 0.5rem;font-size:0.85rem${isPending ? ';color:#78716c' : ''}">${escHtml(t.merchant||'(unknown)')}</td>
      <td style="padding:0.3rem 0.5rem;text-align:right;font-weight:600;color:${amtColor};white-space:nowrap;font-size:0.85rem;font-variant-numeric:tabular-nums">${sign}${amtStr}</td>
      <td style="padding:0.3rem 0.5rem">${badge}</td>
      <td style="padding:0.3rem 0.5rem;color:#94a3b8;font-size:0.8rem">${category}</td>
    </tr>`;
  }).join('');
  return `<table style="width:100%;border-collapse:collapse">
    <thead><tr style="color:#94a3b8;font-size:0.75rem;text-transform:uppercase;letter-spacing:0.04em">
      <th style="padding:0.3rem 0.5rem;text-align:left">Date</th>
      <th style="padding:0.3rem 0.5rem;text-align:left">Merchant</th>
      <th style="padding:0.3rem 0.5rem;text-align:right">Amount</th>
      <th style="padding:0.3rem 0.5rem;text-align:left">Type</th>
      <th style="padding:0.3rem 0.5rem;text-align:left">Category</th>
    </tr></thead>
    <tbody>${rows}</tbody>
  </table>`;
}

document.querySelectorAll('.txn-toggle-btn').forEach(btn => {
  let loaded = false;
  btn.addEventListener('click', async function() {
    const id      = btn.dataset.id;
    const expRow  = document.getElementById('txn-expand-' + id);
    const content = document.getElementById('txn-content-' + id);
    if (expRow.style.display !== 'none') {
      expRow.style.display = 'none';
      btn.textContent = 'transactions';
      return;
    }
    expRow.style.display = '';
    btn.textContent = 'hide';
    if (loaded) return;
    try {
      const resp = await fetch('/accounts/' + id + '/transactions');
      const data = await resp.json();
      content.innerHTML = buildTxnTable(data.transactions || []);
      loaded = true;
    } catch(e) {
      content.innerHTML = '<p style="color:#dc2626;font-size:0.85rem;margin:0.25rem 0">Failed to load transactions.</p>';
    }
  });
});

// ── Rename ───────────────────────────────────────────────────────────────
document.querySelectorAll('.rename-btn').forEach(btn => {
  btn.addEventListener('click', function handleRename() {
    const id = btn.dataset.id;
    const row = btn.closest('tr');
    const nameSpan = row.querySelector('.acct-name');
    const currentName = nameSpan.dataset.original || nameSpan.textContent.trim();

    // Already in edit mode? cancel.
    if (btn.dataset.editing === '1') {
      return;
    }

    const input = document.createElement('input');
    input.type = 'text';
    input.value = currentName;
    input.className = 'rename-input';
    input.setAttribute('aria-label', 'Account name');

    nameSpan.replaceWith(input);
    btn.textContent = 'cancel';
    btn.dataset.editing = '1';
    input.focus();
    input.select();

    let saved = false;

    const restore = (newName) => {
      if (saved) return;
      saved = true;
      nameSpan.textContent = newName || currentName;
      nameSpan.dataset.original = newName || currentName;
      input.replaceWith(nameSpan);
      btn.textContent = 'rename';
      delete btn.dataset.editing;
    };

    const save = async () => {
      const newName = input.value.trim();
      if (!newName || newName === currentName) {
        restore(currentName);
        return;
      }
      try {
        const resp = await fetch(`/accounts/${id}/name`, {
          method: 'PATCH',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ name: newName })
        });
        if (resp.ok) {
          restore(newName);
        } else {
          restore(currentName);
        }
      } catch (e) {
        restore(currentName);
      }
    };

    input.addEventListener('keydown', e => {
      if (e.key === 'Enter') { e.preventDefault(); save(); }
      if (e.key === 'Escape') { restore(currentName); }
    });
    input.addEventListener('blur', () => { if (!saved) save(); });

    // Cancel button click
    btn.addEventListener('click', () => {
      if (btn.dataset.editing === '1') {
        saved = true;
        input.replaceWith(nameSpan);
        btn.textContent = 'rename';
        delete btn.dataset.editing;
      }
    }, { once: true });
  });
});
</script>
{% endblock %}