// Profile / Settings screen

function SettingsScreen({ theme, accent, onBack, onNav, planState = 'free' }) {
  const [pushNotifs, setPushNotifs] = React.useState(true);

  return (
    <Screen theme={theme} padTop={0} padBottom={40}>
      {/* Header */}
      <NavBar theme={theme} title="Settings" onBack={onBack}/>

      {/* 1. Subscription card — varies by state */}
      <div style={{ padding: '6px 16px 0' }}>
        {planState === 'free'
          ? <SubCardFree    theme={theme} accent={accent} onClick={() => onNav('subscription')}/>
          : <SubCardActive  theme={theme} accent={accent} onClick={() => onNav('subscription')} planState={planState}/>}
      </div>

      {/* 2. Referral */}
      <div style={{ padding: '10px 16px 0' }}>
        <button onClick={() => onNav('settings_referral')} style={{
          width: '100%', textAlign: 'left',
          background: theme.surface, border: `0.5px solid ${theme.line2}`,
          borderRadius: 16, padding: '14px 16px',
          display: 'flex', alignItems: 'center', gap: 12, cursor: 'pointer',
        }}>
          <div style={{
            width: 32, height: 32, borderRadius: 10,
            background: `${accent}1A`, color: accent,
            display:'flex', alignItems:'center', justifyContent:'center',
          }}><Ico.gem size={15}/></div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 13.5, color: theme.text, fontWeight: 500 }}>Invite friends</div>
            <div style={{ fontSize: 11, color: theme.textDim, marginTop: 1 }}>Give a month free, get a month free</div>
          </div>
          <Ico.chevR size={16} stroke={theme.textMute}/>
        </button>
      </div>

      {/* 3. Help, account, learn */}
      <SettingsGroup theme={theme}>
        <SettingsRow theme={theme} icon="chat"     label="Help centre"     onClick={() => onNav('settings_help_centre')}/>
        <SettingsRow theme={theme} icon="building" label="Personal info"   onClick={() => onNav('settings_personal_info')}/>
        <SettingsRow theme={theme} icon="wallet"   label="Linked accounts" onClick={() => onNav('settings_linked_accounts')}/>
        <SettingsRow theme={theme} icon="sparkle"  label="Learn"           onClick={() => onNav('learn')}/>
      </SettingsGroup>

      {/* 4. Preferences */}
      <SettingsGroup theme={theme}>
        <SettingsRow    theme={theme}                 icon="lock"     label="Security"           onClick={() => onNav('settings_security')}/>
        <SettingsToggle theme={theme} accent={accent} icon="bell"     label="Push notifications" value={pushNotifs} onChange={setPushNotifs}/>
        <SettingsRow    theme={theme}                 icon="download" label="Export data"        onClick={() => onNav('settings_export_data')}/>
      </SettingsGroup>

      {/* 5. About & account close */}
      <SettingsGroup theme={theme}>
        <SettingsRow theme={theme} icon="star"  label="Rate Himma"       onClick={() => window.open('https://apps.apple.com/app/himma', '_blank')}/>
        <SettingsRow theme={theme} icon="doc"   label="Terms & policies"/>
        <SettingsRow theme={theme} icon="close" label="Delete account"   onClick={() => onNav('settings_delete_account')}/>
      </SettingsGroup>

      {/* Sign out */}
      <div style={{ padding: '20px 16px 0' }}>
        <button style={{
          width: '100%',
          background: theme.surface,
          border: `0.5px solid ${theme.line2}`,
          borderRadius: 16,
          padding: '14px',
          color: theme.negative,
          fontFamily: FONTS.ui, fontSize: 13.5, fontWeight: 600,
          cursor: 'pointer',
        }}>Sign out</button>
      </div>

      {/* Version */}
      <div style={{ textAlign: 'center', padding: '22px 0 6px' }}>
        <div style={{ fontFamily: FONTS.mono, fontSize: 10, color: theme.textMute, letterSpacing: 0.8 }}>
          himma · v2.4.1 (build 2026.04)
        </div>
      </div>
    </Screen>
  );
}

// Subscription card — not subscribed (upsell to convert)
function SubCardFree({ theme, accent, onClick }) {
  const monthly = SUBSCRIPTION.monthlyPrice;
  return (
    <button onClick={onClick} style={{
      width: '100%', textAlign: 'left',
      background: `linear-gradient(135deg, ${accent}18, ${accent}06)`,
      border: `0.5px solid ${accent}40`,
      borderRadius: 16, padding: '14px 16px',
      display: 'flex', alignItems: 'center', gap: 12, cursor: 'pointer',
    }}>
      <div style={{
        width: 32, height: 32, borderRadius: 10,
        background: accent, color: '#fff',
        display:'flex', alignItems:'center', justifyContent:'center',
        flexShrink: 0,
      }}><Ico.sparkles size={15}/></div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontFamily: FONTS.mono, fontSize: 9.5, letterSpacing: 1.4, textTransform: 'uppercase', color: accent, marginBottom: 2 }}>Start Himma Pro</div>
        <div style={{ fontSize: 13.5, color: theme.text, fontWeight: 500, lineHeight: 1.3 }}>See the benefits — save <Dh/> {monthly}/month</div>
        <div style={{ fontSize: 11, color: theme.textDim, marginTop: 2 }}>Unlock every asset class & unlimited AI</div>
      </div>
      <Ico.chevR size={16} stroke={accent}/>
    </button>
  );
}

// Subscription card — active (monthly or annual)
function SubCardActive({ theme, accent, onClick, planState }) {
  const isAnnual = planState === 'annual';
  const price = isAnnual ? SUBSCRIPTION.pricePerMonth : SUBSCRIPTION.monthlyPrice;
  const cycle = isAnnual ? 'Annual' : 'Monthly';
  const renews = isAnnual ? SUBSCRIPTION.nextBilling : '14 Mar 2026';
  return (
    <button onClick={onClick} style={{
      width: '100%', textAlign: 'left',
      background: `${accent}10`, border: `0.5px solid ${accent}40`,
      borderRadius: 16, padding: '14px 16px',
      display: 'flex', alignItems: 'center', gap: 12, cursor: 'pointer',
    }}>
      <div style={{
        width: 32, height: 32, borderRadius: 10,
        background: accent, color: '#fff',
        display:'flex', alignItems:'center', justifyContent:'center',
        flexShrink: 0,
      }}><Ico.sparkles size={15}/></div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontFamily: FONTS.mono, fontSize: 9.5, letterSpacing: 1.4, textTransform: 'uppercase', color: accent, marginBottom: 2 }}>Active · {cycle}</div>
        <div style={{ fontSize: 13.5, color: theme.text, fontWeight: 500 }}>{SUBSCRIPTION.plan} · <Dh/> {price}/mo</div>
        <div style={{ fontSize: 11, color: theme.textDim, marginTop: 1 }}>Renews {renews}</div>
      </div>
      <Ico.chevR size={16} stroke={theme.textMute}/>
    </button>
  );
}

// Reusable nav header for sub-screens
function NavBar({ theme, title, onBack, action }) {
  return (
    <div style={{
      padding: '8px 16px 14px',
      display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10,
    }}>
      <button onClick={onBack} style={{
        width: 36, height: 36, borderRadius: 18,
        background: theme.surface, border: `0.5px solid ${theme.line2}`,
        color: theme.text, cursor: 'pointer',
        display:'flex', alignItems:'center', justifyContent:'center',
      }}><Ico.chevL size={16}/></button>
      <div style={{ fontFamily: FONTS.display, fontSize: 16, color: theme.text, fontWeight: 500 }}>{title}</div>
      <div style={{ width: 36, display:'flex', justifyContent:'flex-end' }}>{action}</div>
    </div>
  );
}

function SettingsGroup({ theme, label, children }) {
  const arr = React.Children.toArray(children);
  return (
    <div style={{ padding: '14px 16px 0' }}>
      {label && <SectionLabel theme={theme} style={{ padding: '0 4px 8px' }}>{label}</SectionLabel>}
      <Card theme={theme} padded={false}>
        {arr.map((child, i) => React.cloneElement(child, { key: i, last: i === arr.length - 1 }))}
      </Card>
    </div>
  );
}

function SettingsRow({ theme, icon, label, detail, last, onClick }) {
  const Icon = Ico[icon] || Ico.dots;
  return (
    <button onClick={onClick} style={{
      width: '100%', textAlign: 'left',
      display: 'flex', alignItems: 'center', gap: 12,
      padding: '13px 16px',
      background: 'transparent',
      borderTop: 'none', borderLeft: 'none', borderRight: 'none',
      borderBottom: last ? 'none' : `0.5px solid ${theme.line}`,
      cursor: 'pointer', color: theme.text,
    }}>
      <div style={{
        width: 30, height: 30, borderRadius: 8,
        background: theme.surface2, color: theme.textDim,
        display:'flex', alignItems:'center', justifyContent:'center',
        flexShrink: 0,
      }}><Icon size={15}/></div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontFamily: FONTS.ui, fontSize: 13.5, color: theme.text, fontWeight: 500 }}>{label}</div>
      </div>
      {detail && <div style={{ fontSize: 12, color: theme.textMute, fontFamily: FONTS.mono, whiteSpace:'nowrap' }}>{detail}</div>}
      <Ico.chevR size={14} stroke={theme.textMute} style={{ marginLeft: 4 }}/>
    </button>
  );
}

function SettingsToggle({ theme, accent, icon, label, sub, value, onChange, last }) {
  const Icon = Ico[icon] || Ico.dots;
  return (
    <div style={{
      display: 'flex', alignItems: 'center', gap: 12,
      padding: '13px 16px',
      borderBottom: last ? 'none' : `0.5px solid ${theme.line}`,
    }}>
      <div style={{
        width: 30, height: 30, borderRadius: 8,
        background: theme.surface2, color: theme.textDim,
        display:'flex', alignItems:'center', justifyContent:'center',
        flexShrink: 0,
      }}><Icon size={15}/></div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontFamily: FONTS.ui, fontSize: 13.5, color: theme.text, fontWeight: 500 }}>{label}</div>
        {sub && <div style={{ fontSize: 11, color: theme.textMute, marginTop: 2 }}>{sub}</div>}
      </div>
      <button onClick={() => onChange(!value)} style={{
        width: 42, height: 24, borderRadius: 12, position: 'relative',
        background: value ? accent : theme.surface3,
        border: `0.5px solid ${value ? accent : theme.line2}`,
        cursor: 'pointer', transition: 'background 160ms',
        flexShrink: 0,
      }}>
        <div style={{
          position: 'absolute', top: 2, left: value ? 20 : 2,
          width: 18, height: 18, borderRadius: 9, background: '#fff',
          boxShadow: '0 1px 3px rgba(0,0,0,0.2)',
          transition: 'left 160ms',
        }}/>
      </button>
    </div>
  );
}

Object.assign(window, { SettingsScreen, NavBar });