const EMOJI_ALPHABET = ['🐻','🐱','🦊','🐼','🐯','🦁','🐶','🐸','🐰','🦉','🦄','🌈','⭐','🍎','🍕','🎈'];

const EmojiPinInput = ({ onComplete, onChange, minLen = 4, maxLen = 6, disabled = false, resetKey = 0 }) => {
  const [pin, setPin] = React.useState([]);

  React.useEffect(() => { setPin([]); }, [resetKey]);

  const add = (e) => {
    if (disabled) return;
    if (pin.length >= maxLen) return;
    const next = [...pin, e];
    setPin(next);
    onChange?.(next);
  };
  const back = () => { const next = pin.slice(0, -1); setPin(next); onChange?.(next); };
  const reset = () => { setPin([]); onChange?.([]); };
  const submit = () => { if (pin.length >= minLen) onComplete?.(pin); };

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
      <div style={{
        display: 'flex', gap: 10, justifyContent: 'center', minHeight: 52,
        padding: '8px 12px', background: 'var(--surface-2)', borderRadius: 14,
        border: '1px solid var(--border)',
      }}>
        {Array.from({ length: maxLen }).map((_, i) => {
          const e = pin[i];
          return (
            <span key={i} style={{
              fontSize: 32, width: 40, height: 40, display: 'grid', placeItems: 'center',
              opacity: e ? 1 : 0.25,
            }}>{e || '•'}</span>
          );
        })}
      </div>

      <div style={{
        display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 10,
        maxWidth: 360, margin: '0 auto', width: '100%',
      }}>
        {EMOJI_ALPHABET.map((e) => {
          const full = pin.length >= maxLen;
          return (
            <button key={e} type="button" onClick={() => add(e)} disabled={disabled || full}
              style={{
                fontSize: 32, padding: 12, border: '1px solid var(--border)',
                borderRadius: 14, background: 'var(--surface)',
                cursor: disabled || full ? 'not-allowed' : 'pointer',
                transition: 'transform .1s ease, background .15s ease',
                opacity: disabled || full ? 0.5 : 1,
              }}
              onMouseDown={(ev) => ev.currentTarget.style.transform = 'scale(.94)'}
              onMouseUp={(ev) => ev.currentTarget.style.transform = 'scale(1)'}
              onMouseLeave={(ev) => ev.currentTarget.style.transform = 'scale(1)'}
            >{e}</button>
          );
        })}
      </div>

      <div style={{ display: 'flex', gap: 8, justifyContent: 'center', flexWrap: 'wrap' }}>
        <Button variant="ghost" size="sm" type="button" onClick={back} disabled={disabled || pin.length === 0}>← Удалить</Button>
        <Button variant="ghost" size="sm" type="button" onClick={reset} disabled={disabled || pin.length === 0}>Сбросить</Button>
        <Button variant="primary" size="sm" type="button" onClick={submit} disabled={disabled || pin.length < minLen}>Готово</Button>
      </div>
    </div>
  );
};

Object.assign(window, { EmojiPinInput, EMOJI_ALPHABET });