<?php
if (!defined('ABSPATH'))
  exit;
?>
<section class="spg-ty">
  <div class="spg-ty-card">

    <!-- Top summary -->
    <div class="spg-ty-top">
      <div class="spg-ty-top-left">
        <?php if (!empty($icons_enabled) && !empty($icon_url)): ?>
          <img class="spg-ty-coin-dot" src="<?php echo esc_url($icon_url); ?>" alt=""
            onerror="this.style.display='none';" />
        <?php else: ?>
          <span class="spg-ty-coin-dot spg-ty-coin-dot--fallback"></span>
        <?php endif; ?>

        <?php if (!empty($expires_at) && (int) $expires_at > time()): ?>
          <span class="spg-ty-top-timer" data-expires="<?php echo (int) $expires_at; ?>">
            <span class="spg-ty-timer-text">--:--</span>
          </span>
        <?php endif; ?>
      </div>

      <div class="spg-ty-top-right">
        <?php if (!empty($total)): ?>
          <div class="spg-ty-top-amount"><?php echo wp_kses_post($total); ?></div>
        <?php endif; ?>
      </div>
    </div>

    <div class="spg-ty-body">
      <h2 class="spg-ty-title">
        <?php echo esc_html__('Pay with', 'spg-crypto-manual'); ?>
        <?php
        $coin_full = function_exists('spg_coin_full_name') ? spg_coin_full_name((string) $coin) : (string) $coin;
        $net_short = function_exists('spg_network_short') ? spg_network_short((string) $network) : (string) $network;
        ?>

        <?php if ($coin_full !== ''): ?>
          <span class="spg-ty-title-coin"><?php echo esc_html($coin_full); ?></span>
        <?php endif; ?>

        <?php if ($net_short !== ''): ?>
          <span class="spg-ty-title-net"><?php echo esc_html($net_short); ?> <span class="spg-ty-k">[network]</span></span>
        <?php endif; ?>
      </h2>

      <div class="spg-ty-panel">
        <!-- QR -->
        <?php if (!empty($qr_enabled) && !empty($qr)): ?>
          <div class="spg-ty-qr">
            <img src="<?php echo esc_url($qr); ?>" alt="<?php echo esc_attr__('Payment QR code', 'spg-crypto-manual'); ?>"
              style="max-width:<?php echo (int) ($qr_px ?? 220); ?>px;height:auto;"
              onerror="this.style.display='none';" />
          </div>
        <?php endif; ?>

        <p class="spg-ty-help">
          <?php echo esc_html__('Scan wallet address to send payment or copy wallet address below', 'spg-crypto-manual'); ?>
        </p>

        <!-- Wallet row -->
        <div class="spg-ty-row spg-ty-row--split">
          <div class="spg-ty-kv">
            <div class="spg-ty-k"><?php echo esc_html__('Wallet address', 'spg-crypto-manual'); ?></div>

            <?php if (!empty($address) && (!isset($show_address) || $show_address)): ?>
              <div class="spg-ty-v spg-ty-v--mono">
                <span class="spg-ty-addr-short">
                  <?php
                  $addr = (string)$address;
                  $short = (strlen($addr) > 16)
                    ? substr($addr, 0, 6) . '…' . substr($addr, -10)
                    : $addr;
                  echo esc_html($short);
                  ?>
                </span>

                <button type="button" class="spg-ty-copy spg-copy-address-btn"
                  data-copy="<?php echo esc_attr($address); ?>"
                  aria-label="<?php echo esc_attr__('Copy wallet address', 'spg-crypto-manual'); ?>">⧉</button>

                <span class="spg-copy-ok spg-ty-copied" style="display:none;">
                  <?php echo esc_html__('Copied!', 'spg-crypto-manual'); ?>
                </span>
              </div>
            <?php endif; ?>
          </div>
        </div>

        <!-- Amount row -->
        <div class="spg-ty-row spg-ty-row--split spg-ty-row--border">
          <div class="spg-ty-kv">
            <div class="spg-ty-k"><?php echo esc_html__('Amount to send', 'spg-crypto-manual'); ?></div>
            <div class="spg-ty-v spg-ty-v--mono">
              <?php echo esc_html($amount_crypto ?? ''); ?>
            </div>
          </div>

          <div class="spg-ty-kv spg-ty-kv--right">
            <div class="spg-ty-k"><?php echo esc_html__('equivalent', 'spg-crypto-manual'); ?></div>
            <div class="spg-ty-v">
              <?php echo wp_kses_post($total ?? ''); ?>
            </div>
          </div>
        </div>

        <?php if (!empty($tag)): ?>
          <div class="spg-ty-row spg-ty-row--border">
            <div class="spg-ty-kv">
              <div class="spg-ty-k"><?php echo esc_html__('Tag / Memo', 'spg-crypto-manual'); ?></div>
              <div class="spg-ty-v spg-ty-v--mono"><?php echo esc_html($tag); ?></div>
            </div>
          </div>
        <?php endif; ?>
      </div>

      <?php if (!empty($note)): ?>
        <div class="spg-ty-note">
          <?php echo wp_kses_post(wpautop($note)); ?>
        </div>
      <?php endif; ?>

      <p class="spg-ty-foot">
        <?php
        echo wp_kses_post(
          __('Send your payment.<br>Sit back and relax :)<br>The system will <strong>automatically</strong> verify it and complete your order.', 'spg-crypto-manual')
        );
        ?>
      </p>
    </div>
  </div>
</section>

<!-- TIMER (top header only) -->
<script>
  (function() {
    var wrap = document.querySelector('.spg-ty-top-timer');
    if (!wrap) return;

    var out = wrap.querySelector('.spg-ty-timer-text');
    var expires = parseInt(wrap.getAttribute('data-expires') || '0', 10);
    if (!out || !expires) return;

    function z(n) {
      return (n < 10 ? '0' : '') + n;
    }

    function fmt(sec) {
      sec = Math.max(0, Math.floor(sec));
      var m = Math.floor(sec / 60);
      var s = sec % 60;
      return z(m) + ':' + z(s);
    }

    function tick() {
      var now = Math.floor(Date.now() / 1000);
      var left = expires - now;
      out.textContent = fmt(left);

      if (left <= 0) {
        out.textContent = '00:00';
        clearInterval(t);
      }
    }

    tick();
    var t = setInterval(tick, 1000);
  })();
</script>

<!-- COPY -->
<script>
  (function() {
    function legacyCopy(text) {
      var ta = document.createElement('textarea');
      ta.value = text;
      ta.setAttribute('readonly', '');
      ta.style.position = 'fixed';
      ta.style.left = '-9999px';
      document.body.appendChild(ta);
      ta.select();
      try {
        document.execCommand('copy');
      } catch (e) {}
      document.body.removeChild(ta);
    }

    document.addEventListener('click', function(e) {
      var btn = e.target.closest('.spg-copy-address-btn');
      if (!btn) return;

      var text = (btn.getAttribute('data-copy') || '').trim();
      if (!text) return;

      var ok = btn.parentElement.querySelector('.spg-copy-ok');

      function flash() {
        if (!ok) return;
        ok.style.display = 'inline';
        setTimeout(function() {
          ok.style.display = 'none';
        }, 900);
      }

      if (navigator.clipboard && window.isSecureContext) {
        navigator.clipboard.writeText(text).then(flash).catch(function() {
          legacyCopy(text);
          flash();
        });
      } else {
        legacyCopy(text);
        flash();
      }
    });

  })();
</script>