<?php
if (!defined('ABSPATH')) exit;
?>
<section class="spg-crypto-manual-thankyou">
  <h2><?php echo esc_html__('Crypto payment details', 'spg-crypto-manual'); ?></h2>

  <?php if (!empty($expires_at) && (int)$expires_at > time()): ?>
    <div class="spg-crypto-manual-ty-timer" data-expires="<?php echo (int)$expires_at; ?>" style="margin:14px 0;">
      <strong><?php echo esc_html__('Payment window remaining:', 'spg-crypto-manual'); ?></strong>
      <span class="spg-crypto-manual-ty-timer-text">--:--</span>
    </div>

    <script>
      (function(){
        var wrap = document.querySelector('.spg-crypto-manual-ty-timer');
        if(!wrap) return;
        var out = wrap.querySelector('.spg-crypto-manual-ty-timer-text');
        var expires = parseInt(wrap.getAttribute('data-expires') || '0', 10);
        if(!out || !expires) return;

        function fmt(sec){
          sec = Math.max(0, Math.floor(sec));
          var m = Math.floor(sec/60);
          var s = sec%60;
function z(n){ return (n < 10 ? '0' : '') + n; }
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);
  return;
}
          
        }

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

  <?php if (!empty($coin) || !empty($network)): ?>
    <p style="display:flex; align-items:center; gap:10px; flex-wrap:wrap;">
      <?php if (!empty($icons_enabled) && !empty($icon_url)): ?>
        <img
          src="<?php echo esc_url($icon_url); ?>"
          alt=""
          style="width:22px;height:22px;border-radius:4px;"
          onerror="this.style.display='none';"
        />
      <?php endif; ?>

      <strong><?php echo esc_html__('Selected:', 'spg-crypto-manual'); ?></strong>
      <?php echo esc_html(trim(($coin ?? '') . ' ' . ($network ?? ''))); ?>
    </p>
  <?php endif; ?>

  <?php if (!empty($total)): ?>
    <p>
      <strong><?php echo esc_html__('Order total:', 'spg-crypto-manual'); ?></strong>
      <?php echo wp_kses_post($total); ?>
    </p>
  <?php endif; ?>

  <?php if (!empty($amount_crypto)): ?>
    <p>
      <strong><?php echo esc_html__('Amount in crypto:', 'spg-crypto-manual'); ?></strong>
      <?php echo esc_html($amount_crypto); ?>
      <br>
      <small style="color:#666;"><?php echo esc_html__('(Estimated using current rates)', 'spg-crypto-manual'); ?></small>
    </p>
  <?php endif; ?>

  <?php if (!empty($qr_enabled) && !empty($qr)): ?>
    <div class="spg-crypto-manual-qr-wrap" style="margin:16px 0;">
      <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; ?>

  <?php if (!empty($address) && (!isset($show_address) || $show_address)): ?>
    <p style="display:flex; align-items:center; gap:10px; flex-wrap:wrap;">
      <strong><?php echo esc_html__('Wallet address:', 'spg-crypto-manual'); ?></strong>

      <button type="button"
        class="button spg-crypto-manual-copy-address-btn"
        data-copy="<?php echo esc_attr($address); ?>">
        <?php echo esc_html__('Copy', 'spg-crypto-manual'); ?>
      </button>

      <span class="spg-crypto-manual-copy-ok" style="display:none; color:#1a7f37;">
        <?php echo esc_html__('Copied!', 'spg-crypto-manual'); ?>
      </span>
    </p>

    <code style="
      display:block;
      padding:12px;
      border:1px solid #eee;
      border-radius:8px;
      word-break:break-all;
      background:#fafafa;
    "><?php echo esc_html($address); ?></code>

    <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-crypto-manual-copy-address-btn');
          if(!btn) return;

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

          var ok = btn.parentElement.querySelector('.spg-crypto-manual-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>
  <?php endif; ?>

  <?php if (!empty($tag)): ?>
    <p style="margin-top:10px;">
      <strong><?php echo esc_html__('Tag / Memo:', 'spg-crypto-manual'); ?></strong>
      <?php echo esc_html($tag); ?>
    </p>
  <?php endif; ?>

  <?php if (!empty($note)): ?>
    <div class="spg-crypto-manual-note" style="margin-top:14px;">
      <?php echo wp_kses_post( wpautop( $note ) ); ?>
    </div>
  <?php endif; ?>

  <p style="margin-top:16px;">
    <em><?php echo esc_html__('After you send payment, the store owner will verify it manually.', 'spg-crypto-manual'); ?></em>
  </p>
</section>
