// screens-settings.jsx — Settings page (hidden behind a gear on the You tab).
// Holds the heavy/rare actions: profile photo edit, notifications, privacy,
// help, log out, and delete account (in its own clearly-marked danger row).

function SettingsRow({ icon, label, value, onClick, danger, destructive, last }) {
  return (
    <button onClick={onClick} style={{
      width: '100%', background: 'transparent', border: 'none',
      padding: '14px 0',
      borderBottom: last ? 'none' : `1px solid ${PACER.border}`,
      display: 'flex', alignItems: 'center', gap: 14,
      color: destructive ? '#ff7a7a' : PACER.text,
      fontFamily: PACER.font, fontSize: 14.5, fontWeight: 500,
      cursor: 'pointer', textAlign: 'left',
    }}>
      <div style={{
        width: 32, height: 32, borderRadius: 9,
        background: destructive ? 'rgba(255,95,95,0.1)' : 'rgba(255,255,255,0.04)',
        display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
      }}>
        <Icon name={icon} size={16} color={destructive ? '#ff7a7a' : PACER.textDim}/>
      </div>
      <span style={{ flex: 1 }}>{label}</span>
      {value && <span style={{ fontFamily: PACER.mono, fontSize: 12.5, color: PACER.textMute }}>{value}</span>}
      {!destructive && <Icon name="chev" size={14} color={PACER.textSubtle}/>}
    </button>
  );
}

function SettingsGroup({ title, children }) {
  return (
    <div style={{ marginBottom: 22 }}>
      {title && (
        <div style={{
          fontFamily: PACER.font, fontSize: 11, fontWeight: 600,
          color: PACER.textMute, textTransform: 'uppercase', letterSpacing: 1.4,
          marginBottom: 8, padding: '0 4px',
        }}>{title}</div>
      )}
      <div style={{
        background: PACER.card, border: `1px solid ${PACER.border}`,
        borderRadius: 14, padding: '0 16px',
      }}>{children}</div>
    </div>
  );
}

function SettingsScreen({ nav }) {
  return (
    <div style={{ background: PACER.bg, minHeight: '100%', color: PACER.text, fontFamily: PACER.font }}>
      {/* Header */}
      <div style={{
        padding: '54px 16px 12px',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      }}>
        <button onClick={() => nav('profile')} style={{
          width: 40, height: 40, borderRadius: 12,
          background: 'rgba(255,255,255,0.04)', border: `1px solid ${PACER.border}`,
          color: PACER.text, cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <Icon name="chevL" size={20} color={PACER.text}/>
        </button>
        <div style={{ fontSize: 16, fontWeight: 600 }}>Settings</div>
        <div style={{ width: 40 }}/>
      </div>

      <div style={{ padding: '12px 20px 40px' }}>
        {/* Profile photo edit — special row */}
        <div style={{
          background: PACER.card, border: `1px solid ${PACER.border}`,
          borderRadius: 18, padding: 18, marginBottom: 24,
          display: 'flex', alignItems: 'center', gap: 16, cursor: 'pointer',
        }}>
          <div style={{ position: 'relative' }}>
            <Avatar name={ME.firstName} size={64} photo/>
            <div style={{
              position: 'absolute', bottom: -3, right: -3,
              width: 26, height: 26, borderRadius: '50%',
              background: PACER.lime, color: PACER.limeInk,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              border: `2px solid ${PACER.bg}`,
            }}>
              <Icon name="cam" size={13} color={PACER.limeInk}/>
            </div>
          </div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 15, fontWeight: 600, marginBottom: 2 }}>Profile photo</div>
            <div style={{ fontSize: 12, color: PACER.textMute, lineHeight: 1.5 }}>
              Aim for a clear face shot. Tap to change.
            </div>
          </div>
          <Icon name="chev" size={16} color={PACER.textSubtle}/>
        </div>

        {/* Account */}
        <SettingsGroup title="Account">
          <SettingsRow icon="user" label="Name" value={ME.firstName}/>
          <SettingsRow icon="phone" label="Phone" value="+44 ··· 184"/>
          <SettingsRow icon="pin" label="Neighborhood" value={ME.neighborhood} last/>
        </SettingsGroup>

        {/* Preferences */}
        <SettingsGroup title="Preferences">
          <SettingsRow icon="pace" label="Default pace" value={`${ME.paceMin}–${ME.paceMax}/km`}/>
          <SettingsRow icon="run" label="Default distance" value={ME.distancePref}/>
          <SettingsRow icon="bell" label="Notifications" value="On"/>
          <SettingsRow icon="eye" label="Profile visibility" value="Hosts only" last/>
        </SettingsGroup>

        {/* Support */}
        <SettingsGroup title="Support">
          <SettingsRow icon="help" label="Help & community guidelines"/>
          <SettingsRow icon="info" label="About Pacer" value="v0.4.2" last/>
        </SettingsGroup>

        {/* Sign out */}
        <SettingsGroup>
          <SettingsRow icon="exit" label="Sign out" last/>
        </SettingsGroup>

        {/* Danger zone */}
        <div style={{
          marginTop: 8, padding: 16,
          background: 'rgba(255,95,95,0.04)', border: `1px solid rgba(255,95,95,0.2)`,
          borderRadius: 14,
        }}>
          <div style={{
            fontFamily: PACER.font, fontSize: 11, fontWeight: 600,
            color: '#ff7a7a', textTransform: 'uppercase', letterSpacing: 1.4, marginBottom: 4,
          }}>Danger zone</div>
          <div style={{ fontSize: 12, color: PACER.textMute, lineHeight: 1.5, marginBottom: 12 }}>
            Permanently delete your account, profile, runs, and chat history. This can’t be undone.
          </div>
          <Btn variant="danger" size="sm" style={{ width: '100%' }}
            leading={<Icon name="trash" size={14} color="#ff7a7a"/>}>
            Delete account
          </Btn>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { SettingsScreen, SettingsRow, SettingsGroup });