<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Kole UI · CodeInput</title>
  <link rel="stylesheet" href="../.design_library/kole-ui/colors_and_type.css" />
  <link rel="stylesheet" href="./CodeInput.css" />
</head>
<body>
  <div class="kole-page">
    <h2 class="kole-h2">CodeInput 验证码输入</h2>
    <p class="kole-desc">用于短信验证码、一次性口令（OTP）输入，支持自动跳转、退格回退与粘贴填充。</p>

    <div class="kole-demo">
      <div class="kole-demo__title">基础用法（6 位）</div>
      <div class="kole-code" id="code1" data-length="6"></div>
      <div class="kole-code-tip" id="code1-tip"></div>
    </div>

    <div class="kole-demo">
      <div class="kole-demo__title">掩码模式 + 4 位</div>
      <div class="kole-code" id="code2" data-length="4" data-masked="1"></div>
      <div class="kole-code-tip" id="code2-tip"></div>
    </div>
  </div>

  <script>
    function initCode(root, tip) {
      var length = parseInt(root.dataset.length || '6', 10);
      var masked = root.dataset.masked === '1';
      var cells = [];
      var vals = new Array(length).fill('');

      for (var i = 0; i < length; i++) {
        var cell = document.createElement('div');
        cell.className = 'kole-code-cell' + (masked ? ' is-masked' : '');
        var input = document.createElement('input');
        input.className = 'kole-code-input';
        input.maxLength = 1;
        input.inputMode = 'numeric';
        input.setAttribute('aria-label', '验证码第 ' + (i + 1) + ' 位');
        cell.appendChild(input);
        root.appendChild(cell);
        cells.push(input);

        input.addEventListener('focus', function () { this.parentElement.classList.add('is-focus'); });
        input.addEventListener('blur', function () { this.parentElement.classList.remove('is-focus'); });

        input.addEventListener('input', function (e) {
          var idx = cells.indexOf(this);
          var ch = (e.target.value || '').slice(-1);
          vals[idx] = ch;
          this.value = ch;
          this.parentElement.classList.toggle('is-filled', !!ch);
          if (ch && idx < length - 1) cells[idx + 1].focus();
          emit();
        });

        input.addEventListener('keydown', function (e) {
          var idx = cells.indexOf(this);
          if (e.key === 'Backspace') {
            e.preventDefault();
            if (vals[idx]) {
              vals[idx] = '';
              this.value = '';
              this.parentElement.classList.remove('is-filled');
            } else if (idx > 0) {
              vals[idx - 1] = '';
              cells[idx - 1].value = '';
              cells[idx - 1].parentElement.classList.remove('is-filled');
              cells[idx - 1].focus();
            }
            emit();
          } else if (e.key === 'ArrowLeft' && idx > 0) {
            cells[idx - 1].focus();
          } else if (e.key === 'ArrowRight' && idx < length - 1) {
            cells[idx + 1].focus();
          }
        });

        input.addEventListener('paste', function (e) {
          e.preventDefault();
          var text = (e.clipboardData || window.clipboardData).getData('text') || '';
          var digits = text.replace(/\D/g, '').slice(0, length);
          for (var k = 0; k < length; k++) {
            vals[k] = digits[k] || '';
            cells[k].value = digits[k] || '';
            cells[k].parentElement.classList.toggle('is-filled', !!digits[k]);
          }
          var next = Math.min(digits.length, length - 1);
          cells[next].focus();
          emit();
        });
      }

      function emit() {
        var code = vals.join('');
        tip.textContent = code.length === length ? '已输入完成：' + code : '';
        root.dispatchEvent(new CustomEvent('change', { detail: code }));
      }
    }

    initCode(document.getElementById('code1'), document.getElementById('code1-tip'));
    initCode(document.getElementById('code2'), document.getElementById('code2-tip'));
  </script>
</body>
</html>
