// Change passcode — 3-step PIN flow

function SettingsChangePasscodeScreen({ theme, accent, onBack }) {
  const [step, setStep] = React.useState('current'); // 'current' | 'new' | 'confirm' | 'done'
  const [buf, setBuf] = React.useState('');
  const [newPin, setNewPin] = React.useState('');
  const [error, setError] = React.useState('');

  const titleFor = {
    current: 'Enter current passcode',
    new:     'Enter a new passcode',
    confirm: 'Confirm new passcode',
    done:    'Passcode updated',
  };
  const subFor = {
    current: 'Enter your existing 6-digit passcode to continue.',
    new:     'Choose a 6-digit passcode you’ll remember.',
    confirm: 'Re-enter the new passcode to confirm.',
    done:    'Your passcode has been changed successfully.',
  };

  React.useEffect(() => {
    if (buf.length !== 6) return;
    if (step === 'current') {
      // Accept any 6 digits as the current passcode in this prototype
      setBuf(''); setStep('new');
    } else if (step === 'new') {
      setNewPin(buf); setBuf(''); setStep('confirm');
    } else if (step === 'confirm') {
      if (buf === newPin) {
        setStep('done'); setBuf('');
      } else {
        setError('Passcodes don’t match. Try again.');
        setBuf('');
      }
    }
  }, [buf, step, newPin]);

  const press = (n) => {
    setError('');
    if (n === 'del') setBuf(b => b.slice(0, -1));
    else if (buf.length < 6) setBuf(b => b + n);
  };

  if (step === 'done') {
    return (
      <Screen theme={theme} padTop={0} padBottom={40}>
        <NavBar theme={theme} title="Change passcode" onBack={onBack}/>
        <div style={{ padding: '40px 16px 0', textAlign: 'center' }}>
          <div style={{
            width: 64, height: 64, borderRadius: 32, margin: '0 auto 18px',
            background: `${theme.positive}18`, color: theme.positive,
            display:'flex', alignItems:'center', justifyContent:'center',
          }}><Ico.check size={28} sw={2.4}/></div>
          <div style={{ fontFamily: FONTS.display, fontSize: 22, color: theme.text }}>{titleFor.done}</div>
          <div style={{ fontSize: 13, color: theme.textDim, marginTop: 8, padding: '0 24px' }}>{subFor.done}</div>
          <button onClick={onBack} style={{
            marginTop: 28, background: theme.text, color: theme.bg,
            border: 'none', borderRadius: 16,
            padding: '14px 28px',
            fontFamily: FONTS.ui, fontSize: 13.5, fontWeight: 600,
            cursor: 'pointer',
          }}>Back to Settings</button>
        </div>
      </Screen>
    );
  }

  return (
    <Screen theme={theme} padTop={0} padBottom={40}>
      <NavBar theme={theme} title="Change passcode" onBack={onBack}/>

      <div style={{ padding: '20px 16px 0', textAlign: 'center' }}>
        <div style={{ fontFamily: FONTS.display, fontSize: 20, color: theme.text }}>{titleFor[step]}</div>
        <div style={{ fontSize: 12.5, color: theme.textDim, marginTop: 6, padding: '0 24px' }}>{subFor[step]}</div>
      </div>

      {/* Dot row */}
      <div style={{ padding: '32px 16px 0', display: 'flex', justifyContent: 'center', gap: 14 }}>
        {[0,1,2,3,4,5].map(i => (
          <div key={i} style={{
            width: 14, height: 14, borderRadius: 7,
            background: i < buf.length ? theme.text : 'transparent',
            border: `1px solid ${i < buf.length ? theme.text : theme.line2}`,
            transition: 'background 120ms',
          }}/>
        ))}
      </div>

      {error && (
        <div style={{
          padding: '14px 16px 0', textAlign: 'center',
          color: theme.negative, fontSize: 12, fontFamily: FONTS.ui,
        }}>{error}</div>
      )}

      {/* Numeric keypad */}
      <div style={{ padding: '36px 28px 0', display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 14 }}>
        {['1','2','3','4','5','6','7','8','9','','0','del'].map((k, i) => {
          if (k === '') return <div key={i}/>;
          return (
            <button key={i} onClick={() => press(k)} style={{
              height: 56, borderRadius: 28,
              background: theme.surface, border: `0.5px solid ${theme.line2}`,
              color: theme.text,
              fontFamily: FONTS.display, fontSize: 22, fontWeight: 400,
              cursor: 'pointer',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}>{k === 'del' ? <Ico.chevL size={18}/> : k}</button>
          );
        })}
      </div>
    </Screen>
  );
}

Object.assign(window, { SettingsChangePasscodeScreen });