/* ui_kits/watchover-app/PinUnlock.jsx
   The PIN gate between child and parent mode. Four pine dots +
   round numpad; a wrong PIN gets a gentle shake (wo-pin--error),
   the correct PIN (1234) unlocks parent mode.
   Composes: wo-header · wo-eyebrow · wo-pin · wo-numpad           */

(function () {
  const CORRECT_PIN = '1234';

  function PinUnlock({ onBack, onUnlock }) {
    const Ico = window.WoIcons;
    const [digits, setDigits] = React.useState([]);
    const [error, setError] = React.useState(false);

    const press = (d) => {
      if (error || digits.length >= 4) return;
      const next = [...digits, d];
      setDigits(next);
      if (next.length === 4) {
        window.setTimeout(() => {
          if (next.join('') === CORRECT_PIN) {
            onUnlock();
          } else {
            setError(true);
            window.setTimeout(() => {
              setDigits([]);
              setError(false);
            }, 700);
          }
        }, 160);
      }
    };

    const erase = () => {
      if (!error) setDigits((d) => d.slice(0, -1));
    };

    return (
      <div className="app-shell">
        <header className="wo-header">
          <button className="wo-header__back" onClick={onBack} aria-label="Back to the feed">
            <Ico.chevronLeft />
          </button>
          <div className="wo-header__title">Parent mode</div>
        </header>

        <main className="app-content">
          <div className="app-pin">
            <span className="app-pin__lock">
              <Ico.lock />
            </span>
            <span className="wo-eyebrow">Parents only</span>
            <h2>Unlock with PIN</h2>

            <div className={'wo-pin' + (error ? ' wo-pin--error' : '')}>
              {[0, 1, 2, 3].map((i) => (
                <span
                  key={i}
                  className={
                    'wo-pin__dot' + (digits.length > i ? ' wo-pin__dot--filled' : '')
                  }
                />
              ))}
            </div>

            <p className={'app-pin__help' + (error ? ' app-pin__error' : '')}>
              {error
                ? "That PIN doesn't match — try again."
                : 'Enter your 4-digit PIN to manage the whitelist.'}
            </p>

            <div className="app-pin__pad">
              <div className="wo-numpad">
                {['1', '2', '3', '4', '5', '6', '7', '8', '9'].map((k) => (
                  <button key={k} className="wo-numpad__key" onClick={() => press(k)}>
                    {k}
                  </button>
                ))}
                <span className="wo-numpad__key wo-numpad__key--blank" />
                <button className="wo-numpad__key" onClick={() => press('0')}>
                  0
                </button>
                <button
                  className="wo-numpad__key"
                  onClick={erase}
                  aria-label="Delete last digit"
                >
                  <Ico.backspace />
                </button>
              </div>
            </div>

            <p className="app-pin__hint">Demo PIN · 1234</p>
          </div>
        </main>
      </div>
    );
  }

  window.WoScreens = Object.assign(window.WoScreens || {}, { PinUnlock });
})();