// Delete account — destructive flow with typed-DELETE + feedback step

function SettingsDeleteAccountScreen({ theme, accent, onBack }) {
  const [step, setStep] = React.useState('warn'); // 'warn' | 'confirm' | 'feedback' | 'done'
  const [typed, setTyped] = React.useState('');
  const [reason, setReason] = React.useState(null);
  const [feedback, setFeedback] = React.useState('');

  if (step === 'done') {
    return (
      <Screen theme={theme} padTop={0} padBottom={40}>
        <NavBar theme={theme} title="Delete account" onBack={onBack}/>
        <div style={{ padding: '40px 16px 0', textAlign: 'center' }}>
          <div style={{
            width: 64, height: 64, borderRadius: 32, margin: '0 auto 18px',
            background: `${theme.textMute}18`, color: theme.textDim,
            display:'flex', alignItems:'center', justifyContent:'center',
          }}><Ico.check size={28} sw={2.4}/></div>
          <div style={{ fontFamily: FONTS.display, fontSize: 22, color: theme.text }}>Deletion requested</div>
          <div style={{ fontSize: 13, color: theme.textDim, marginTop: 8, padding: '0 24px', lineHeight: 1.55 }}>
            Your account will be permanently deleted within 30 days. We’ve emailed you a confirmation. Thanks for the feedback — we’ll do better.
          </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>
    );
  }

  if (step === 'feedback') {
    const reasons = [
      'Privacy concerns',
      'Too expensive',
      'Missing features',
      'Found a better app',
      'Not using it enough',
      'Other',
    ];
    return (
      <Screen theme={theme} padTop={0} padBottom={40}>
        <NavBar theme={theme} title="Delete account" onBack={() => setStep('confirm')}/>

        <div style={{ padding: '8px 16px 0', textAlign: 'center' }}>
          <div style={{ fontFamily: FONTS.display, fontSize: 20, color: theme.text, lineHeight: 1.3, padding: '12px 12px 0' }}>
            What did we do wrong?
          </div>
          <div style={{ fontSize: 12.5, color: theme.textDim, marginTop: 8, padding: '0 24px', lineHeight: 1.55 }}>
            Please share feedback — it goes straight to the team and helps us improve.
          </div>
        </div>

        <div style={{ padding: '20px 16px 0' }}>
          <Card theme={theme} padded={false} style={{ padding: 14 }}>
            <div style={{
              fontFamily: FONTS.mono, fontSize: 9.5, letterSpacing: 1, textTransform: 'uppercase',
              color: theme.textMute, marginBottom: 10, padding: '0 2px',
            }}>Main reason</div>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
              {reasons.map(r => {
                const active = reason === r;
                return (
                  <button key={r} onClick={() => setReason(r)} style={{
                    background: active ? theme.text : 'transparent',
                    color: active ? theme.bg : theme.text,
                    border: `0.5px solid ${active ? theme.text : theme.line2}`,
                    borderRadius: 999, padding: '8px 12px',
                    fontFamily: FONTS.ui, fontSize: 12, fontWeight: 500,
                    cursor: 'pointer',
                  }}>{r}</button>
                );
              })}
            </div>
          </Card>
        </div>

        <div style={{ padding: '14px 16px 0' }}>
          <Card theme={theme} padded={false} style={{ padding: 14 }}>
            <div style={{
              fontFamily: FONTS.mono, fontSize: 9.5, letterSpacing: 1, textTransform: 'uppercase',
              color: theme.textMute, marginBottom: 8, padding: '0 2px',
            }}>Tell us more (optional)</div>
            <textarea
              value={feedback}
              onChange={e => setFeedback(e.target.value)}
              placeholder="What would have made you stay?"
              rows={4}
              style={{
                width: '100%', resize: 'vertical', minHeight: 92,
                background: theme.surface2, border: `0.5px solid ${theme.line2}`, borderRadius: 12,
                padding: '12px 14px', color: theme.text,
                fontSize: 13, fontFamily: FONTS.ui, lineHeight: 1.5,
                outline: 'none',
              }}
            />
          </Card>
        </div>

        <div style={{ padding: '20px 16px 0' }}>
          <button onClick={() => setStep('done')} style={{
            width: '100%',
            background: theme.negative, color: '#fff',
            border: 'none', borderRadius: 16,
            padding: '14px',
            fontFamily: FONTS.ui, fontSize: 13.5, fontWeight: 600,
            cursor: 'pointer',
          }}>Submit & delete account</button>
          <button onClick={() => setStep('done')} style={{
            marginTop: 10, width: '100%',
            background: 'transparent', border: 'none',
            color: theme.textDim,
            fontFamily: FONTS.ui, fontSize: 12.5, fontWeight: 500,
            cursor: 'pointer', padding: '10px 0',
          }}>Skip — delete without feedback</button>
        </div>
      </Screen>
    );
  }

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

      {/* Warning hero */}
      <div style={{ padding: '8px 16px 0', textAlign: 'center' }}>
        <div style={{
          width: 56, height: 56, borderRadius: 28, margin: '12px auto 14px',
          background: `${theme.negative}14`, color: theme.negative,
          display:'flex', alignItems:'center', justifyContent:'center',
        }}><Ico.shield size={26}/></div>
        <div style={{ fontFamily: FONTS.display, fontSize: 20, color: theme.text, lineHeight: 1.3, padding: '0 12px' }}>
          {step === 'warn'
            ? 'This will permanently delete your account'
            : 'Are you absolutely sure?'}
        </div>
        <div style={{ fontSize: 12.5, color: theme.textDim, marginTop: 8, padding: '0 24px', lineHeight: 1.55 }}>
          {step === 'warn'
            ? 'This action can’t be undone. We’ll keep your data for 30 days in case you change your mind.'
            : 'Type DELETE below to confirm. Your data is removed within 30 days.'}
        </div>
      </div>

      {step === 'warn' && (
        <>
          <div style={{ padding: '24px 16px 0' }}>
            <Card theme={theme} padded={false} style={{ padding: 16 }}>
              <SectionLabel theme={theme} style={{ padding: '0 0 10px' }}>What gets removed</SectionLabel>
              {[
                'All linked bank, brokerage and crypto accounts',
                'Transaction history and balances',
                'AI memory, recommendations and insights',
                'Subscription and billing records',
              ].map((t, i) => (
                <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '6px 0', fontSize: 13, color: theme.text }}>
                  <span style={{ width: 4, height: 4, borderRadius: 2, background: theme.textMute, flexShrink: 0 }}/>
                  <span>{t}</span>
                </div>
              ))}
            </Card>
          </div>

          <div style={{ padding: '24px 16px 0' }}>
            <button onClick={() => setStep('confirm')} style={{
              width: '100%',
              background: theme.negative, color: '#fff',
              border: 'none', borderRadius: 16,
              padding: '14px',
              fontFamily: FONTS.ui, fontSize: 13.5, fontWeight: 600,
              cursor: 'pointer',
            }}>Delete my account</button>
            <button onClick={onBack} style={{
              marginTop: 10, width: '100%',
              background: 'transparent', border: 'none',
              color: theme.textDim,
              fontFamily: FONTS.ui, fontSize: 12.5, fontWeight: 500,
              cursor: 'pointer', padding: '10px 0',
            }}>Cancel</button>
          </div>
        </>
      )}

      {step === 'confirm' && (
        <>
          <div style={{ padding: '24px 16px 0' }}>
            <Card theme={theme} padded={false} style={{ padding: 16 }}>
              <div style={{
                fontFamily: FONTS.mono, fontSize: 9.5, letterSpacing: 1, textTransform: 'uppercase',
                color: theme.textMute, marginBottom: 8,
              }}>Type DELETE to confirm</div>
              <input
                value={typed}
                onChange={e => setTyped(e.target.value)}
                placeholder="DELETE"
                style={{
                  width: '100%',
                  background: theme.surface2,
                  border: `0.5px solid ${theme.line2}`, borderRadius: 10,
                  padding: '12px 14px',
                  color: theme.text,
                  fontFamily: FONTS.mono, fontSize: 14, letterSpacing: 1,
                  outline: 'none',
                }}
              />
            </Card>
          </div>

          <div style={{ padding: '24px 16px 0' }}>
            <button
              onClick={() => typed === 'DELETE' && setStep('feedback')}
              disabled={typed !== 'DELETE'}
              style={{
                width: '100%',
                background: typed === 'DELETE' ? theme.negative : theme.surface3,
                color: typed === 'DELETE' ? '#fff' : theme.textMute,
                border: 'none', borderRadius: 16,
                padding: '14px',
                fontFamily: FONTS.ui, fontSize: 13.5, fontWeight: 600,
                cursor: typed === 'DELETE' ? 'pointer' : 'not-allowed',
              }}>Continue</button>
            <button onClick={() => { setStep('warn'); setTyped(''); }} style={{
              marginTop: 10, width: '100%',
              background: 'transparent', border: 'none',
              color: theme.textDim,
              fontFamily: FONTS.ui, fontSize: 12.5, fontWeight: 500,
              cursor: 'pointer', padding: '10px 0',
            }}>Go back</button>
          </div>
        </>
      )}
    </Screen>
  );
}

Object.assign(window, { SettingsDeleteAccountScreen });