{% extends "base.html" %}

{% block title %}Contracts{% endblock %}

{% block content %}
<!-- Page Header -->
<div class="page-header flex items-center justify-between">
  <div>
    <h1>Contracts</h1>
    <p>Manage the smart contracts you want to monitor</p>
  </div>
  <div class="flex items-center gap-3">
    <span class="badge badge-info" id="contract-count-badge">0 contracts</span>
    <button type="button" class="btn btn-primary" id="toggle-add-form">
      <span>+</span>
      <span>Add Contract</span>
    </button>
  </div>
</div>

<!-- Add Contract Form -->
<div class="card mb-4" id="add-contract-card" style="display: none;">
  <div class="card-header">
    <h3>Add New Contract</h3>
  </div>
  <div class="card-body">
    <form id="add-contract-form">
      <div class="settings-grid two-col">
        <div class="form-group">
          <label class="form-label" for="contract-address">Contract Address *</label>
          <input type="text" id="contract-address" class="form-input font-mono" placeholder="0x..." autocomplete="off">
          <div class="form-hint">Ethereum address starting with 0x (42 characters)</div>
          <div class="form-error" id="address-error" style="display: none;"></div>
        </div>

        <div class="form-group">
          <label class="form-label" for="contract-label">Label</label>
          <input type="text" id="contract-label" class="form-input" placeholder="e.g., USDT Token" autocomplete="off">
          <div class="form-hint">Optional display name for this contract</div>
        </div>
      </div>

      <div class="settings-grid two-col">
        <div class="form-group">
          <label class="form-label" for="contract-chain">Chain</label>
          <select id="contract-chain" class="form-select">
            <option value="ethereum">Ethereum</option>
            <option value="polygon">Polygon</option>
            <option value="bsc">BSC</option>
            <option value="arbitrum">Arbitrum</option>
            <option value="base">Base</option>
          </select>
        </div>

        <div class="form-group">
          <label class="form-label">Event Types</label>
          <div class="flex gap-4 mt-2" style="flex-wrap: wrap;">
            <label class="toggle-switch">
              <input type="checkbox" id="event-transfer" checked>
              <span class="toggle-slider"></span>
              <span class="toggle-label">Transfer</span>
            </label>
            <label class="toggle-switch">
              <input type="checkbox" id="event-approval" checked>
              <span class="toggle-slider"></span>
              <span class="toggle-label">Approval</span>
            </label>
            <label class="toggle-switch">
              <input type="checkbox" id="event-ownership" checked>
              <span class="toggle-slider"></span>
              <span class="toggle-label">OwnershipTransferred</span>
            </label>
          </div>
        </div>
      </div>

      <div class="flex justify-between items-center mt-4">
        <button type="button" class="btn btn-ghost" id="cancel-add-form">Cancel</button>
        <button type="submit" class="btn btn-primary">Add Contract</button>
      </div>
    </form>
  </div>
</div>

<!-- Contract List -->
<div class="card" id="contracts-list-card">
  <div class="card-header">
    <h3>Monitored Contracts</h3>
  </div>
  <div class="card-body" style="padding: 0;">
    <div class="data-table-responsive contract-table-responsive">
      <table class="data-table contract-table" id="contracts-table">
        <thead>
          <tr>
            <th class="col-label sortable" data-sort="label">Label</th>
            <th class="col-address">Address</th>
            <th class="col-chain sortable" data-sort="chain">Chain</th>
            <th class="col-events">Events</th>
            <th class="col-actions">Actions</th>
          </tr>
        </thead>
        <tbody id="contracts-tbody">
          <!-- Populated by JS -->
        </tbody>
      </table>
    </div>

    <!-- Empty State -->
    <div class="empty-state" id="contracts-empty" style="display: none;">
      <div class="empty-state-icon">&#11041;</div>
      <div class="empty-state-title">No contracts monitored yet</div>
      <div class="empty-state-desc">Add your first smart contract to start monitoring</div>
      <button type="button" class="btn btn-primary btn-lg mt-4" id="empty-add-btn">
        <span>+</span>
        <span>Add Contract</span>
      </button>
    </div>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script>
(function () {
  'use strict';

  const SS = window.ScarpShield;
  if (!SS) {
    console.error('[Contracts] ScarpShield core not loaded');
    return;
  }

  // ── Chain color mapping ──
  const CHAIN_COLORS = {
    ethereum: '#627EEA',
    polygon: '#8247E5',
    bsc: '#F3BA2F',
    arbitrum: '#28A0F0',
    base: '#0052FF'
  };

  const CHAIN_BG = {
    ethereum: 'rgba(98, 126, 234, 0.12)',
    polygon: 'rgba(130, 71, 229, 0.12)',
    bsc: 'rgba(243, 186, 47, 0.12)',
    arbitrum: 'rgba(40, 160, 240, 0.12)',
    base: 'rgba(0, 82, 255, 0.12)'
  };

  // ── DOM refs ──
  const addCard = document.getElementById('add-contract-card');
  const toggleAddBtn = document.getElementById('toggle-add-form');
  const cancelAddBtn = document.getElementById('cancel-add-form');
  const emptyAddBtn = document.getElementById('empty-add-btn');
  const addForm = document.getElementById('add-contract-form');
  const addressInput = document.getElementById('contract-address');
  const addressError = document.getElementById('address-error');
  const tbody = document.getElementById('contracts-tbody');
  const emptyState = document.getElementById('contracts-empty');
  const listCard = document.getElementById('contracts-list-card');
  const countBadge = document.getElementById('contract-count-badge');
  const table = document.getElementById('contracts-table');

  let contractsData = [];
  let sortKey = null;
  let sortAsc = true;

  // ── Helpers ──
  function isValidAddress(addr) {
    return typeof addr === 'string' &&
           addr.startsWith('0x') &&
           addr.length === 42 &&
           /^0x[0-9a-fA-F]{40}$/.test(addr);
  }

  function getChainStyle(chain) {
    const key = (chain || 'ethereum').toLowerCase();
    const color = CHAIN_COLORS[key] || CHAIN_COLORS.ethereum;
    const bg = CHAIN_BG[key] || CHAIN_BG.ethereum;
    return `background: ${bg}; color: ${color}; border-color: ${color}33;`;
  }

  function renderEventBadges(events) {
    if (!Array.isArray(events) || events.length === 0) {
      return '<span class="badge badge-info">All</span>';
    }
    return events.map(ev => {
      const label = ev === 'OwnershipTransferred' ? 'Ownership' : ev;
      return `<span class="badge badge-info">${SS.escapeHtml(label)}</span>`;
    }).join('');
  }

  function renderContracts() {
    let data = [...contractsData];

    if (sortKey) {
      data.sort((a, b) => {
        let av = (a[sortKey] || '').toLowerCase();
        let bv = (b[sortKey] || '').toLowerCase();
        if (av < bv) return sortAsc ? -1 : 1;
        if (av > bv) return sortAsc ? 1 : -1;
        return 0;
      });
    }

    if (data.length === 0) {
      tbody.innerHTML = '';
      emptyState.style.display = '';
      table.style.display = 'none';
      countBadge.textContent = '0 contracts';
      return;
    }

    emptyState.style.display = 'none';
    table.style.display = '';
    countBadge.textContent = `${data.length} contract${data.length !== 1 ? 's' : ''}`;

    tbody.innerHTML = data.map(c => {
      const addr = c.address || '';
      const label = c.label || addr.slice(0, 10);
      const chain = c.chain || 'ethereum';
      const events = c.events || [];
      const chainDisplay = SS.formatChain(chain);
      const chainStyle = getChainStyle(chain);

      return `
        <tr data-address="${SS.escapeHtml(addr)}">
          <td class="col-label">
            <strong>${SS.escapeHtml(label)}</strong>
          </td>
          <td class="col-address">
            <span class="font-mono address-copy" title="Click to copy" data-address="${SS.escapeHtml(addr)}" style="cursor: pointer;">
              ${SS.truncateAddress(addr)}
              <span style="opacity: 0.6; margin-left: 4px;">&#128203;</span>
            </span>
          </td>
          <td class="col-chain">
            <span class="badge" style="${chainStyle}">${chainDisplay}</span>
          </td>
          <td class="col-events">${renderEventBadges(events)}</td>
          <td class="col-actions">
            <button type="button" class="btn btn-danger btn-sm remove-btn" data-address="${SS.escapeHtml(addr)}" data-label="${SS.escapeHtml(label)}">
              Remove
            </button>
          </td>
        </tr>
      `;
    }).join('');

    // Attach copy listeners
    tbody.querySelectorAll('.address-copy').forEach(el => {
      el.addEventListener('click', () => {
        const fullAddr = el.dataset.address;
        navigator.clipboard.writeText(fullAddr).then(() => {
          SS.showToast('Address copied', 'success');
        }).catch(() => {
          SS.showToast('Failed to copy address', 'error');
        });
      });
    });

    // Attach remove listeners
    tbody.querySelectorAll('.remove-btn').forEach(btn => {
      btn.addEventListener('click', () => handleRemove(btn.dataset.address, btn.dataset.label));
    });
  }

  async function loadContracts() {
    try {
      const data = await SS.api('GET', '/api/contracts');
      contractsData = Array.isArray(data) ? data : [];
      renderContracts();
    } catch (err) {
      SS.showToast('Failed to load contracts', 'error');
      console.error('[Contracts] Load error:', err);
    }
  }

  // ── Form handling ──
  function showAddForm() {
    addCard.style.display = '';
    addCard.classList.add('animate-fade-in');
    addressInput.focus();
  }

  function hideAddForm() {
    addCard.style.display = 'none';
    addForm.reset();
    addressError.style.display = 'none';
    addressInput.classList.remove('form-error');
  }

  toggleAddBtn.addEventListener('click', () => {
    if (addCard.style.display === 'none') showAddForm();
    else hideAddForm();
  });

  cancelAddBtn.addEventListener('click', hideAddForm);
  emptyAddBtn?.addEventListener('click', showAddForm);

  addForm.addEventListener('submit', async (e) => {
    e.preventDefault();
    addressError.style.display = 'none';

    const address = addressInput.value.trim();
    const label = document.getElementById('contract-label').value.trim();
    const chain = document.getElementById('contract-chain').value;

    const events = [];
    if (document.getElementById('event-transfer').checked) events.push('Transfer');
    if (document.getElementById('event-approval').checked) events.push('Approval');
    if (document.getElementById('event-ownership').checked) events.push('OwnershipTransferred');

    if (!isValidAddress(address)) {
      addressError.textContent = 'Please enter a valid Ethereum address (0x followed by 40 hex characters).';
      addressError.style.display = '';
      return;
    }

    // Check duplicate
    if (contractsData.some(c => c.address.toLowerCase() === address.toLowerCase())) {
      addressError.textContent = 'This contract address is already being monitored.';
      addressError.style.display = '';
      return;
    }

    try {
      await SS.api('POST', '/api/contracts', {
        address: address,
        label: label || address.slice(0, 10),
        chain: chain,
        events: events
      });

      SS.showToast('Contract added successfully', 'success');
      hideAddForm();
      await loadContracts();
    } catch (err) {
      SS.showToast(err.data?.error || 'Failed to add contract', 'error');
    }
  });

  // ── Remove handling ──
  async function handleRemove(address, label) {
    const confirmed = await SS.showModal({
      title: 'Remove Contract',
      body: `
        <p>Are you sure you want to remove <strong>${SS.escapeHtml(label || address)}</strong>?</p>
        <p class="text-muted mt-2">Address: <span class="font-mono">${SS.escapeHtml(address)}</span></p>
        <p class="text-danger mt-2">This will stop all monitoring for this contract.</p>
      `,
      confirmText: 'Remove',
      danger: true
    });

    if (!confirmed) return;

    try {
      await SS.api('DELETE', `/api/contracts/${encodeURIComponent(address)}`);
      SS.showToast('Contract removed', 'success');
      await loadContracts();
    } catch (err) {
      SS.showToast(err.data?.error || 'Failed to remove contract', 'error');
    }
  }

  // ── Sorting ──
  table.querySelectorAll('th.sortable').forEach(th => {
    th.style.cursor = 'pointer';
    th.addEventListener('click', () => {
      const key = th.dataset.sort;
      if (sortKey === key) {
        sortAsc = !sortAsc;
      } else {
        sortKey = key;
        sortAsc = true;
      }
      // Update visual indicator
      table.querySelectorAll('th.sortable').forEach(h => {
        h.textContent = h.textContent.replace(/ [\u2191\u2193]$/, '');
      });
      th.textContent += sortAsc ? ' \u2191' : ' \u2193';
      renderContracts();
    });
  });

  // ── Init ──
  document.addEventListener('DOMContentLoaded', loadContracts);
})();
</script>
{% endblock %}